Theme integration reference

Build a reliable product-media experience.

A practical guide for merchants, theme developers and support teams configuring zoom, Amazon-style Progressive 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

Essential setup videos

Set up Zoom correctly before testing.

These are the same short guides available in the app Overview. Follow both steps to activate Super Pinch & Zoom and prevent two image viewers from opening.

Video 1 · Required setup

Enable Image Zoom & Lightbox

Open Shopify App embeds, enable the required Zoom embed, and click Save. Sticky Add to Cart remains optional.

Video 2 · Theme compatibility

Disable the theme's default zoom

Turn off the theme's native image zoom or lightbox so shoppers see one clean, predictable product viewer.

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 Image Zoom & Lightbox.Open Online Store → Themes → Customize → App embeds, enable this required zoom embed and save. Sticky Add to Cart is a separate optional embed.
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.

Amazon-style Progressive 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.

Amazon-style 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 Amazon-style Progressive Zoom — desktop only

Amazon-style Progressive Zoom can be published selectively without changing the mobile experience. Open Zoom Setup → Optional Amazon-style Progressive 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 Amazon-style 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 Amazon-style 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.

Before / After Slider setup

The slider reads each product’s own image metafields; Zoom and the gallery stay separate.

Create Product metafields.Shopify Settings → Custom data → Products: create File (image) fields custom.spz_before_image and custom.spz_after_image.
Fill each product.Add its Before and After photos in Shopify Admin. Products without both fields show no slider.
Add the app block.Theme editor → product template → Add block → Apps → SPZ Before / After. Preview and save.

Basic comparison and Advanced styling have separate plan permissions. Advanced controls include shape, spacing, width, colors and starting position. Sync permissions after plan changes.