Compatibility: Compatible with Dawn version lower than 2.5 only
If you have Dawn 2.5 and above follow this steps here.
I am not sure why Shopify 2.0 has not offered this option yet. The Shopify theme only hide the one images when you assign the image to that variant. What if we want to have multiple images assigned to the variant? There are several ways to do it. We can do this with NO APP or EXTERBAL library. But we will use the simplest way, and that is by using the image alt. The code adjust to what ever desktop layout and desktop media size you choose. This works with stacked layout and thumbnail slider layout.
With that being said, please assign image alt that corresponds to the option you want to associate the image to. Make sure the variant text is the same with image alt. See video for more information.
What are Show Only Selected Variant Images - Dawn 2.5 below?
Refers to a specific strategy for Shopify stores using the Dawn theme (version 2.5 or lower). It involves modifying the theme code to achieve a more focused product page experience.
Here's a breakdown of the concept:
- Challenge: By default, a Shopify product page with multiple variants (different versions of the product with options like color, size, etc.) might display all the images associated with each variant. This can lead to a cluttered and confusing experience for customers.
- Solution: "Show Only Selected Variant Images" addresses this by ensuring that only the images relevant to the currently chosen product variant are showcased on the product page.
Here's what it achieves:
- Reduced Clutter: Eliminates unnecessary images and creates a cleaner, more streamlined product page.
- Enhanced User Experience: Customers can easily focus on the specific product variation they're interested in, without distractions from irrelevant images.
- Improved Clarity: A more focused presentation allows customers to clearly visualize the features and details of the chosen variant.
- Potentially Higher Conversion Rates: A streamlined product page experience can potentially lead to a higher chance of customers adding the chosen variant to their cart and completing a purchase.
Why Use Show Only Selected Variant Images - Dawn 2.5 below?
There are several reasons why you might consider:
Enhanced User Experience:
- Reduced Clutter: A product page with numerous variant images for color, size, etc., can become overwhelming for customers. Focusing on the selected variant's images provides a cleaner and less cluttered presentation. This allows them to concentrate on the specific product they're interested in, eliminating distractions from irrelevant images.
- Improved Focus: Customers can easily visualize the features and details of the chosen variant without getting sidetracked by images showcasing other variations. This can lead to a more streamlined and efficient buying experience.
Potential for Increased Sales:
- Reduced Confusion: By displaying only the relevant images, you potentially minimize confusion for customers. They can clearly see the product they're considering purchasing, avoiding any misunderstandings about features or options associated with other variants. This can contribute to a higher chance of them adding the chosen variant to their cart and completing the purchase.
- Stronger Product Visualization: With only the selected variant's images in focus, customers can get a clearer picture of the product they're considering. This can potentially lead to a stronger perception of the product's value and features, ultimately influencing the buying decision.
Additional Considerations:
While implementing "Show Only Selected Variant Images" offers a way to enhance product page clarity and potentially boost conversions on your Dawn theme (version 2.5 or below) store, here are some additional factors to keep in mind:
-
User Behavior and Preferences:
- Understanding Your Audience: Consider your target audience and their browsing habits. Some customers might prefer seeing all variant images for comparison purposes, especially if the variations involve significant visual differences (e.g., clothing in various colors or patterns).
- A/B Testing: As mentioned earlier, A/B testing can be a valuable tool. Test the "Show Only Selected Variant Images" approach against the default setting (displaying all variant images) to see which one resonates better with your customer base and leads to higher conversion rates.
-
Image Alt Text and Accessibility:
- Importance of Alt Text: Even with a focus on the selected variant's images, ensure all product images (including those from other variants) have descriptive alt text. This improves accessibility for visually impaired users and aids search engine optimization (SEO).
- Clear and Concise Alt Text: Use clear and concise alt text that accurately describes the product and its variant-specific details (e.g., "Red cotton T-shirt" or "Blue leather handbag").
-
Maintaining Mobile Responsiveness:
- Optimizing for Mobile Devices: With the rise of mobile commerce, ensure the implementation of "Show Only Selected Variant Images" maintains a smooth user experience on mobile devices. This might involve optimizing image sizes and ensuring the variant selection process is user-friendly on smaller screens.
What you are buying:
- Show only images assigned to variant
- Use image alt to assign a variant
- Works with stacked layout and thumbnail slider layout
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Step #1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
Step #2. Add code on the main-product.liquid
Open the main-product.liquid under the section folder. Find the <slider-component>, and look for the <li>. We will add the code below and change it to the corresponding image variable. Make sure there is no spaces. See the video for more information.
Step #3. Add javascript code
Need to add the script code. Open the "global.js." under the Asset folder. Find the " updateMedia() {." Before the closing bracket, add the code below. See video for more information on placement.
Step #4. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #5. Customize theme
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure you unclick the "Hide other variants’ media after selecting a variant.". Click SAVE once you are done customizing.
Conclusion
This strategy tackles a common pain point for Dawn theme (version 2.5) stores: cluttered product pages with numerous variant images. Here's the takeaway:
- Benefits: A cleaner presentation with only the chosen variant's images improves user experience by reducing confusion and allowing for better product visualization. This can potentially lead to higher conversion rates.
- Implementation (Dawn 2.5): Requires code modifications (consult a developer if needed) to detect the selected variant and display only its associated images.
- Alternatives: Dawn versions 2.6 and above have this feature built-in.
Remember:
- Technical Expertise: Code editing is involved for Dawn 2.5. Consider seeking professional help if needed.
- User Testing: While potentially beneficial, A/B testing can reveal if your audience prefers seeing all variant images.
- Accessibility: Ensure all product images (including those from other variants) have descriptive alt text.
Copied!