Colour Swatch Display Help

Highlighted
Tourist
4 0 1

Hello all,

I have just added the below code into the product-grid-item.liquid.

This was to allow circular colour swatches to display on my collection pages. Everything is good, but for one colour.

I am no expert with coding at all, I just know my way around and can follow instructions but somewhere in the back end it is not picking up French Navy as a colour and is displaying Heather Grey or a grey colour instead.

Can anyone point me in the right direction as to where I can change how the system reads this please as I am guessing if the colour was blue it would display ok?

Thanks in advance, below is the screenshot of how it is displaying. 

Capture.PNG

 
{% capture option_titles %}Color,color,Colour,colour{% endcapture %}
 
{% assign option_titles = option_titles | split:',' %}
{% for option in product.options %}
  {% if option_titles contains option %}
    {% capture option_index %}option{{ forloop.index }}{% endcapture %}
    {% assign option_values = product.variants | map: option_index | uniq %}
    {% if option_values.size != 1 %}
{% for opt in option_values %}
<div style="background-color:{{ opt | downcase }};" class="option_circles"></div>
{% endfor %}
    {% endif %}
  {% endif %}
{% endfor %}
 
 
 
 
<style>
  .option_circles {
    height: 25px;
    width: 25px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    border:1px solid #ccc;
  }<br>
</style><br>

 

1 Like
Highlighted
Shopify Partner
6134 896 2071

Hello, @red_gear 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Hello,

 

Thank you it is www.1892attire.com

0 Likes
Highlighted
Shopify Partner
6134 896 2071

@red_gear 

Thanks for url

i have check this issue all good can you please upload same color name png file currnty color code not deffine so please upload image see the issue

image.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Hi Ketan,

 

Where do I need to upload this colour code sorry?

 

Thanks

0 Likes
Highlighted
Shopify Partner
6134 896 2071

Hello, @red_gear 

Thanks for update.

1. Go to Online Store->Theme->Edit code
2. Asset-> upload 

make your upload png formate also same know your color code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 1

Capture.PNG

Thanks Ketan

 

I have now uploaded this as an asset as a PNG and named it french navy

 

Do I need to do anything else?

 

Thanks

0 Likes
Highlighted
Shopify Partner
6134 896 2071

@red_gear 

Thanks for udpate

i have checked your code png formation code missing 

can you please check this 

https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/td-p/616...

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
5 0 1

Hi, i have the same issue. i named my .png and upload it correctly, but the swatch did not show up in the collection page.

1 Like
Highlighted
Shopify Partner
6134 896 2071

Hello, @jc1234 

Welcome to the Shopify community!
and Thanks for your question.


Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes