How To Create A Simple Gallery For Your Shopify Site
There will be 3 stages to creating our gallery:
- creating the gallery page
- adding individual pages for each image in our gallery
- link gallery images to the individual image pages
Creating the gallery page
1) Create a new page in your Shopify admin. Go to Online Store, Pages and click the Add Page button.
2) In your page enter the title for your page (eg Gallery)
3) Insert images into your page to create your gallery. Make sure the images are all the same size and shape otherwise your gallery images won't be nicely aligned. Make sure you insert them directly next to each other and don't worry if they wrap onto other lines. Don't change any alignment or padding settings for the images.
If you need a tool to resize/crop your images have a look at our article: Best online image editing tools
4) At the moment your gallery will be left aligned, you'll probably want to make it center aligned. To do this on your page click the Show HTMl button.
Add the following html tag to the start of your code: <div style="text-align: center;">
Add the following html tag to the end of your code: </div>
So you should have something like this:
<div style="text-align: center;">
<img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250" alt="" />
<img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250" alt="" />
<img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250" alt="" />
<img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250" alt="" />
<img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250" alt="" />
<img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250" alt="" />
</div>
5) Click save and view your page
Adding individual pages for each image in our gallery
1) Create a new page in your Shopify admin. Go to Online Store, Pages and click the Add Page button.
2) In your page enter the title for your page (eg a description of the gallery image)
3) Add one of the gallery images to your page and optional descriptive text and also center your image. Top Tip: you may like to use a full size version of your image here.
4) Click save and view your page
5) Repeat this process for each of your gallery images
Link gallery images to the individual image pages
1) For each of your individual gallery pages, take note of the page url so you can link the main gallery image to it. To do this view each of your individual gallery pages and copy the last part of the url to notepad or write them down, for example: /pages/ut-nonummy-consequat-minim-feugiat-hendrerit
2) Open your main gallery page, click an image to select it, then click the insert link icon on the toolbar.
3) Enter your partial url, and click insert link.
4) Repeat this process for each of your main gallery images.
5) Click save and view your page - now when you click your gallery image it will take you to its individual gallery page.