Articles on: Product

How to use Essential Grid Gallery for the product image

Overview

This guide explains how to create, configure, and publish an Essential Grid Gallery in Shopify. It covers creating a gallery, selecting content sources, customizing the layout, embedding the gallery into your Shopify theme, and verifying the final result.


Step 1: Open the App Dashboard

  1. Log in to your Shopify Admin.
  2. Navigate to Apps.
  3. Open Essential Grid Gallery.


Step 2: Create a New Gallery

  1. Click Use a Template or Create New Grid.
  2. Choose the gallery type you want to use.
  3. Choose a gallery template that fits your needs.
  4. Click Install.









Step 3: Add the Gallery to Your Shopify Theme

  1. In Shopify Admin, navigate to:

Online Store → Themes

  1. Click Edit Theme beside your active theme.
  2. Select the product template where you want to display the gallery.


Step 4: Insert the Essential Grid Gallery App Block

  1. Click Add Section or Add Block.
  2. Open the Apps category.
  3. Select Essential Product Media.

In the app block settings:

  • Enter the Gallery ID.
  • Enable Replace Theme Product Media if you want to replace the default product images.

Click Save to publish the changes.








Step 5: Optional Custom Placement

Some of the theme might now work with just enabling the switch of the option.
In that please follow the following steps,

  1. Locate the target CSS selector or container product image gallery.
  2. Enter the selector in the Target Selector or Element Class field.
  3. Verify that the gallery is positioned correctly within the page layout.







Step 6: Verify the Gallery

After publishing, confirm the gallery works correctly by checking:

  • Gallery loads successfully.
  • Images display correctly.
  • Responsive layout on desktop, tablet, and mobile.
  • Product links open the correct pages.
  • Hover effects and animations work as expected.
  • Overall page performance remains smooth.


Deployment Checklist

Before going live, confirm the following:

  • ✓ Gallery created
  • ✓ Content source configured
  • ✓ Layout customized
  • ✓ Gallery saved
  • ✓ Gallery ID recorded
  • ✓ App block added to the theme
  • ✓ Gallery ID entered
  • ✓ Theme saved
  • ✓ Desktop tested
  • ✓ Mobile tested
  • ✓ Gallery functioning correctly




If you want to create the gallery from scratch with different template.

Then you have to follow these 2 extra steps


Step 1: Configure the Gallery Content

  1. Open the Source tab.
  2. Select Dynamic (Products, Collections, Blogs).
  3. Choose the desired collection or category.







Step 2: Configure the Gallery Layout

  1. Open the Settings panel.
  2. Select Columns.
  3. Configure the column layout for each device.

Recommended settings:

  • Desktop: 2–4 columns
  • Mobile: 1–2 columns

After configuring the layout:

  1. Review the live preview.
  2. Click Save.
  3. Note the generated Gallery ID, which will be required when adding the gallery to your Shopify theme.



Summary

The Essential Grid Gallery app enables you to create flexible image and product galleries that integrate seamlessly with Shopify themes. By following this guide, you can:

  • Create new galleries
  • Display static or dynamic content
  • Customize responsive layouts
  • Embed galleries into Shopify themes
  • Validate the gallery before publishing

Updated on: 30/07/2026