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

Adding Product Images

How to Upload Images to Your Shoprocket Products

Adding images to your products is as simple as drag and drop.

Log in to your Shoprocket dashboard and click on the "Products" tab:

Then click on the edit icon for the product you want to add images to.

Once in your edit product view, click on the "Images" tab. Now you can drag and drop your product images into the image panel: (You can also click the upload panel to open a web dialogue box and select files from your computer, Google Drive, Box, Facebook etc.)

Once you have uploaded your file, you can dictate which of them is the "hero" image, this will be the main image we use inside your "sr-block" when listing products in your page. The other images will be available within your single product pages.

I've uploaded my images, how do I show them on my site?

Default Image Placeholder

If you do not add an image to a product, but have the [IMAGESRC] tag in your sr-block, we will display a default image holder like this:

You can also set your own default image by adding this line of code to your page template, ideally in the footer, along with your Shoprocket sr.js code snippet:

<input type="hidden" id="sr-defaultimage" value="URL to your image">

Be sure to add the URL to your image in the "value" attribute. When the above code is present on your page, we will use the image defined as the placeholder for any products which do not have an image.

This will apply to images in "sr-block", "sr-related" and also single product pages.

Adding Product Images

How to Upload Images to Your Shoprocket Products