To achieve this functionality in the Refresh theme, you'll need to make some adjustments to the code. Below are the steps you can follow:
1. **Modify collection page to display the first image for each product:**
Locate the code responsible for displaying product images on the collection page. Look for the section where the image is being rendered. You'll need to ensure that it always displays the first image of each product.
2. **Update product page to display the first image initially:**
Find the code for the product page template. Look for the section responsible for displaying the product images. Modify this section to ensure that it initially displays the first image of the product.
3. **Implement variant image switching:**
Next, you'll need to implement the functionality to switch the product image when a variant is selected. This typically involves JavaScript code that listens for variant changes and updates the displayed image accordingly.
Here's a basic outline of how you can implement this:
```javascript
// Add this JavaScript code to your theme
// Function to update the product image when a variant is selected
function updateVariantImage(variant) {
var newImagesrc=variant.featured_image.src;
$('.product__photo img').attr('src', newImageSrc);
}
// Initialize product page with first image
var firstVariant = $('.variant-input').first().data('variant');
updateVariantImage(firstVariant);
// Listen for variant change event and update image accordingly
$('.variant-input').on('change', function() {
var variantId = $(this).data('variant');
var variant = getProductVariant(variantId);
updateVariantImage(variant);
});
```
This JavaScript code assumes that you have a `.variant-input` element for each variant option (e.g., size or color) on your product page, and each `.variant-input` element has a `data-variant` attribute containing the variant object.
You'll need to integrate this code into your theme's JavaScript files and adjust it as per your theme's structure.
Remember to test thoroughly after making changes to ensure that everything works as expected. Additionally, it's always a good idea to create a backup of your theme files before making any modifications.
