Recent Articles

Creating an image Gallery

March 25, 2015

A picture tells a thousand words, but the right one sells a thousand products. Display your images in a gallery to make sure you’re getting the most out of your Spiffy store. See examples of how your images could look below.

…which is almost exactly the same as inserting an image normally to make use of the built-in lightbox function. The difference is that we use the following CSS class on the image…

class="gallery"

rather than…

class="popup-image"

Creating a gallery

Image galleries come in handy if you want to display multiple images on a page. To create a gallery however isn’t easy, and even the smallest error in your code will make it display incorrectly. You’ll need complete concentration, and lots of testing to get it right. Follow the instructions in this tutorial to create your own image gallery in the Melbourne theme.

To create a gallery in your store, upload your images to the “Design & assets → Uploaded files” section of your store’s Toolbox. You then create or edit a page, and copy and paste the code below into the page where you want your gallery to appear.

Next, you replace your-image-name.jpg with the file name of your image (in both places!) and replace Enter your caption, or leave this blank (in both places!) with the caption that you want to appear underneath your image in the gallery view.

Save your page, and you should see your image displayed as a small square like the ones above.

You’ll need to continue this process for each image in your gallery, and then make sure that you remove any spaces between the code blocks… so that your block of code looks like the example at the top of this page.

If your gallery comes out looking something like this…

…it’s likely that you have errant spaces or carriage returns in your code. You should edit your code and remove any extra spaces between images.

About this theme

The Melbourne Ecommerce theme is a Spiffy Stores theme which dynamically adjusts for all screen sizes and devices. Your shop will look great... whether you're on a desktop, laptop, tablet or an iPhone.