How to Add A Gallery Page to Your Shopify Store without the App

 

Here’s a step-by-step guide to add a gallery page to your Shopify site using code. 

Wondering how to showcase products on your Shopify site, a great idea is to create a gallery page or lookbook on your Shopify site. Customers can now browse through products on your Shopify store using this gallery page. These product image galleries can be embedded with images, videos, and other media types for customers to find out all they need to about your products.  

Here’s how to add a gallery page on your Shopify site using code for free.

Create Shopify Gallery Page Using Code

Step 1: Starting

The first thing to know is that Shopify provides us a simple form, and we will use it. Then, we will try to explain to you how to add your own fields. We always recommend making a copy of your theme where you will work on. Once you are in your admin panel, you have to go to Online stores, and in the theme where you want this new feature, click on Actions, and then click Duplicate. When you are done with this part, you can start to develop.

Step 2: Duplicating page.template

We will need a new template to be added to our files. Click Actions, and then Edit code. In your left sidebar under the template, a new popup will appear, click on add a new template. 

Select the page option, and then add a page title, for example, gallery.

In the new file that we created, we have to add some customizations. First, we will need a wrapper (this wrapper will be used to remove the lines or to add the style to our table component) and, we have to add the next line just above the line that says {{ page.content }}

 <div id="gallery-page"> 

And just below {{ page.content }} line add this:

 </div> 

Ok, the wrapper was added and now we have to change the page width. For doing that, we can just change the top where you read “page-width” by “full-width”. We will add some css to edit this class.

Step 3:Adding styles

Now, it's time to add some styles to our new template. For making that, we can create a new css file, or we can just copy the next code at the very bottom of style.scss file under the assets directory. But, if you want to create a new file, you need to go under the assets directory and click on add a new asset. Then select create a blank file, and fill the name. For example “devst-style” and the extension should be scss. Then paste the code in the file that you wanted (the old or the new one)

#gallery-page td {
border: 0;
}

.full-width {
width: 80%;
margin: auto;
}

if you want to create a new one:

 width the first css style  
 #gallery-page td { 
  border: 0;  
 } 

we are removing the borders from our table. If you want a border, you can play with that line, for example

changing 0 by  “2px solid black;”
.full-width {
  width: 80%;
margin: auto;
}

The second part is to select the width of your gallery. You can also, play with that line to find width that you want it there.

Step  4: creating our page

In our admin panel in Shopify, go to the online stores, and then go to pages. Here you need to click on Add page in the right top side and fill the fields with the title of your new page. In the content part, you should click add a table, then you can add the columns and rows that you want. This will be reflected in your gallery. Once the table is created, you have to add the images inside of each cell. For doing that, click where you want the image to be, then use the button that we have in our rich text options, to add the image that you want. Once we added each image, we have to select the new template for this page. On your right side, you will see the option to select a template. In the dropdown menu select a template that we created before, then click Save.

NOTE: it is important to know that if you don't make your theme live, you wouldn't see your new template!

Step 5: testing

Now, it's time to check what we did. For doing that open the page in a new tab, and see your new gallery page.

Shopify Gallery Page

Creating a product gallery page for your Shopify store gives customers a visual image of what your products look like and, in some cases, how they can be used. 

This guide would help you with designing a gallery page for products on your Shopify store. Leave us a comment with any questions you might have.