Hover over color swatch on product variant option in Dawn Theme.

Nourablanc
Tourist
10 0 2

First of all I apologize but I have searched and cannot find specifically what I was looking for and I have zero knowledge of coding. I was able to find a YouTube video that allowed me to change the code to add color swatches for my product variants which caused me great anxiety because I was so unsure of what I was doing! (but I did it!)

 

However, I would like to add a hover affect over the color swatches so that customers can visually see when they move across the color options. Right now it seems difficult to tell if a specific color/size combo is available because when clicking on the color it doesn't enlarge or highlight so it make it hard to determine if you are selecting the color properly. Does that make sense? 

 

Also, if there is code some where that allows me to use the name of the color AND the color as the variant on one button or to include the name under the color that would be awesome. I haven't been able to locate any though. 

 

Appreciate any and all help. 

Replies 5 (5)

KetanKumar
Shopify Partner
36855 3637 11978

@Nourablanc 

oh sorry for any issue do mean like this 

Change Main-Product.Liquid

Go to edit code, head over to the Section folder and find main-product.liquid. Once found, scroll down until you find the below code

 

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>

 

replace the above, with the below code

 

{% 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" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-color: {{variant_needed.metafields.color.swatch}}">
&nbsp
</label>
{% elsif variant_needed.metafields.image.swatch and option.name == "Color" %}
<label class="color-swatch" for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" data-option="{{ value }}" style="background-size: cover; background-image: url('{{variant_needed.metafields.image.swatch}}')">
&nbsp
</label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
{% endif %}

 

Add Code To Base.css

Now, head over to the Asset folder, find base.css and paste the below code at the bottom of the file

 

.product-form__input input[type="radio"] + .color-swatch {
border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */
width: 40px;
height: 40px;
padding: 0;
}
.product-form__input input[type="radio"]:checked + .color-swatch,
.product-form__input input[type="radio"]:hover + .color-swatch {
border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */
}
.product-form__input input[type="radio"] + .swatch {
border: 3px solid #f4f5ff; /* Change this hex code to change the color of the non-active/non-selected variant */
width: 40px;
height: 40px;
padding: 0;
color: #000;
display: inline-flex;
justify-content: center;
align-items: center;
}
.product-form__input input[type="radio"]:checked + .swatch,
.product-form__input input[type="radio"]:hover + .swatch {
border: 3px solid #ccd1d1; /* Change this hex code to change the color of the active/selected variant */
background: none;
}

 

 

Create The Metafields

You’re done with the coding. Now it’s time to create the metafields in order for you to assign colors/patterns to the variants. Head over to Shopify CMS platform. Click on Settings then Metafields

shopify-settings-metafield.jpg

You’ll need to create 2 metafields, one for color another for image. Once you click Metafields, click Variant

shopify-settings-metafield-variant.jpg

Once inside the Variant setting, click the green button ‘Add Definition‘. First we will add the color swatch, name it Color, then for the namespace and key, put color.swatch, lastly select the type as Color. Then click save

color-metafield.jpg

Now click ‘Add Definition‘ again, this time we will create the image metafield, name it Image, then for the namespace and key, put image.swatch, lastly select the type as URL. Then click save

image-metafield.jpg

You should now have 2 variant metafields, and with that you are done!

variant-metafield.jpg

Finally, lets now add the variant. Go to any product, ensure that the product variant name is called Color, and save the product.

variants.jpg

 After saving, click edit on one of the variants you want to add a color/pattern to. Scroll to the bottom, you will now have 2 options for metafields.

variant-metafield-choice.jpg

 

You can now select which you would like to put, for Image metafield you will need to put the url of the image. Best action to do is to upload the pattern, ideally 1:1 ratio, in your shopify file settings, then copying the link to the Image metafield. For the Color metafield, simply click the field and choose the color you like.

If you have both metafields selected, it will choose the Color metafield as the primary selector.

You’re now done! you now have an awesome product variant color swatch on your Dawn theme.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nourablanc
Tourist
10 0 2

Thank you! I will try this!

KetanKumar
Shopify Partner
36855 3637 11978

@Nourablanc 

yes, its my pleasure 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

BrandBuilding88
Excursionist
29 2 6

i think this might be  easier and it allows you to hover over the swatches 

https://www.youtube.com/watch?v=q5OHBsm1Nig

MRamzan
Shopify Partner
165 1 21

You can do it by just copy and paste the code.

Here is the video to follow without using any App.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112