Shoprocket

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 Multiple Products

DIsplay Multiple Products

Displaying your products on your website is simple. First, make sure you have added your products to Shoprocket via the dashboard. If you would like to learn how, click here.

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:

<div class='sr-block' sr-meta="" sr-show-max="99">[NAME]</div>   

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:

<div class='sr-block' sr-meta="" sr-show-max="99"><p>[NAME]</p></div>   

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.

<div class='sr-block' sr-meta="salad,snacks,drinks" sr-show-max="99"></div>   

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.

<div class='sr-block' sr-meta="salad" sr-show-max="99">
  <p>[NAME]</p>
  <p>[STRAPLINE]</p>
  <p>[DESCRIPTION]</p>
  <p>[CURRENCY][PRICE]</p>
	<a href="[ADDTOCART]">Add to Cart</a>
</div>

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.

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.

<div class='sr-block' sr-meta="salad" sr-show-max="99">
  <p>[NAME]</p>
	<a href="/product#!/[SLUG]" class="" type="button">View product</a>
</div>

More Information on Single Product Pages

To learn more about creating individual product pages, click here.

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

Using Our Pre-Styled List of Products

You can also use our pre-styled code snippet which will add your products into your web page, in a styled grid layout with images and buy buttons. You can simply copy and paste the below code snippet into your site.

<!-- SHOPROCKET SR-BLOCK START -->
<div class="sr-block sr-default" sr-meta="" sr-show-max="99" style="visibility: hidden;">
  <div class="sr-item sr-buy-widget sr-small">
		
    <div class="sr-image-holder">
			<img src="[IMAGESRC]/convert?w=460&h=460&fit=max&quality=100" class="sr-image" title="[NAME]" alt="[NAME]"/>
		</div>

    <div class="sr-product-details">
    	<div class="sr-name">[NAME]</div>
			<div class="sr-strapline">[STRAPLINE] </div>
			<div class="sr-price">[CURRENCY][PRICE]</div>           
      <a class="sr-add-link" href="[ADDTOCART]" type="button">
			<div class="sr-add">
        <i class="fa fa-shopping-cart"></i> Buy Now
      </div>
		</a>
		</div>
   
  </div>
</div>
<!-- SHOPROCKET END -->  
                    

Advanced Usage of sr-block

Using an Image in SR-Block

If you want to use an image in your sr-block, you need the following piece of code below. Note: you can use this with other tags like [NAME], etc.

<div class='sr-block' sr-meta="" sr-show-max="99">
	<img src="[IMAGESRC]" class="">
</div>

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:

<div class="sr-block sr-default"sr-meta=""sr-show-max=99 style=visibility:hidden><div class="sr-buy-widget sr-item sr-small"><div class=sr-image-holder><img alt=[NAME] class=sr-image src="[IMAGESRC]/convert?w=460&h=460&fit=max&quality=100"title=[NAME]></div><div class=sr-product-details><div class=sr-name>[NAME]</div><div class=sr-strapline>[STRAPLINE]</div><div class=sr-price>[CURRENCY][PRICE]</div><a class=sr-add-link href=[ADDTOCART] type=button><div class=sr-add><i class="fa fa-shopping-cart"></i> Buy Now</div></a></div></div></div>