Hi - I am using dawn theme. website www.smara.co.uk
2 of my products (small and large) have 2 variants each with a corresponding images attached to them. Every time a user clicks onto the shop page both images highlighted in red are the main images. However, when a user clicks on either variant “cream/brown” or “gold/tan” is takes over as the main image. Is there also a way if no variants are clicked on, the main image remains? i.e. I’d like the main product image to stay until the user selects a variant and an option where the variant is not always selected.
The main product image of either the small/large product should always be there. And if a variant if picked the image shows as the last image.
I have tried to add the below code towards the end of my main-product.liquid file, just before the closing tag:
@Ankita31 ,
Here’s a simple solution without using any app and without needing to dive deep into code:
1. Set Up Your Product Images:- Main Product Image: Upload your main product image first. This will be the default image that shows up on your product page.
- Variant Images: Upload your variant images after the main image in the product’s media section.
2. Adjust Variant Settings in Shopify:- Ensure No Variant is Selected by Default:
- Go to your Shopify Admin and navigate to Products > All Products.
- Select the product you’re working on.
- Scroll down to the Variants section.
- Click on each variant and ensure that none are set as “default” when the product loads. Unfortunately, Shopify automatically selects the first variant, so you’ll need to set your main image as the default in this list.
- One workaround is to make sure that the first variant is a duplicate of the main product without any additional attributes (e.g., “Select an option” or “Choose your color”), but this could affect inventory tracking if not done carefully.
3. Modify the Product Page Template (Optional for more control):1. Edit the Product Template:
- From your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
- Find the product-template.liquid or product.liquid file under the Sections folder.
-
Add a Condition to Keep the Main Image:
- Locate the part of the code that handles image swapping when a variant is selected.
- Modify the JavaScript to ensure that the main image stays until a user selects a variant. Here’s an example:
javascript
Copy code
document.addEventListener(“DOMContentLoaded”, function() { var mainImage = document.querySelector(‘#MainImage img’); var variantSelect = document.querySelector(‘.product-form__input–variant-selector’); variantSelect.addEventListener(‘change’, function() { var selectedVariant = variantSelect.value; var variantImage = document.querySelector(‘#VariantImage-’ + selectedVariant); if (variantImage) { mainImage.src=variantImage.src; } else { mainImage.src=originalMainImageSrc; // Store the original main image src in a variable } }); });
- Replace the #MainImage and #VariantImage with the appropriate IDs or classes used by your theme.
4. Test the Changes:- Make sure to test the product page on your store after making these changes to confirm that the main image remains until a variant is selected, and the variant images appear after the main image.
This approach gives you control over the product images without needing any apps and with minimal coding.
If it resolves your issue, please mark my answer as a solution or if you still need assistance, let me know. Thank you.
Hi @Ankita31
In the Dawn default, it always route to first variant available. At the current code, there is no way to deselect a variant. You can however, set the default (big image) when the user is routed to your product initially. This will need custom coding to do so.
Hi @made4Uo - thank you for the reply. how do you custom code so you set the default (big image) when the user is routed to your product initially?
Thanks,
Ankita
Hi Thank you for this information as it is exactly what I need.
Where exactly do I put this new code?
Is this the correct spot ?
