Shopify themes, liquid, logos, and UX
Hey there, I was wondering if anyone could suggest how to achieve the look as illustrated below. I am looking for a way to have it so:
when a variant is selected, it shows multiple images of the new variant, without having to have the pictures attached to the original product. In the cases pictured below, it appears to redirect to a new link for each variant. I cannot find anyway to do this on Shopify alone. As it only allows you to add one image variant and this has to be tied to the original product.
I would sincerely appreciate it if anyone good offer some guidance on how I may be able to achieve this.
Thank you for your time and have a great day!
(Check Below Pics for Examples)
Hey @jayh1
To achieve the look you described, where selecting a variant shows multiple images of the new variant without having the pictures attached to the original product in Shopify, you would need to use a third-party app or custom code to extend the functionality of the platform. Here are a few potential approaches:
Variant Image Gallery Apps: There are several Shopify apps available that allow you to display variant-specific images. These apps enable you to associate separate images with each variant and display them dynamically when the variant is selected. Examples of such apps include "Variant Image Automator" and "Variant Image Penguin." You can explore these apps in the Shopify App Store and choose one that best fits your needs.
Custom Code: If you have coding experience or can work with a developer, you can implement a custom solution using Shopify's APIs and JavaScript. The idea is to load the variant-specific images dynamically based on the selected variant. You would need to modify the product page template and use JavaScript to update the image gallery based on variant selection. This approach requires custom coding and might involve working with Shopify's Product API and front-end JavaScript frameworks.
Theme Customization: Depending on the theme you're using, it may have built-in support or customization options for displaying variant-specific images. Review the documentation or contact the theme developer to inquire about available features or customization options. Some themes provide flexibility in displaying variant images without the need for additional apps or code modifications.
It's important to consider your technical expertise and the specific requirements of your store before choosing an approach. If you're not comfortable with coding or customization, using a variant image gallery app would likely be the most straightforward solution. If you have coding skills or work with a developer, exploring custom code or theme customization options could provide greater flexibility and control over the design.
Remember to thoroughly test any changes you make to ensure the functionality works as intended across different devices and browsers.
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
@jayh1 ,
I have checked the website to which you have added the screenshot. The functionality you are looking to implement in your store is possible. But it's really time-consuming job.
I can help you with this. It requires more customization of the theme code.
Please share your store URL and which theme you are using for development.
Hi @jayh1
Have built the same APP for the below client and handover the APP to client.
https://mymerchandize.com/products/lost-in-reality-david-glass-case-for-samsung-galaxy-m31s
Your requirement is exactly the same, just the design change required.
Hope this will help...
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024