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 yourdomain.com/product.
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 yourdomain.com/product#!/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.
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 yourdomain.com/product#!/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.