Quick answer
360° on OpenCart 3/4: publish in Studio (name = Model, Active) → paste widget.js in Design → Theme Editor → product/product.twig → data-key + data-sku Manual (AUTO only if JSON-LD sku exists). Lazy load and modal. Refresh theme cache. Test a live PDP, not Admin preview.
OpenCart galleries flip still photos. Shoppers still cannot turn the item. You can add a photographed 360° spin without an OpenCart module: host frames in Spinnify and paste one script.
This guide is for OpenCart 3 and 4 (Twig Theme Editor). OpenCart 1.5 and 2.x use .tpl files. The same widget.js snippet works on a product page. You do not install an OpenCart extension from Spinnify.
3 steps from photos to a live OpenCart page
The work is the embed: one script on the product detail page, then a match to the catalog Model (the usual SKU field).
1. Prepare in Spinnify Studio
Before you open OpenCart Admin:
- Sign up for Spinnify Studio.
- Create a product and upload a photo series (24–36 frames, 4:3 for PC photos).
- Important: the Studio product name must equal the OpenCart Model field (spaces and hyphens matter; case does not).
- Keep the product Active. A hidden product will not show the button.
2. Add code on OpenCart
Two ways to paste the same Studio snippet. Copy it from Widget installation → Show code.
Method A: Theme Editor (best for product pages). Design → Theme Editor → product/product.twig (OpenCart 4: catalog/view/template/product/product.twig). Paste the script near the gallery, save, then refresh theme cache. Theme Editor stores a database override, not the file on disk. Prefer Manual data-sku equal to the Model, or data-sku="{{ product.model }}" in Twig. If product.model is empty, hardcode the Studio name.
Method B: common/header.twig plus AUTO (only if JSON-LD sku exists). This loads the script on every page, so skip it unless the theme already prints Schema.org Product JSON-LD with sku. Prefer the product template.
3. Configure the binding
The code looks like: <script src="https://www.spinnify.io/widget.js" data-key="YOUR_WIDGET_KEY" data-sku="SKU_FROM_PANEL" defer></script>
- data-key: your Studio widget key. Do not change it.
- data-sku: the OpenCart Model (Manual). AUTO only if JSON-LD sku exists, or URL if you saved the page path in Studio.
Why it stays fast
A third-party script on OpenCart raises PageSpeed questions because the product template already ships a gallery and theme JS. Spinnify keeps the extra work off first paint: frames stay on the CDN until someone asks to spin. The OpenCart gallery still renders first; the 360 layer opens in a modal after the click.
- Lazy loading: the browser does not fetch the frame set until the shopper clicks.
- Isolation: the viewer opens in a modal and does not replace the OpenCart gallery on first paint.
- CDN: frames are resized WebP/AVIF, not extra files in OpenCart image storage.
Checklist: button not showing?
If the 3D View button is missing, walk this list on a live product URL, not in admin preview.
- Did you refresh theme cache? Admin dashboard gear: disable or refresh theme cache. Extensions → Modifications → Refresh if OCMod is in play. Journal has its own cache.
- Are you on a live product URL? Admin preview is a poor test for storefront scripts.
- Theme Editor vs file: Theme Editor wins over FTP. If you edited product.twig on disk and nothing changed, close the Theme Editor override or clear cache.
- Do names match? Studio product name and OpenCart Model must match (spaces and hyphens included).
- Is the Studio product Active?
- Is data-key copied from your account?
- One script per page: do not paste the snippet twice, and do not put it in header.twig unless you accepted AUTO on every page.
Can I customize the button look?
Yes. Style the launcher in Studio, not in theme CSS. You can match the storefront without editing the product template:
- Position: right, left, or center.
- Colors and label to match the OpenCart theme.
- Format: round floating icon or slim tab.
After that, OpenCart still serves the gallery. The 360° layer opens when someone asks for it.
Shoot spins: DIY smartphone guide. Other HTML stores: Tilda Zero Block. Full Spinnify guide.
