To create a single page for each product, you only need to create one template or view in your website with a generic URL, such as

Then, you would feed the product slug to the URL. It is used by Shoprocket as an identifier, but in a nice format that you can read. 

To test this, you would simply navigate to your new product page, and append the slug/URL of a product with #!/ such as!/hello-world-product.

Of course, you'll want to be able to automatically link customers to the product pages without typing in URLs, so this can be achieved within your "sr-block" code snippet with the tag [SLUG]. 

You can create a link to the individual product page from within your product list like this:

In the above code example, we would dynamically replace [SLUG] with the product URL, so that link would become "/product#!/product-URL" 

Full List of Classnames That Can be Used in Single Product Pages

Once you have created your single product page, you can use the following classes to access the product data:

Classname example                                  Output

sr-name                                                         Product name

sr-description                                               Product description

sr-strapline                                                   Product strapline

sr-price                                                         Product price

sr-currency                                                   Product currency

sr-dateadded                                               Date product was added

sr-meta                                                         Comma seperated list of meta/categories of                                                                         product

sr-weight                                                      Product weight

sr-singleadditem                                         Add to cart link

Hero Image (Product's Main Image)

To add the hero image (the product's main image) to your page, you must use the class sr-heroimage. The image source and alt attributes are automatically added by Shoprocket. 

The Shoprocket image conversion API allows you to specify certain image constraints and behaviours via corresponding attributes. For example, you can resize images, crop them, set the quality, add a water mark etc.

In the following example, we return the image 200px wide and 200px in height, cropping the excess. Note: whilst width and height attributes are not required by Shoprocket, adding them to the image tag will help your page render faster.

Below is a table of all the image API attributes and their possible values.

attribute                                values
sr-imagewidth                          positive integer
sr-imageheight                        positive integer
sr-imagefit                                "crop", "max", "fit", "scale" 

Image Gallery

If you want to use an image gallery, the class sr-imagegallery will return all of the images for the product except the hero image. You can use any JavaScript image gallery class to render the images how you please.

Anything within the tags with the sr-imagegallery class will be repeated for each image.

Product Name

Add the name of the product using the class sr-name on any element, as shown below.

Product Currency & Price
Add the product price using the class sr-price on any element, as shown below. (Note: we have also added the currency with sr-currency in a span immediately before the price)

Add to Cart Button/Link
The add to cart button will trigger the Shoprocket modal, allowing the user to choose product options and quantity and add their selection to the basket.

Related Products

You can also show related products on the page using the class sr-related.

The attribute sr-show-max sets the maximum number of products to display.

As with the sr-imagegallery class, some data are only accessible via placeholders. These are [IMAGESRC] and [RELATEDSLUG]. Also, the image API is only accessible by manually supplying the parameters in the image source attribute string. In this example, we use the same page view/template for related products as the single product view (/product). This way you are always using the same template in your website.

Below is a page containing examples of many of the features listed above, which you can see in the source code. Note how it is possible to add your own classes for styling and rearranging or adding html elements.

The code for this page can be found here and you can view the page in a new tab here.
Was this article helpful?
Thank you!