What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Highlight 3d content?

Highlight 3d content?

vmms24
Excursionist
30 0 3

Hello, it's my first post, I'm using shopify platform and I'm loving it so far, I made a search and found nothing therefore I come here for help: I'm implementing 3d views and it works fine, but in the mobile version the 3d view seems pretty discreet and may pass like an regular picture, the model won't move also until you click it, is there a way to highlight or change the style to make it pop up more? Here's is the image of example. 

Thank you pretty much in advance. 

IMG_20230616_155940.jpg

Replies 3 (3)

Corahernandez
Tourist
4 0 1

@vmms24 wrote:

Hello, it's my first post, I'm using shopify platform and I'm loving it so far, I made a search and found nothing therefore I come here for help: I'm implementing 3d views and it works fine, but in the mobile version the 3d view seems pretty discreet and may pass like an regular picture, the model won't move also until you click it, is there a way to highlight or change the style to make it pop up more? Here's is the image of example. 

Thank you pretty much in advance.     MyAccountAccess

IMG_20230616_155940.jpg


Hello,

 

Hello! It's great to hear that you're enjoying using the Shopify platform. Regarding your question about making the 3D view more prominent on mobile devices, there are a few suggestions you can try:

Increase the size: Consider increasing the size of the 3D view on mobile devices. You can adjust the dimensions of the container element that holds the 3D view to make it larger and more noticeable.

Use contrasting colors: Choose colors for the container or surrounding elements that contrast with the rest of the page, making the 3D view stand out more. For example, you could use a bright color or a border around the 3D view to make it visually distinct.  

Add an attention-grabbing icon: Place a small icon or symbol on top of the 3D view that indicates it's interactive or can be clicked. This can help draw attention to the 3D view and encourage users to interact with it.

Apply animation or movement: Consider adding subtle animation or movement to the 3D view on mobile devices. For example, you could make the model rotate slowly or add a gentle hover effect when users interact with it. This can make the 3D view more engaging and eye-catching.

Provide a clear call to action: Add a clear and concise call to action near the 3D view, such as "Tap to interact" or "Explore in 3D." This helps communicate to users that the image is interactive and encourages them to engage with it.

I hope this information helps you.  

 

 

 

manosmstr07
Excursionist
18 0 3

Hey there! You suggestion are really helpful. Could you describe the way we can do that? Thank you in advance

dgme
Visitor
1 0 0

It's great to hear that you're enjoying using Shopify! To make the 3D view more noticeable and interactive on the mobile version of your website, you can try a few different approaches:

  1. Increase the size of the 3D model: Make the 3D model larger so that it takes up more space on the mobile screen and is more noticeable to users.

  2. Add visual effects: Consider adding visual effects such as shadows or borders to the 3D model to make it stand out more against the background of your website.

  3. Use animation: Incorporate subtle animation effects to draw attention to the 3D model, such as having it rotate or scale slightly when it first appears on the screen.

  4. Call-to-action (CTA) button: Include a prominent CTA button or text prompting users to interact with the 3D model, such as "Tap to View" or "Explore in 3D".

  5. Provide instructions: Clearly communicate to users that the 3D model is interactive and encourage them to interact with it by providing brief instructions or tips.

By implementing these strategies, you can enhance the visibility and engagement of the 3D view on your mobile website and create a more immersive shopping experience for your customers