Mastering Shopify's 3D Viewer: Lock Rotation & Enhance Product Experience

Hey everyone,

As store owners, we're always looking for new ways to make our products pop and give our customers the best possible online shopping experience. One of the coolest tools Shopify offers for this is the built-in 3D model viewer. It lets customers really explore your products from every angle, which is fantastic for engagement.

But sometimes, out-of-the-box isn't quite exactly what you need. Just recently, a fellow store owner, FrogMan25, sparked a great discussion in the community about getting more control over their Shopify 3D models. They were looking to create a really "clean, controlled inline 3D experience" – specifically, they wanted to lock the vertical rotation and ensure the model stayed right on the product page, not popping into a new tab.

The Challenge: Fine-Tuning Your Inline 3D Experience

FrogMan25 laid out their goals clearly:

• Inline 3D interaction: Keep the model right there on the product page, no new tabs.
• Horizontal rotation only: Allow users to spin the product left and right, but completely disable any up or down tilting.

They even shared a great example from Albany Park – a sofa product page where you can rotate the sofa horizontally without it tilting vertically. It’s a super slick way to showcase a product without overwhelming the user or making them feel like they might lose their place.

This is a common desire, especially for products where a vertical tilt doesn't add much value, or might even confuse the user. Think about a chair, a table, or even a piece of art – you mostly want to see it from different horizontal angles.

The Community Weighs In: Solutions & Key Insights

PaulNewton, a helpful voice in the community, quickly chimed in with some excellent advice. The core of the solution lies in customizing the attributes of the HTML element that Shopify uses. This element is part of a web component that Google developed, and it comes with a bunch of powerful attributes you can tweak.

Locking Vertical Rotation with camera-orbit

For locking vertical rotation, Paul suggested using the camera-orbit attribute. This attribute controls the initial position and limits of the camera around your 3D model. Here's what he recommended:

camera-orbit="auto 90deg"

or

camera-orbit="0 90deg"

Let's break that down a bit:

• The camera-orbit attribute takes three values: theta, phi, and radius.
• theta (the first value) controls the horizontal rotation (left/right).
• phi (the second value) controls the vertical rotation (up/down).
• radius (the third value) controls the distance of the camera from the model (zoom).

By setting phi to 90deg, you're essentially telling the camera to stay at a fixed horizontal plane relative to the model, preventing any vertical movement. The auto or 0 for theta means it can start at a default or specific horizontal angle, and then users can rotate it freely horizontally.

Controlling Zoom with disable-zoom

Paul also mentioned adding disable-zoom as another attribute. While FrogMan25 didn't explicitly ask for this, it's a great tip for a "controlled inline experience." Sometimes, uncontrolled zooming can make a product feel less polished or even break the layout. If you want to keep your users from zooming in and out, simply add this attribute:

disable-zoom

No value needed, just the attribute itself.

A Crucial Caveat: Your 3D Model Itself Matters!

Here's a really important point Paul brought up: "Note that just because you declare something in html/js doesn’t not mean the actual 3D file will magically behave in certain ways it wasn’t built for or doesn’t support."

This is key! Your 3D model file (usually a GLB file for Shopify) needs to be properly created and optimized. If the model itself is off-center, or its internal axis is weird, these HTML attributes might not give you the perfect result you expect. Always ensure your 3D assets are high-quality and correctly prepared before uploading them to Shopify.

Step-by-Step: Implementing These Changes in Your Shopify Store

Ready to give it a try? Here's how you can modify your Shopify theme to achieve that horizontal-only rotation:

1. Access Your Theme Code:

   • From your Shopify admin, go to Online Store > Themes.
   • Find your current theme, click Actions > Edit code.

2. Locate the Tag:

   • This tag is usually found in your product template files. Common file names include sections/product-template.liquid, sections/main-product.liquid, or sometimes directly in templates/product.liquid. You might need to use the search bar in the code editor to find .

3. Add the Attributes:

   • Once you find the tag, you'll add the camera-orbit and optionally disable-zoom attributes to it.
   • It will likely look something like this initially (this is just an example, your specific attributes might vary):

   • You'll want to modify it to include the new attributes. For horizontal-only rotation and disabled zoom, it would look something like this:

     camera-orbit="0 90deg" disable-zoom>

     Or, if you prefer the camera to automatically choose its initial horizontal position:

     camera-orbit="auto 90deg" disable-zoom>

     Remember to keep any existing attributes your theme already uses, like ar or environment-image.

4. Save and Test:

   • Click Save and then immediately go to your product page to test the changes. Make sure the model behaves exactly as you want it to!

Beyond 3D Models: Considering Alternatives

Paul also raised another excellent point: sometimes, a full 3D model might be overkill, or not the most efficient solution. He suggested that for certain products, a 360-degree image approach or even a 360-degree video could be a better fit. These options can be simpler to implement and often require less specialized asset creation, while still providing a fantastic interactive view for your customers.

If you find yourself struggling with complex 3D model issues, or if your assets aren't behaving quite right even after adjusting the code, it might be worth exploring these alternatives or reaching out to a developer for specialized services. Shopify's Sidekick assistant is also a great tool for general guidance, though for very specific code modifications, the community or an expert is often best.

Ultimately, the goal is to enhance the customer experience, right? Whether it's with perfectly controlled 3D models or smart 360-degree imagery, making your products shine is what it's all about. Keep experimenting, keep testing, and don't hesitate to tap into the amazing Shopify community for more insights!