Can I turn another variant into a swatch ?

Jess_Richardso1
New Member
10 0 0

Looking to use two image sets rather than drop down or box options on product page. Thought I could use swatch product option to turn images into a swatch. Uplading images is fine and appear on product page with color variant. I now need to turn another variant into a swatch. Can anyone help point me in the right direction please?

As aside issue, would also like to image swatch to change color or be hightlighted more than is when chosen.

Am using Retina theme.

Thanks, Jess

 

0 Likes
BogdanM
Shopify Partner
112 3 21

Hi Jess,

Do you mean to have a second option on a product, besides Color? Like "size" for example?

Regarding the highlighting, you would need to find the css that defines the selected swatch style and update it to your need. 

Regards

Bogdan

Bogdan | WebShopAssist
User friendly apps with top-rated support
- SKUGen the SKU generator
- DPD Integration
0 Likes
Jess_Richardso1
New Member
10 0 0

Hi Bogdan, 

 

Yes. In good scenario I would have three. One for color, one for size and one for another thing. In perfect world, I'd have unlimited .

Thanks for css styling. Wasn't sure if that was only place to change.

Jess

0 Likes
BogdanM
Shopify Partner
112 3 21

Hi Jess,

I don't have access to a Retina themed store now, to look into the code, but it shouldn't be dificult to do.

I've replaced the drop-downs with swatches and buttons for other themes.

You can read this tutorial: https://help.shopify.com/themes/customization/products/features/add-color-swatches

 

Even if it is outdated and it is not working "as is" with sectioned themes, many parts of it can be reused.

Bogdan | WebShopAssist
User friendly apps with top-rated support
- SKUGen the SKU generator
- DPD Integration
0 Likes
Jess_Richardso1
New Member
10 0 0

Thanks Bogdan . Yes, I looked at above guide.

In my mind because color swatch working and able to upload images ect then all had to do was add options to what was already there.   If that would work then I just need to know where to put it. The guide says

Include swatch.liquid in product.liquid

Include your swatch.liquid snippet where you want to insert a swatch. Include it with the name of the product option you need to turn into a swatch. For example, use this code if your product has a Color option:


{% if product.available and product.variants.size > 1 %}
 {% include 'swatch' with 'Color' %}
{% endif %}

Again in guide it says

If you're not sure where to insert your snippet, look for a select element with name 'id' and add your snippet right below that element:

Can I just add the below? And in product.liquid? I tried and failed but not sure if because I put it in the wrong place or because I have no idea what I'm doing:)

{% if product.available and product.variants.size > 1 %}
{% include 'swatch' with 'Grind' %}
{% endif %}

Jess

0 Likes
BogdanM
Shopify Partner
112 3 21

I'm afraid that without access to that theme, I can't say exactly how you should adapt that code ... sorry

Bogdan | WebShopAssist
User friendly apps with top-rated support
- SKUGen the SKU generator
- DPD Integration
0 Likes
Jess_Richardso1
New Member
10 0 0

OK thanks.

If anyone does have access to Retina and some time to help then I'd appreciate it.

Jess

0 Likes
Chad91
Shopify Partner
41 1 23

@Jess_Richardso1 wrote:

As aside issue, would also like to image swatch to change color or be hightlighted more than is when chosen.

Did you figure out how to do this? I am also using the same theme and would like the swatches to behave somewhat like a button, with a different color text or border when selected. 

0 Likes