Solved

Color swatches not displaying all colors [Beyond Theme]

mangoes
Visitor
2 0 0

Hello all,

 

I am having trouble figuring out why my swatch images are not displaying properly. I am trying to use a .png file as a swatch for a dual-colorway crewneck. However, in the image below, the section highlighted has a clickable swatch palette but will not display the images I uploaded (I uploaded into assets and files). On the other hand, the crewneck all the way to the right has a displayable swatch but is using hex - as opposed to an image. I have 4 total swatches I would like to use. I appreciate all and any help. Let me know if you need any more information, I have posted screenshots of the code below. Thank you!

 

HOW SWATCHES ARE CURRENTLY DISPLAYED ON WEBSITE:

 

 

mangoes_2-1677151381011.png

 

 

CODE SCREENSHOTS:

 

mangoes_3-1677151474055.pngmangoes_4-1677151539251.png

 

 

mangoes_5-1677151614409.png

mangoes_6-1677151763150.png

 

 

 

SWATCHES UPLOADED INTO FILES WITH SAME NAME:

 

mangoes_0-1677151222935.png

 

 

 

PRODUCT COLOR VARIANT NAMES:

 

mangoes_1-1677151263249.png

 

Accepted Solution (1)

mics
Trailblazer
172 12 32

This is an accepted solution.

 

Based on the code screenshot you provided, it looks like you are using the data-src attribute to specify the swatch image URLs for your product variants. However, this attribute is not recognized by Shopify and won't work for displaying swatch images.

Instead, you should use the data-image attribute to specify the image URLs for your swatches. Here's an example of how to update your code for the first variant:

 

javascript
<div class="swatch-element color green" data-value="Green" data-color="#2e7d32" data-image="//cdn.shopify.com/s/files/1/0019/2756/5561/files/green.png?47"> <input id="swatch-0-green" type="radio" name="option-0" value="Green" checked> <label for="swatch-0-green" style="background-color: #2e7d32;"><img class="crossed-out" src="//cdn.shopify.com/s/files/1/0019/2756/5561/t/11/assets/soldout.png?v=4823567106696356791" alt="" style="opacity: 0;"><span class="color-name">Green</span></label> </div>
 

In this code, I've replaced the data-src attribute with data-image and updated the URL to match the correct image location. You should do this for all of the swatch elements in your code.

Also, make sure that your image files are named exactly the same as the value you are using for the data-value attribute. So for example, if your value is "Green", your image file should be named "green.png".

Once you've made these changes, save your code and check your product page to see if the swatch images are now displaying correctly.

banned

View solution in original post

Replies 2 (2)

mics
Trailblazer
172 12 32

This is an accepted solution.

 

Based on the code screenshot you provided, it looks like you are using the data-src attribute to specify the swatch image URLs for your product variants. However, this attribute is not recognized by Shopify and won't work for displaying swatch images.

Instead, you should use the data-image attribute to specify the image URLs for your swatches. Here's an example of how to update your code for the first variant:

 

javascript
<div class="swatch-element color green" data-value="Green" data-color="#2e7d32" data-image="//cdn.shopify.com/s/files/1/0019/2756/5561/files/green.png?47"> <input id="swatch-0-green" type="radio" name="option-0" value="Green" checked> <label for="swatch-0-green" style="background-color: #2e7d32;"><img class="crossed-out" src="//cdn.shopify.com/s/files/1/0019/2756/5561/t/11/assets/soldout.png?v=4823567106696356791" alt="" style="opacity: 0;"><span class="color-name">Green</span></label> </div>
 

In this code, I've replaced the data-src attribute with data-image and updated the URL to match the correct image location. You should do this for all of the swatch elements in your code.

Also, make sure that your image files are named exactly the same as the value you are using for the data-value attribute. So for example, if your value is "Green", your image file should be named "green.png".

Once you've made these changes, save your code and check your product page to see if the swatch images are now displaying correctly.

banned
mangoes
Visitor
2 0 0

I sincerely appreciate your help. I don't know how I overlooked that, but thanks again!

mangoes_0-1677161853125.png