Legacy Themes Mode

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 on your site using a simple code snippet and App Embed Blocks.

Main Configuration

Navigate to the Settings page 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.

Important Note: If you enable this mode on a theme that supports OS 2.0 and already has active App Theme Blocks, those blocks will disappear from your storefront. A confirmation modal will appear to prevent accidental activation.

Installation Steps

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

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: <div id="gwa-cpu-gallery"></div>

• Where to place it: Insert this 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 to appear.

2. Enable Embed Blocks

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.

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.

• CPU - Custom Gallery: Controls settings for all other galleries (Home page, About Us, etc.).

3. Theme Scanning & Mapping

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 tag. If found, the app will automatically create a connection (e.g., linking your Home page template to your Home gallery).

Manage Mappings: This table shows all active connections between your theme templates and CPU galleries.

• 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 and the corresponding Gallery.

Block Settings

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.

FAQ about Legacy Theme Mode

Will enabling Legacy Mode slow down my store?

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.

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

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>? Even a small typo will prevent the gallery from loading.

4. Or reach out to our Support Team at [email protected] for personal assistance with the application setup.

What happens to the code if I uninstall the app?

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.