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.
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>
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.
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:
The name of the product
The product strapline (also known as tagline or slogan)
The full product description (rendered in HTML)
The product price
The currency currently chosen
The unique identifier of the product that can be used in a URL which links to a dedicated product page
The full image URL of the product hero image
Will output all meta assigned to your products
Date when product was created in Shoprocket
External product code
Amount of times the product has been viewed
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 -->
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.
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>