Articles on: photo/portfolio gallery

How to Create a Filterable Photo Gallery in Shopify

Create a beautiful filterable photo gallery on your Shopify store using Essential Grid Gallery. This guide walks you through importing a ready-made template, replacing demo content, adding custom links, and creating your own gallery filters.  


What You’ll Build

By the end of this tutorial, you’ll have:

  • A filterable photo gallery on your Shopify homepage
  • Custom gallery images
  • Custom button text and image titles
  • Clickable gallery items linking to collections or products
  • Custom category filters for visitors to browse content easily




Step 1: Open Essential Grid Gallery

From your Shopify Admin:
Apps → Essential Grid Gallery
This will open the Essential Grid Gallery dashboard where you can create and manage galleries.  




Step 2: Import a Filterable Gallery Template

Instead of building a gallery from scratch, start with a pre-designed filterable template.

  1. Click Create Grid From Template.
  2. Browse the available templates.
  3. Select a filterable gallery template.
  4. Click Install Add-ons.

The template will be imported into your gallery list.  





Step 3: Open the Imported Gallery

After the template is imported:

  1. Open the newly imported gallery.
  2. Add the images for the gallery
  3. Review the gallery settings.
  4. Copy the Gallery ID.
  5. Click Save Grid.

Saving ensures all imported settings are stored correctly before publishing.  







Step 4: Add the Gallery to Your Homepage

Next, display the gallery on your Shopify storefront.

  1. Go to Online Store → Themes.
  2. Click Customize.
  3. Select the page where you want the gallery displayed.
  4. Click Add Section.
  5. Open the Apps tab.
  6. Choose Grid Gallery.
  7. Paste the copied Gallery ID.

The gallery will immediately appear in the theme preview.  







Step 5: Preview the Gallery

After connecting the gallery:

  1. Save the theme.
  2. Preview your storefront.

You should now see the imported filterable gallery displayed on your homepage.  




Step 6: Replace Demo Images

Now replace the template images with your own content.

  1. Return to Essential Grid Gallery.
  2. Open the gallery editor.
  3. Click Edit Element on the image you want to update.
  4. Click Change Image.
  5. Upload your image.

This allows you to customize the gallery with your own branding and products.  





Step 7: Update Button Text and Image Title

You can customize the content shown on each gallery item.

  1. Open Edit Element.
  2. Navigate to the Item Data tab.
  3. Update the button text.
  4. Edit the image title.
  5. Click Update and Refresh Grid.

The gallery will refresh with your new content.  



Step 8: Add Custom Links to Gallery Items

Make gallery images clickable by linking them to products, collections, pages, or external URLs.

  1. Open Edit Element.
  2. Locate the custom link field.
  3. Copy the destination URL.
  4. Paste the URL into the link field.
  5. Save your changes.

For example, you can link an image directly to a product collection page.  




Step 9: Save the Gallery

After updating images, text, and links:

  1. Click Save Grid.

Your gallery changes will be stored and available on the storefront.  



Step 10: Create a Custom Filter

Filters help visitors quickly browse related gallery items.

  1. Open Edit Element.
  2. Navigate to Item Settings.
  3. Click Add New Filter.
  4. Enter a filter name.
  5. Click Add Category.
  6. Assign the filter to the current image.
  7. Click Update and Refresh Grid.

Example filter:

Shoes

The selected image will now belong to that category.  






Step 11: Enable the Filter

After creating a filter, you must enable it within the gallery settings.

  1. Open the Nav-Filter-Sort tab.
  2. Scroll to Available Grid Filters.
  3. Locate your newly created filter.
  4. Enable it using the checkbox.
  5. Drag and drop filters to reorder them if needed.
  6. Save the gallery.

This controls which filters appear on the storefront.  

Screenshot

Screenshot 23: Navigation Filter Sort tab.







Step 12: Test the Gallery


Open your storefront preview and verify:

  • The gallery loads correctly.
  • Images display properly.
  • Custom links open the correct page.
  • Filters appear above the gallery.
  • Clicking a filter shows matching gallery items.

Your filterable photo gallery is now fully functional.  


**Note: **Assign at least one gallery item to each filter. Filters will only appear in the filter bar or dropdown when they are associated with one or more gallery items. Filters that are not assigned to any gallery items will not be displayed on the frontend.






Result

You have successfully created a filterable photo gallery using Essential Grid Gallery. Visitors can browse images by category, click gallery items to visit collections or products, and enjoy a more engaging shopping experience.  

Tips

  • Use high-quality images for the best visual results.
  • Keep filter names short and descriptive.
  • Link gallery items to relevant products or collections.
  • Arrange filters in a logical order for easier navigation.
  • Regularly update gallery content to keep your store fresh.

Updated on: 25/06/2026