> For the complete documentation index, see [llms.txt](https://docs.customer-photo-uploader.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.customer-photo-uploader.app/user-manual/app-pages/settings/legacy-themes-mode.md).

# Legacy Themes Mode

Run Customer Photo Uploader galleries and Instagram feeds on older Shopify themes: Legacy Theme Mode setup with code snippets and App Embed Blocks.

This page explains how to ensure Customer Photo Uploader galleries work correctly on older Shopify themes that do not support Online Store 2.0 (OS 2.0) features like App Theme Blocks. By using **Legacy Theme Mode**, you can still display customized galleries and your Instagram feed on your site using simple code snippets and **App Embed Blocks**.

### Main Configuration <a href="#main-configuration" id="main-configuration"></a>

Navigate to the [Settings page](https://docs.customer-photo-uploader.app/user-manual/~/revisions/9v7ePcmfNjvZqJ36WLM6/app-pages/settings) in the application, Legacy Theme Mode tab.

**Enable Legacy Theme Mode:** This toggle switch activates compatibility for older themes.

* **When On:** Standard **App Theme Blocks** are disabled, and global **App Embed Blocks** are activated. This mode allows you to manually place galleries using a code snippet.
* **When Off:** The app operates in standard OS 2.0 mode using App Theme Blocks.

{% hint style="info" %}
**Important Note:** If you enable this mode on a theme that supports OS 2.0 and already has active App Theme Blocks (Product Gallery, Custom Gallery, or Instagram Feed), those blocks will disappear from your storefront. A confirmation modal will appear to prevent accidental activation.
{% endhint %}

### Installation Steps <a href="#installation-steps" id="installation-steps"></a>

Setting up the Customer Photo Uploader gallery on a legacy theme involves a hybrid approach: inserting a small piece of code and configuring global blocks.

#### 1. Add Code Snippet <a href="#id-1.-add-code-snippet" id="id-1.-add-code-snippet"></a>

To tell the app where to display your gallery, you need to add a specific HTML tag to your theme's code or page content:

* **Code to copy for galleries (Product and Custom):** `<div id="gwa-cpu-gallery"></div>`
* **Code to copy for Instagram Feed:** `<div id="gwa-cpu-instafeed"></div>`
* **Where to place it:** Insert the tag into your Liquid files (e.g., `index.liquid`, `product.liquid`) or via the "Custom HTML" block in your page editor, exactly where you want the gallery or feed to appear.

#### 2. Enable Embed Blocks <a href="#id-2.-enable-embed-blocks" id="id-2.-enable-embed-blocks"></a>

Unlike standard blocks that you drag and drop, Legacy Mode uses global switches. Navigate to your **Shopify Theme Customizer** -> **App Embeds** and enable:

* **CPU - Product Gallery:** Controls settings for all galleries on product pages.

{% hint style="info" %}
Note: If you have already added `<div id="gwa-cpu-gallery"></div>` to your theme code, you will immediately see a preview of this block in the Theme Customizer on the corresponding page.
{% endhint %}

* **CPU - Custom Gallery:** Controls settings for all other galleries (Home page, About Us, etc.).
* **CPU - Instagram Feed:** Controls settings for all Instagram feeds placed via Legacy Theme Mode.

#### 3. Theme Scanning & Mapping <a href="#id-3.-theme-scanning-and-mapping" id="id-3.-theme-scanning-and-mapping"></a>

Once the code is inserted, you need to link specific templates to your galleries.

**Scan Theme:** Click this button to let the app automatically search your `.liquid` files for the gallery and Instagram Feed tags. If found, the app will automatically create a connection (e.g., linking your Home page template to your Home gallery or your first Instagram feed).

<div align="left"><figure><img src="https://3902981528-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FovhRTPVfyGDO7Ql07QPK%2Fuploads%2FBEkUR3J8flAu67qHjVAL%2Finstagram-feed-shopify-app-legacy-template-mappings.webp?alt=media&amp;token=c137f63c-934b-475d-9a04-7f553f4182f6" alt="Manage Mappings table with Type and Assignment columns for galleries and Instagram feeds"><figcaption></figcaption></figure></div>

**Manage Mappings:** This table shows all active connections between your theme templates and CPU content. Each mapping has a **Type** (Gallery or InstaFeed) and an **Assignment**: the specific gallery or Instagram feed displayed in that template.

* **Automatic Mappings:** Results found by the "Scan Theme" tool.
* **Manual Mappings:** If you added the code via the Shopify Admin (Custom HTML blocks) or if the scanner missed it, use the **"Add Mapping"** button to manually select a Template, the Type, and the corresponding gallery or feed.

### Block Settings <a href="#block-settings" id="block-settings"></a>

Since Embed Blocks act as global switches, the settings you configure within the Theme Customizer (layout, colors, text) will apply to **all** galleries of that type across your store.

* **Product Gallery Settings:** Apply to the gallery of the currently viewed product.
* **Custom Gallery Settings:** Apply to specific galleries mapped to non-product templates.
* **Instagram Feed Settings:** Apply to the Instagram feeds mapped to your templates.

### FAQ about Legacy Theme Mode <a href="#faq-about-legacy-theme-mode" id="faq-about-legacy-theme-mode"></a>

<details>

<summary>Will enabling Legacy Mode slow down my store?</summary>

No. We use a lightweight JavaScript "injection" method. The script only runs after your main page content has loaded, ensuring that your customers' experience remains fast and stable.

</details>

<details>

<summary>I’ve added the code and enabled the block, but the gallery is still not appearing. What’s wrong?</summary>

Please check the following:

1. Is the **Enable Legacy Theme Mode** toggle switched **ON** in the app settings?
2. Is the corresponding **App Embed Block** (Product or Custom) toggled **ON** in your Shopify Theme Customizer?
3. Is the ID in your code snippet exactly `<div id="gwa-cpu-gallery"></div>` for galleries or `<div id="gwa-cpu-instafeed"></div>` for the Instagram feed? Even a small typo will prevent the content from loading.
4. Or reach out to our Support Team at <support@customer-photo-uploader.app> for personal assistance with the application setup.

</details>

<details>

<summary>What happens to the code if I uninstall the app?</summary>

The `<div>` tag you added will remain in your theme code, but it will be empty and invisible to your customers. You can safely remove it from your liquid files at any time.

</details>

&#x20;