# Essential Grid Gallery

{% embed url="<https://www.youtube.com/watch?index=3&list=PLNJhkdJsVUFGbmtaVUvKufB8AFumQK4gW&v=QP50HOH9PkI>" %}

## What is Essential Grid Gallery app?

Elevate your Shopify store’s visual experience with Essential Grid — built for merchants who value perfection and flexibility. From stunning product portfolios and lifestyle lookbooks to engaging video showcases, Essential Grid helps you present your content seamlessly while staying true to your brand identity.

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fl6Kb1Q8fXwVI5jFsBe7I%2Fimage.png?alt=media&#x26;token=29dcd920-c521-409b-98ab-3c07d3564969" alt=""><figcaption></figcaption></figure>

**What you can do with Essential Grid Gallery:**

* Multi-Source Content: Pull content directly from Shopify Products, Collections, Instagram, YouTube, Vimeo, or manual uploads.
* 50+ Premium Templates: Access a massive library of pre-made templates to launch professional galleries in minutes.
* Visual Drag-and-Drop Editor: Customize every detail—from hover effects and Masonry layouts to skin colors—without writing a single line of code.
* Mobile-First Optimization: Fully responsive designs that ensure your gallery looks stunning on smartphones, tablets, and desktops.
* Powerful Animations: Dozens of entrance and transition animations to capture customer attention instantly.

## How to use Essential Grid Gallery in Foxify Smart Page Builder

### Install Essential Grid Gallery from the Shopify App Store <a href="#install-lookfy-lookbook-image-gallery-from-the-shopify-app-store" id="install-lookfy-lookbook-image-gallery-from-the-shopify-app-store"></a>

{% hint style="info" %}
Before using the app widget in Foxify, you need to install the app in your Shopify store and configure its settings. If you’re new to this app, check [its documentation](https://www.essential-grid.com/help-center/) to understand how it works.
{% endhint %}

{% hint style="success" %}
Steps:

1. Log in to the Shopify App Store.
2. Find the [Essential Grid Gallery app](https://apps.shopify.com/essential-grid-gallery) and click **Install**.
3. In your Shopify admin, to authorize the use of the app, click **Install.**

After the app is installed, you can view and use it from the **Apps** page in your Shopify admin.
{% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FGJoKSB0eFnsaxkY1A8YS%2Fimage.png?alt=media&#x26;token=ce6b40da-267e-421c-b7e4-a8367d777c2e" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Here’s how you can insert **Essential Grid Gallery** inside your templates.
{% endhint %}

### Set up Essential Grid Gallery with Foxify <a href="#set-up-lookfy-lookbook-image-gallery-with-foxify" id="set-up-lookfy-lookbook-image-gallery-with-foxify"></a>

Essential Grid Gallery has been integrated as a built-in extension in Foxify Smart Pagebuilder, so all you need to do is:

{% hint style="success" %}
Steps:

1. In your **Foxify dashboard**, open a page (or create a new one) in which you want to embed **Essential Grid Gallery** feature.
2. On the left sidebar, select **Apps Market**, or press \[A].
3. **Filter for Author: Partner**, look for **Essential Grid Gallery.**
4. Choose **Install extension.**
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FLROKQZ65kGqIuncpCMxS%2Fimage.png?alt=media&#x26;token=8eb9da2e-c039-4e92-911d-a57cef25e846" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FEI9qkUQO1RfXra9VkM3l%2Fimage.png?alt=media&#x26;token=5b968c76-3953-407d-9a6d-9d38291928b3" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Once you see a green **checkmark** next to Essential Grid Gallery, it means Essential Grid Gallery has been activated and is now ready to be featured.

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fyz7iwSXwDKJrWjn3wf0e%2Fimage.png?alt=media\&token=a4e439e1-eb39-4a58-a7ad-68f30984c369)
{% endhint %}

### Set up Essential Grid Gallery's widget <a href="#set-up-lookfy-lookbook-image-gallerys-widget" id="set-up-lookfy-lookbook-image-gallerys-widget"></a>

{% hint style="success" %}
Steps:

1. In **Pages manager**, open the page you want to add the app features to. Select **Add element > App blocks.**
2. Select the Essential Grid Gallery's widget from the **Installed apps** list, and drag the app widget you want to feature on your page.
3. Enter the Gallery ID.
4. Adjust the element's sizing if needed.
5. **Save** the changes and go to the preview page or live page to see the app widget.
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F295BrL2OHTVXWL3o76jT%2Fimage.png?alt=media&#x26;token=6fd175d7-c036-4b6d-befd-fd8d14dec6fd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F6XOBgne3UcMUA0bVDrWY%2Fimage.png?alt=media&#x26;token=07fef470-5916-452c-88b1-9cea85f30fbe" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FWrM6eG4pjBHXAZIU6fsz%2Fimage.png?alt=media&#x26;token=31fab65d-9c3f-4ede-8140-744139037044" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FxwcFEz369HNNEkKZdgTa%2Fimage.png?alt=media&#x26;token=0b1cfe86-d748-444f-8a8b-6be02fc2e968" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Click here to learn **How to use margins, padding, and constraints**: [constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints "mention")
{% endhint %}