> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://essential-grid.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Replace your product image Gallery with Essential Grid Gallery

## **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**.
![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1a77ch9.png =900x323)


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_c2rnh7.png =900x386)


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1r60z4m.png =900x459)




# **Step 3: Add the Gallery to Your Shopify Theme**
1. In Shopify Admin, navigate to:
**Online Store → Themes**
2. Click **Edit Theme** beside your active theme.
3. 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.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_tjw6qg.png)


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_3uzih0.png =900x398)



# **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_18lmuyk.png =900x337)


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_7edhad.png =450x944)



# **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**
## **Static Gallery**
1. Open the **Source** tab.
2. Select **Dynamic (Products, Collections, Blogs)**.
3. Choose the desired collection or category.


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1tp7xag.png)


![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1dxl6md.png =500x645)


# **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.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/1/e/1/f1e1cc0327ff9000/image_1c7zriu.png)

# **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