The Shoprocket Support Hub

Welcome to the Shoprocket hub. You'll find comprehensive guides and documentation to help you start working with Shoprocket as quickly as possible, as well as support if you get stuck. Let's jump right in!

FAQ Documentation Developer Chat System Health

Display a Single Product with Its Own Page

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:

<div class="sr-block" sr-meta="" sr-show-max="99">
	<div class="sr-item">
		<div class="sr-name">[NAME]</div>
		<div class="sr-price">[CURRENCY][PRICE]</div>           
    <a href="/product#!/[SLUG]">View product</a>

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


Product name


Product description


Product strapline


Product price


Product currency


Date product was added


Comma seperated list of meta/categories of product


Product weight


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.

<img class="sr-heroimage" sr-imagewidth="200" sr-imageheight="200" sr-imagefit="crop">

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



positive integer


positive integer


"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.

Note: this block is slightly different.

We use [SRC] and [NAME] placeholders instead of classes or attributes for the product image source and name. Shoprocket replaces these with the actual values. Also, you must manually construct the image source string with the format shown to use the image API.

<div class="sr-imagegallery"><!-- this wrapper could contain any gallery plugin class you wish -->
	<a href="[SRC]" >
		<img src="[SRC]/convert?w=200&h=200&fit=crop" alt="[NAME]" width="200" height="200">

Product Name

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

<h1 class="sr-name"></h1>

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)

<span class="sr-currency"></span><span class="sr-price"></span>

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.

<a class="sr-singleadditem">Add to cart</a>

Note: no product ID is set in this buy button.

When you use our standard buy buttons, they look like this: Buy

The ID in that URL tells Shoprocket which product to add to cart, however as this is a single product page we already know which product you want to add.

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.

<div class="sr-related" sr-show-max="10">
	<a href="/product#!/[RELATEDSLUG]"> 
    <img src="[IMAGESRC]/convert?w=200&h=200&fit=crop">

Which products do we class as related?

By default, we pick products which have the same meta as the current product and where the price is between 40% and 125% of the current product price.

E.G. - If your product was in "shoes" and priced at £10, we would display other products from the "shoes" category where the price was between £4 and £12.50.

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.

Display a Single Product with Its Own Page