If your store runs on Shopify or WooCommerce, there's a ready-made app or plugin. Everyone else, on Squarespace, Wix, Webflow, a custom site or a landing page builder, can still add a 360° product spin. It takes a short piece of embed code, the same way you'd embed a video.
This guide shows how to make the spin, which of the two code versions to use, and where to paste it on the most popular site builders.
Step 1: Make the spin
- Go to your Twurn dashboard and sign in with Google. New accounts get 2 free spins.
- Under Make a spin, add a photo of the product from the front and one from directly behind, and give it a name.
- Press Make spin. It's ready in about a minute.
- Click the finished spin to open its preview and your embed code.
For the best result, take both photos from the same distance and height, in the same light, on a plain background. Our guide to product photos with your phone has the details.
Step 2: Choose the code version
Each spin comes with two versions of its embed code. They show the same spin; they just get onto the page in different ways.
| Version | Use it when | What it looks like |
|---|---|---|
| Code (recommended) | Your site lets you add HTML with a <script> tag. Most sites do. | A script line plus a <twurn-spin> tag. |
| Frame | Your site builder only accepts an embed or iframe, or strips out scripts. | A single <iframe> tag. |
The Code version looks like this:
<script src="https://twurn.com/embed/twurn-spin.js" async></script>
<twurn-spin spin="YOUR_SPIN_ID" alt="Leather tote bag" ratio="0.75" style="max-width:600px"></twurn-spin>Copy it straight from the dashboard, which fills in your spin's ID and size. The spin fills the space it's placed in, up to 600 pixels wide. Change the 600 to make it bigger or smaller.
Step 3: Paste it into your site
Squarespace
- Open the product page (or any page) in the editor and click Edit.
- Add a block where the spin should go, and choose Code.
- Paste the Code version and save.
Scripts don't always run inside Squarespace's editor, so check the page in preview or on your live site. If the spin doesn't appear there, paste the Frame version into the Code block instead. What Code blocks can run depends on your Squarespace plan, so check your plan's features if neither shows.
Wix
- In the Wix Editor, click Add Elements on the left, then Embed Code → Embed HTML.
- Click the new element, choose Enter Code, paste the Code version, and click Apply.
- Drag the element to where you want it, and resize it to fit the spin.
Wix shows embedded HTML inside its own frame, which doesn't resize itself. Give the element enough height for the spin, and check it on Wix's mobile view too.
Webflow
- In the Designer, open the Add panel and drag a Code Embed element onto the page.
- Paste the Code version, then save and close.
- Publish the site to see the spin.
Webflow shows a placeholder for scripts in the Designer; the spin appears on the published site. Code Embed needs a paid Webflow site plan or a paid Workspace.
WordPress (without WooCommerce)
Add a Custom HTML block in the block editor and paste the Code version. If you sell with WooCommerce, the Twurn plugin is easier: it puts spins in the product gallery for you.
A custom site or other builders
Paste the Code version wherever the spin should appear in your HTML. Add the <script> line once per page, even if you show several spins; each spin then needs only its own <twurn-spin> tag. Most landing page builders have an "HTML", "Embed" or "Custom code" element that works the same way.
Tip: test before you publish. Open the spin on its own page from the dashboard ("Open on its own page") to check it, and look at your page on a phone after adding it.
Options you can change
The <twurn-spin> tag takes a few optional settings:
alt: a short description for screen readers, usually the product name.ratio: the spin's width divided by its height, so the page doesn't jump while it loads. The dashboard fills this in.autoplay="off": stops the short turn the product makes when it first appears. That turn shows shoppers it can be dragged, so we'd leave it on.
Developers can also make spins from their own code with the Twurn API.
Speed, privacy and what happens if a spin is deleted
- Light on your page: the spin's images load only when it scrolls into view, from Twurn's servers.
- Private: the viewer sets no cookies and doesn't track your visitors.
- No broken boxes: if you delete a spin, the Code version hides itself, so your page never shows an empty frame.
What it costs
New accounts get 2 free spins. After that, packs are 10 spins for $15, 50 for $49, or 200 for $149, from your dashboard. Spins never expire, a spin that fails is never charged, and embedding a spin costs nothing extra however many people view it.
Questions
Can I put the same spin on several pages?
Yes. Paste the same code wherever you want it. One spin is one product, however many pages show it.
Which version should I use?
Use the Code version if your site accepts it, because it sizes itself and supports full screen. Use the Frame version only when your builder strips scripts or only accepts iframes.
Will it work on phones?
Yes. Shoppers drag with a finger to turn the product, and the spin fills the width available.
Sources
- Wix Help Center, Embedding a site or a widget (Add Elements → Embed Code → Embed HTML; HTTPS only; embeds aren't responsive).
- Webflow Help Center, Custom code embed (plan requirements; scripts show as placeholders in the Designer).
- Twurn API documentation (the
<twurn-spin>tag and its options).