We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Product swatch image under product page auto set as the first image

Product swatch image under product page auto set as the first image

Cristian1231
Tourist
7 0 3

im using the impact theme 6.4.1, i have product swatches under each product, every product is the same but different colors, i did this as i want each color to have different images, but i want to make it so that each product swatch is not the first image of the product, rather it is the color set by the meta feild data. Ive tried using chatgpt to code, to try fix it, nothing worksScreenshot 2025-06-18 at 5.15.04 PM.png

as you can see in the image, the swatch image is set as the products first image, however id like to make it so that the image for the swatch is set as the color hex code in the meta feild data i have uploaded for the product.

 

Thanks

Replies 4 (4)

RanaAwais200
Shopify Partner
4 0 0

Share your store url.

Cristian1231
Tourist
7 0 3

ecomsniper
Shopify Partner
15 2 5

Hey, I see that your swatches are showing the first product image instead of the color dot from the metafield hex code. The fix is simple. Just install a color swatch app from the Shopify App Store. I personally use Rapi, it lets you display proper color dots and also create bundles. Happy to help you set it up if you’re interested. Let me know

 

Screenshot 2025-06-23 at 11.36.28 AM.png

Easify-Jennifer
Explorer
71 2 4

Hi @Cristian1231 

Sounds like you're trying to control how your color swatches display, especially using hex codes.

If you're open to an easier and more flexible approach, I’d suggest trying Easify Product Options. It lets you create color swatches using hex codes without dealing with theme code, and you’ll have full control over how each swatch looks. Here's how it works:

  • This is the result:

EasifyJennifer_0-1750919207832.png

  • This is the app setting:

EasifyJennifer_1-1750919773478.png

 

In the color swatch, you can select the color by Hex code

EasifyJennifer_2-1750919802963.png

 

EasifyJennifer_3-1750919817921.png

 

This app is very beginner-friendly, I hope you will try it. If you need any further assistance setting this up, please let me know or reach out to Easify! 🤗