Once you have added your products to your dashboard, they need to be rendered and displayed. This can be done automatically by adding a piece of code called an “sr-block” to your page:

The line of code above contains two optional parameters, and a [NAME] tag:

sr-meta: If you add a category name here, only products in this category will be shown.

sr-show-max: Set this to how many products you wish to display.

[NAME]: This is the placeholder for where we will output the product name. We replace tags with raw content, so you should also wrap them in containers, such as:

The sr-block acts as a repeater and repeats for all of your products (or those in a chosen category). This means that the template you choose will be used for each product automatically and will list the details of each individual product until it reaches the end of the list.

Display Products from Multiple Categories

To display products from more than one category, simply add them into the sr-meta section with commas in-between and no spaces.

Display Product Information within Your SR-Block

In order to show the product information such as names, prices, etc., you must add some placeholder variables (tags) as shown in the code snippet below.

The example above would create and display a list of products in the “salad” category, each with their individual names, straplines, buy links etc. 

Here is an example of a Shoprocket site using meta tags to create categories:

Once you have added a product block, your products will be displayed on your site.

Instead of adding the product to the basket, you can also make an element that links to another page dedicated to the product selected. To do this, remove the [ADDTOCART] placeholder and replace it with an address containing the product slug, as shown below. You can also have both a quick buy link and a link to the individual product page.

To further customise your product block, you can use any of the tags shown in the table below:

Variable Name                                  Description

[NAME]                                                  The name of the product

[STRAPLINE]                                         The product strapline (also known as tagline or                                                                    slogan)

[DESCRIPTION]                                    The full product description (rendered in HTML)

[PRICE]                                                  The product price

[CURRENCY]                                        The currency currently chosen

[SLUG]                                                   The unique identifier of the product that can be                                                                  used in a URL which links to a dedicated product                                                                page

[IMAGESRC]                                          The full image URL of the product hero image

[META]                                                   Will output all meta assigned to your products

[QUANTITY]                                          Available stock

[WEIGHT]                                              Product weight

[DATEADDED]                                      Date when product was created in Shoprocket

[EXTERNALCODE]                               External product code

[VIEWS]                                                 Amount of times the product has been viewed

[VIDEO]                                                 Will output the video URL if set (Note: this will                                                                      only output the URL. You will need to add your                                                                    own video player code.)

**Advanced Usage of sr-block**

Below there is an embedded page containing examples of many of the features discussed above. See the source code for more detail.

The code for this page can be found here and you can view the page in a new tab here.

Layout issues with product list

If you find that your products are displaying in a vertical list, rather than inline horizontally, it may be due to your web editor or CMS (such as Wordpress) adding extra line breaks or paragraphs into your code block. The best way to resolve this is to remove all whitespace from your code snippet, or copy the code snippet from below:

Was this article helpful?
Thank you!