Storefronts

Each BigCommerce storefront (channel) has its own 3D settings. Changes reach your storefront within a few minutes.

Your storefronts

Storefronts shows one card per storefront channel of your BigCommerce store, with one status:

Under the name you see the platform (“Stencil · {theme} theme”). For a storefront with 3D on, the card also shows Shows 3D (where it appears), Fits your theme (for example Automatically), Script (Added for you or Added by hand) and Storefront (Up to date, or Updating… while your latest change is on its way). Its buttons are Test on storefront and Settings.

Turn on 3D

On a storefront that is Off, click Turn on 3D. The app uses the recommended settings: 3D in the image gallery, the layout picked for your theme, and its storefront script added for you. You’ll see “Saved. {storefront} updates within a few minutes.”

3D only appears on products you have published with 3D. Product pages without 3D are left as they are.

Settings

Click Settings on a storefront card to open its settings panel. Click Save to apply, or Cancel.

Show 3D on this storefront

Switch it off to hide 3D everywhere on that storefront. Product settings are kept, so switching it back on restores everything. After saving, the message “3D is off on {storefront}.” offers Undo.

Where 3D appears

In every mode, the product page first loads with your normal images. The 3D model only loads when a shopper opens it, so pages stay fast and only real 3D views count toward your plan.

How 3D fits your theme

When a theme is set up, the panel shows the automatic choice as “Automatic (recommended for {theme})”.

Button labels

Change the words on the storefront buttons, or leave a field empty to use the default:

• 3D button: the label of the button that opens 3D (default View in 3D).
• AR button: the label of the AR button on phones and tablets (default View in AR).

On a computer, the AR button that shows the QR code reads View in your space.

Installation

• The script was added for you. For up to 10 storefronts, the app adds its storefront script through BigCommerce itself. Nothing to do. The Check it link opens your storefront with the installation check.
• Add the snippet by hand (from the 11th storefront on), see below.

Add the snippet by hand

BigCommerce lets an app add its script to 10 storefronts. For the 11th storefront and beyond, the panel shows a snippet instead:

1. Click Copy next to the snippet.
2. In BigCommerce, open Storefront › Script Manager for that storefront and create a script: placement Footer, location All pages, and paste the snippet.
3. Back in the app, click Check installation. It shows “Found · {time}” when the snippet is on the storefront, or “Not found yet · checked {time}”. Until it’s found, the card shows Not installed.

If you uninstall the app later, remove this snippet from Script Manager.

Custom selectors

Use custom selectors only if your theme isn’t recognized automatically and you want 3D on the main image instead of the pop-up button.

1. In Settings, open Advanced: custom selectors (or choose Custom selectors (advanced) under How 3D fits your theme).
2. Enter the Main image selector and the Thumbnail list selector: CSS selectors for your theme’s main product image container and its thumbnail list. Each must match exactly one element on the product page.
3. Click Save.
4. Open a product page with 3D and add ?p3d-debug=1 to its address (see Installation check). With custom selectors, the overlay shows a checklist. Check on the page that:
   • zoom does not open when you drag the 3D model;
   • the lightbox does not open on click;
   • swiping the gallery does not move the 3D model.
5. Back in the panel, under Check the custom selectors, click I checked the overlay: the 3D model shows in the gallery. It then shows Confirmed. Changing the selectors later needs a new check.

With custom selectors, a 3D badge appears on the main image and 3D opens in a pop-up. If a selector matches nothing (or more than one element), the app falls back to the pop-up button. If you’re not sure which selectors to use, contact us.

Installation check (?p3d-debug=1)

Open a product page that has a published 3D model and add ?p3d-debug=1 to its address, for example https://your-store.com/oak-chair/?p3d-debug=1 (use &p3d-debug=1 if the address already has a ?). A small dark overlay appears in the bottom-right corner with what the app detected:

• the first line, Product 3D & AR, shows mounted when 3D is set up on the page, or no-op with a reason;
• adapter: how the app fitted your theme (cornerstone, papathemes, generic-selectors or modal);
• selection and appearance: the options chosen and the model shown;
• AR: which AR this device gets (quick-look, scene-viewer, webxr, qr or -).

Open my storefront in the setup guide and Check it in Settings open your storefront with this check already added. The overlay is only shown to whoever opens the page with ?p3d-debug=1; shoppers never see it.

Common reasons after no-op:

Catalyst (headless)

Support for Catalyst (headless) storefronts is coming soon: a React package for Catalyst is on the way. Headless storefronts appear in the list as Coming soon, and we’ll email you when the package is ready.

3D doesn’t show on my storefront

Check these in order:

1. The storefront shows 3D. On Storefronts, the card says 3D on and Storefront: Up to date. Changes take a few minutes to reach the storefront.
2. The product is live. On the product page in the app, the pill says Live (not Draft, Published or 3D off). See Products and variants.
3. The variant isn’t hidden. A rule with Hide 3D removes 3D for that variant. Choose other options on the product page, or check What shoppers will see in the app.
4. The model is shown. On Models, the model is Ready, not Hidden (plan limit).
5. Your plan hasn’t paused 3D. If the app shows “3D is turned off on your storefront”, shoppers see your normal images until the limit resets or you change plan (details).
6. Reload without cache. Your browser may show an older copy of the page: reload with Shift + reload, or try a private window.
7. Run the installation check. Add ?p3d-debug=1 to the product page address and read the reason in the overlay (table above).
8. Storefront 11 and beyond: add the snippet by hand and click Check installation (steps).
9. 3D appears as a button, not in the gallery. Your theme wasn’t recognized, so the app used the pop-up. Try Custom selectors or contact us.
10. Headless storefront: not supported yet (Catalyst).

Still not showing? Email contact@papathemes.com with the product page address and a screenshot of the ?p3d-debug=1 overlay. See Support.