How To Add Color Swatches To Your Shopify Product Page

[@Bitbranding]

Want to know ways to customize your shopify store using the DAWN theme let us know in the comments.

[@bridalhive1126]

I would like to change my watches to image of the actual product color

[@Levis_Grey]

Does not work on my Dawn Theme. I guess the code is right, cause I checked it many times, but it doesn't change anything on my product form input.
Frustrating :/

[@Bella-ll7ni]

not working for me too

[@HussainKovic]

@@Bella-ll7ni also not working for me

[@momocotton3049]

Hi, i was trying to update the code as mentioned in the tutorial, but can find the code in my dawn theme. I am currently using version 11.0 of the theme. Do you know if your recommendations are applicable for the updated theme?

[@justmeagain112]

same here. 12.0 version

[@catchcutness15]

Hi, I have a new shopify store. I'm not sure if coding is updated when versions of Dawn are updated. I'm currently on Dawn version 11.0.0 and I can't find
{{ value }}
anywhere in my Main-Product.Liquid. Can you help?

[@hoangduy3602]

me too!
Do you fixed it ?

[@joshjpierce]

Not seeing this code to be replaced, currently using Dawn 5.0 theme.

[@martinm8388]

thanks a lot dude, first tutoriel that really works.

[@Bitbranding]

You're welcome!

[@kingkuann]

hey bitbranding, i followed all the steps but its still not working. can you help me in any way?

[@fatherleo4603]

Is there a faster way to do this if you have you have over 200 different types of clothing?

[@scottydigital]

Thanks, @Father Leo! Same question. Seems like there has to be a faster way to do this

[@dakkar4962]

Unfortunately, this code doesn't work in Dawn 9.0.0

[@katyalakshmi5293]

Thank you for this! Can you tell me how we can get the color name to show up above the color swatch?

[@zeeshanmanzoor5280]

Same question

[@nataliekerr3948]

Thank you! Are you able to share or advise how to have the colour name appear with the colour at all? I am unable to find anything :(

[@sirlevinkman7199]

+1 (it looks good, but I also need the color code to be visible)

[@kelleycarpenter-conijn2730]

Using Trade Theme. No option.position to search. Does this mean I can not make this edit with this theme?

[@barak499]

Great video and it works!
Just one problem
I have 3 products on the site. In the first product I chose a black color and as soon as I choose additional colors for the rest of the products it shows me on the product page only the first color (black) I chose why doesn't it let me choose other colors for the other products?
and by the way, I deleted all the colors to do it again & it shows me only color, why?

[@lamont.collective]

Hi, thanks for the video. This didnt work for me - any suggestions?

[@sophieho8364]

I can't fine code
{{ value }}
on dawn theme 6.0.2.

[@lilyhelu8274]

same issue for me!!! help!!!

[@bohomama2605]

@@lilyhelu8274 same

[@Elementalsight]

This is super helpful, thanks!

[@brazzyuca]

would the code work for any other theme other than Dawn?

[@adminmaddesign2831]

Great tutorial. Does it work for craft theme? I cannot find the lines to change. Can you help me please? Thanks

[@agathaandrade4975]

Thank you for the video! Very informative. I was able to edit the code without any issues. And it worked.
However, I have an observation/question: In my case, I have 6 colors and 5 different sizes for a lot of different designs/products.
It is very difficult to paste the link "image" for every single product/color & size variation. Is there a way to make it more streamlined? Am I missing something here?
Thanks again for taking the time to make this video.
Update:
I am new to customizing my Shopify store. I noticed a new update for the Dawn theme. With the update, any code changes will not be carried on, which means that all the work I did will have to be done again and again with future updates, which is really not doable, considering the time and the complexities involved. What is your take on using apps to do such customizations?

[@Blopez_]

I think theres a app that allows u to push code I would do that or backup code with notepad

[@brinleywilliams6304]

Great Video - thx! Would it still work if you had another Varaible like Size as well as Color on the Product page?

[@Joker-n1t]

Bro Main Product Liquid Is Not Showing In My theme edit code

[@jannattahir4092]

HI, its working fine, but how can also appear the name of selected colors ?

[@brandlesspk]

No label code found in main liquid file :(

[@waynefilkins8394]

Same here. You ever figure it out?

[@AIProphets]

Does this only work on Dawn? I use Refresh but it doesn't work

[@barak499]

great video!
how & where Can I add the HEX CODE on the theme?

[@karlburton1679]

Thanks guys, another great video!

[@Bitbranding]

Our pleasure! -C

[@SamuraiSpooky]

There is any way to send to a new url product when you clic on a different color ?

[@Bitbranding]

We are working on a video for this -C

[@Deb-dp1qc]

Hi Christian, thanks for your helpful videos. But as I'm using Dawn ver. 11.0.0, I didn't find the portion of the code you mentioned, within the main-product.liquid. Could you please give a solution How can I do it at my store. Awaiting your reply.

[@AkshyaLWW]

hi Christian.... I am also facing same problem..please help

[@vidur7741]

@@AkshyaLWW The file you need to look for in the new Dawn theme is "product-variant-options.liquid" That code has moved there now.

[@HridoyAhmed-kj9et]

Is it work for any theme?

[@pathakharsh78]

How to add custom colors to the Prestige Shopify theme? I want to add different color shades of one color with the same name. Like Blue color shades with a same Blue color name for all the color variations.

[@HridoyAhmed-kj9et]

I have another theme, so how can i use it?

[@DiploWoah]

Would you be able make it change to another product url when clicking color? So you have for example four different product pages which are linked?

[@jasonkelly379]

did you find out how to do this? I am looking to do the same

[@simonsevelsted3735]

@@jasonkelly379 Im also looking to do the same!

[@leuenberger7629]

@@simonsevelsted3735 I mean 4 Months has passed so has anyone found the solutions

[@huytrancam6179]

This is a good solution but for the store that has huge catalogue, it will be a nightmare to update just a specific color for the products unfortunately :(((

[@terramerana]

Hi! Very useful and easy video but it doesn't seem to be working when there's another variant such as size. Could you please help?
Thanks

[@TheMonsieurOo]

hi. i'm facing the same challenge did you find a solution to it ?

[@mvanbreda1]

Is there a way to do bulk color metafieds as I have loads of T-Shirts with different variants size and color and will take forever to do it one by one?

[@TheMiig1513]

Did you find a way?

[@hermes.trismegistus7259]

There is no "main product liquid" in my code. That is how it shows on your theme.

[@1988Jac]

Hi, will this work on the Shopify Symmetry Theme?

[@Bitbranding]

More than likely not. Every theme has different code.

[@preetidhanik1750]

Thank you for this video it is very helpful for all. Can you tell me How we do same thing for collection page ??

[@marinaschmitz4942]

hey! did you ever get this figured out? thanks!

[@vivekpatel603]

if you get it then tell me

[@gracebreshears5075]

Does this mess with the size variant buttons?

[@tourofthanh]

great video, super helpful. Where can I find the code?

[@Bitbranding]

Here it is! docs.google.com/document/d/1rhxZFV37OZXEjPKVky4SH1c7CWthYEzwfvrA-RfimLw/edit?usp=sharing

[@tourofthanh]

thank you so much bro. Been trying to figure this out for days and you are a life saver. Any way to have the text appear above the colors when hovering over with mouse

[@seamslegitdesigns]

I followed this tutorial and the colors show only for black or white . I'm using the dawn theme.

[@Rafail500Saketi]

me too, dawn theme version 6.0.2

[@heitorbarbosa5596]

same here

[@Souxz]

same here

[@WebSensePro]

Great video

[@annasinn6918]

What about I missing main-product.liquid in theme code files

[@paulotorres9511]

Excelente video, estuve buscando COMO hacer esto por mucho tiempo, gracias!!!!!!!!

[@varalakshmicreations4167]

Sir,
we are not able to find the code for this process.

[@Bitbranding]

docs.google.com/document/d/1rhxZFV37OZXEjPKVky4SH1c7CWthYEzwfvrA-RfimLw/edit?usp=sharing

[@varalakshmicreations4167]

@@Bitbranding Thank You Sir

[@SteveMiguel]

super helpful!

[@Bitbranding]

Awesome! -C

[@zeesidesigngarden]

can the ability to add swatches be done without coding? the apps don't seem to work so well

[@seamslegitdesigns]

Thank you 😊

[@ACHA-TEACHER]

Where is the code Sir?

[@Bitbranding]

Sorry about that. Here you go: docs.google.com/document/d/1rhxZFV37OZXEjPKVky4SH1c7CWthYEzwfvrA-RfimLw/edit?usp=sharing

[@meriammuller]

thanks a lot "BitBranding"

[@NesliNecipoğlu]

Here is the code for Dawn theme - product-variant-optiions.liquid . It works only one option which is color. What about if you add size ? It doesn't work.
{% comment %}
Renders product variant options
Accepts:
- product: {Object} product object.
- option: {Object} current product_option object.
- block: {Object} block object.
- picker_type: {String} type of picker to dispay
Usage:
{% render 'product-variant-options',
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign variants_available_arr = product.variants | map: 'available'
assign variants_option1_arr = product.variants | map: 'option1'
assign variants_option2_arr = product.variants | map: 'option2'
assign variants_option3_arr = product.variants | map: 'option3'
assign product_form_id = 'product-form-' | append: section.id
-%}
{%- for value in option.values -%}
{%- liquid
assign option_disabled = true
for option1_name in variants_option1_arr
case option.position
when 1
if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 2
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
when 3
if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0]
assign option_disabled = false
endif
endcase
endfor
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = 'url(' | append: image_url | append: ')'
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
else
assign swatch_value = null
endif
-%}
{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}
{%- capture label_unavailable -%}

{{- 'products.product.variant_sold_out_or_unavailable' | t -}}

{%- endcapture -%}
{%- if picker_type == 'swatch' -%}
{% liquid
assign checked = false
if option.selected_value == value
assign checked = true
endif
%}
{%- capture help_text -%}
{{ value | escape }}
{{ label_unavailable }}
{%- endcapture -%}
{%
render 'swatch-input',
id: input_id,
name: option.name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: checked,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text
%}
{%- elsif picker_type == 'button' -%}


{% assign variant_needed = null %}
{% for variant in product.variants %}
{% if variant.options contains value %}
{% assign variant_needed = variant %}
{% endif %}
{% endfor %}
{% if variant_needed.metafields.color.swatch and option.name == 'Color' %}

 

{% elsif variant_needed.metafields.image.swatch and option.name == 'Color' %}

 

{% else %}

{{ value }}

{% endif %}
{%- elsif picker_type == 'dropdown' or picker_type == 'swatch_dropdown' -%}

{% if option_disabled -%}
{{- 'products.product.value_unavailable' | t: option_value: value -}}
{%- else -%}
{{- value -}}
{%- endif %}

{%- endif -%}
{%- endfor -%}

[@TV-yo9of]

you can't use this if there are size variants...most clothing have atleast 3 different sizes. Useless video

[@WankinLegend]

Why is it my open.position says not found when i look it up?