Theme integration reference

Build a reliable product-media experience.

A practical guide for merchants, theme developers and support teams configuring zoom, Progressive Product Zoom, Sticky Cart and Gallery Page.

Start integration Open demo store (password: 1)

Product zoom, lightbox, video, galleries and sticky cart across devices — Zoom, explore, watch and shop across desktop and mobile screens.

App embedOne theme-editor switchResponsive fallbackDesktop progressive, mobile SmartRich mediaImages, variants and videoPlan awareFeatures follow your current plan

Product walkthrough

See the complete storefront experience.

Watch image zoom, mobile interactions, Sticky Cart and Gallery Page working together in a real product journey.

Storefront setup checklist

Enable the app embed.Open Online Store → Themes → Customize → App embeds, enable Super Pinch & Zoom and save.
Save Zoom Setup.Choose the viewer behavior and publish settings from the app before testing the storefront.
Test the active theme.Use a product with several high-resolution images, one variant and a video when available.
Check desktop and touch.Verify click, wheel, pinch, arrows, thumbnails, close and full-screen controls at common screen sizes.

Choose the correct zoom journey

Smart Lightbox

The responsive default for desktop, tablet and mobile. It supports gallery navigation, touch gestures and product video.

Progressive Product Zoom

An optional desktop-only flow: hover lens → product popup → second-click deep zoom. Target all products, a Shopify tag or selected product IDs.

Mobile fallback

Phones and tablets automatically use Smart Lightbox so tap, swipe and pinch remain predictable on touch screens.

Progressive Zoom availability follows the feature permissions configured for each plan in the app admin. Do not hard-code plan names in theme code.

Optional Progressive Product Zoom — desktop only

Progressive Zoom can be published selectively without changing the mobile experience. Open Zoom Setup → Optional Progressive Product Zoom, enable it, then choose an Apply to rule.

All products

Use the desktop progressive journey across the full catalog. Best when product images and product-page markup are consistent.

Products with Shopify tag

Enter one exact Shopify product tag, such as progressive-zoom. Add that tag to every product that should use Progressive Zoom.

Selected product IDs

Enter the Shopify numeric product IDs shown in the product admin URLs. Use this for a controlled collection of individual products.

Choose the target rule.
Enter the tag or IDs when requested.
Save Zoom Setup.
Test one matching and one non-matching product.

Targeted products use Progressive Zoom only on supported desktop pointers. Mobile, tablet and non-targeted products continue using Smart Lightbox.

Transformation controls

The master switch controls which image tools shoppers can use inside supported viewers. Enable only the tools that improve inspection for your catalog.

Zoom in / outIncremental image magnification.Actual sizeReturn the image to its natural 1:1 view.Rotate left / rightInspect products whose orientation matters.Flip horizontal / verticalMirror the image in either direction.Reset imageRestore zoom, rotation, flip and position.

Turn off the master switch to remove transformation tools together. Available controls follow the current plan and viewer type.

Advanced storefront controls

Use these settings to keep the lightbox consistent with the storefront design while preserving clear, touch-friendly controls.

Thumbnail layoutFilmstrip, arrow carousel or compact grid.Toolbar controlsFull toolbar, zoom-only controls or hidden.Toolbar positionTop-center or floating over the image.Control paletteIcon, background and hover colors.Viewer backgroundSolid or optional alpha-transparent color.Zoom triggerButton radius, colors and hover-magnifier color.

Keep strong contrast between icons and their backgrounds. Always preview toolbar alignment on both desktop and mobile before publishing.

Sticky Cart setup

Sticky Cart keeps the purchase action visible after the main product form scrolls out of view and follows the currently selected product state.

Open Sticky Cart.Use the app navigation and enable the bar for the storefront.
Match the product form.Confirm image, title, price, availability and selected variant update together.
Choose controls.Enable variant selectors and quantity controls only when your current plan provides them.
Style and test.Set colors, button style and position, then test add-to-cart on desktop and mobile.

The Sticky Cart should use the store's normal cart flow. Test products with unavailable variants, sale prices and multiple options before publishing.

Gallery Page setup

Create a visual discovery page with Shopify-hosted images, responsive layouts, lightbox viewing and optional product tags.

Add gallery media.Select clear, optimized images with consistent crop and quality.
Choose a layout.Use the standard grid for consistency or unlocked masonry and featured layouts for editorial presentation.
Tag products.Connect each shoppable image to the intended product and verify the destination.
Publish and inspect.Test image order, responsive spacing, lightbox navigation and product links.

Keep important subjects away from image edges so responsive cropping does not hide product details. Feature availability follows the current plan.

Theme compatibility without conflicts

The automatic media detector supports modern Online Store 2.0 themes. Customized product galleries may need a manual product-media selector.

Recommended

Disable the theme's native zoom when two viewers open.
Keep product images in semantic image or media containers.
Test variant changes before and after opening the viewer.
Use store-specific CSS only for genuine theme exceptions.

Avoid

Binding another click-to-close handler to product images.
Replacing app-owned storefront configuration manually.
Loading two releases of the extension JavaScript.
Testing only inside the theme editor preview.

Fast diagnostics

Viewer does not open

Confirm the app embed is enabled on the published theme, Zoom Setup is enabled, the plan grants the selected feature and the product media is detectable.

Two viewers open

Disable the theme's built-in zoom or lightbox, then retest in a private window.

Desktop works but mobile does not

Verify touch-action rules are not overridden by theme CSS and confirm the Smart Lightbox mobile fallback is enabled.

Saved settings are not visible

Confirm the settings request completed, the existing storefront configuration was published and cached assets have refreshed.

Need theme-specific help?

Send the store URL, theme name, product-page link and a short screen recording.

Contact support