Solved

Adding Color Swatches to Debut theme instead of Dropdown

JordanM
Pathfinder
100 4 19

I recently created my Shopify store using Debut theme, but i faced one issue when i checked how my customer chooses his/her product. So the problem is that when the customer enters the product page they see photos of the product,that they can select, and a little dropdown that actually selects the variant that he/she wants to add to cart. The issue is that my product has a lot of variants and they may get confused by which name to which photo belongs so i thought that it would be great if i could add color swatches so that they can navigate and checkout easier. I would be pleased if someone could help me with this.

Thanks in advance!

Accepted Solution (1)
Tejas_Nadpara
Shopify Partner
1118 222 552

This is an accepted solution.

@JordanM 

 

Thanks for accepting the request. I fixed the issue from your theme.

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help

View solution in original post

Replies 46 (46)

Tejas_Nadpara
Shopify Partner
1118 222 552

@JordanM 

 

Follow instruction as per the document http://docs.minionmade.com/shopify/add-color-swatches-to-products-in-shopify

If you are not comfortable to do it then you can send me direct mail, I will help you to do it from my side.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
JordanM
Pathfinder
100 4 19

Hello Tejos_Naptada,

thank you for sharing the swatch tutorial. I managed to add the swatch.liquid snippet but i don't know where to paste the following code:

{% if product.available and product.variants.size > 1 %}
{% render 'swatch' for product.options as swatch %}
{% endif %}

That is my product.liquid template:

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'product-recommendations' %}

{% if collection %}
  <div class="text-center return-link-wrapper page-width">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>

{% assign current_variant = product.selected_or_first_available_variant %}

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": {{ product.title | json }},
  "url": {{ shop.url | append: product.url | json }},
  {%- if product.featured_media -%}
    {%- assign media_size = product.featured_media.preview_image.width | append: 'x' -%}
    "image": [
      {{ product.featured_media | img_url: media_size | prepend: "https:" | json }}
    ],
  {%- endif -%}
  "description": {{ product.description | strip_html | json }},
  {%- if current_variant.sku != blank -%}
    "sku": {{ current_variant.sku | json }},
  {%- endif -%}
  "brand": {
    "@type": "Thing",
    "name": {{ product.vendor | json }}
  },
  "offers": [
    {%- for variant in product.variants -%}
      {
        "@type" : "Offer",
        {%- if variant.sku != blank -%}
          "sku": {{ variant.sku | json }},
        {%- endif -%}
        "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : {{ variant.price | divided_by: 100.00 | json }},
        "priceCurrency" : {{ cart.currency.iso_code | json }},
        "url" : {{ shop.url | append: variant.url | json }}
      }{% unless forloop.last %},{% endunless %}
    {%- endfor -%}
  ]
}
</script>
					
<!-- RYVIU APP :: WIDGET -->
<div class="lt-block-reviews"> 
	<ryviu-widget  
        handle="{{product.handle}}"
        product_id="{{product.id}}"
	    title_product="{{product.title}}"
	    total_meta="{{ product.metafields.ryviu.r_count }}"
		image_product="{{ product.featured_image.src | img_url: '180x' }}"></ryviu-widget>
</div>
<!-- / RYVIU APP -->

Also i can't manage to find the selectCallback function. Should i create it and how?

Tejas_Nadpara
Shopify Partner
1118 222 552

@JordanM 

 

Go to the product-template.liquid file and paste the code like following:

product-form1.png

 

Let me know if you have still any confusion.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
JordanM
Pathfinder
100 4 19

Hello,

thank you for your assistance. It seems like i was looking in product.liquid not in product-template.liquid. I managed to place the code. I will now continue with the tutorial and hopefully will finish it without other issues

JordanM
Pathfinder
100 4 19

Hello,

I managed to add the swatches to my store. They now appear. But there are two problems:

1. The old selectors for color and size still appear.

2. When i click the swatches they don't select the color/size. The only way to select color/size is with the old selectors

Tejas_Nadpara
Shopify Partner
1118 222 552

@JordanM 

 

Send me your store URL, I will send you request for the Shopify collaborate account so I can access the theme code and fix the issue from my side.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
JordanM
Pathfinder
100 4 19

Hi can i send you my store url and password so that you can access the code with inspect element and tell me what to change?

Thank you in advance!

Tejas_Nadpara
Shopify Partner
1118 222 552

@JordanM 

 

It requires to check in code file, difficult to tell you directly with inspect element.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
JordanM
Pathfinder
100 4 19

Alright , would you send me a request?

JamalAslam
Tourist
4 0 3

Hi, 

were you able to get it through? I am also stuck. Variant are not changing Whatso ever i do

JordanM
Pathfinder
100 4 19
No man.I am struggling as well. As far as I know I need to bind the buttons
so that they do what they are supposed to do with JavaScript. Did you
manage to remove the color and size selectors though?

JamalAslam
Tourist
4 0 3

Still Stuck 

JordanM
Pathfinder
100 4 19
I hope that someone comes up with a solution for the problem, because it’s
essential for conversions and will finally give the answer to this problem.
The tutorial seems outdated to me.A lot of things have changed

Tejas_Nadpara
Shopify Partner
1118 222 552

@JordanM 

 

I sent request for the Shopify collaborate account, accept it so I can fix the issue.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
Tejas_Nadpara
Shopify Partner
1118 222 552

This is an accepted solution.

@JordanM 

 

Thanks for accepting the request. I fixed the issue from your theme.

 

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
AlimAzzouz
Tourist
3 0 2

Hello Tejas,

I'm struggling with the same problem, try several times but doesn't work.
Would you have the kindness to check my swatches code, please? or to guide me.

Thank you in advance

JamalAslam
Tourist
4 0 3

Hey Tejas, 

You had been at least a theme savour for sure. What were the fixes that were done. Also prices are getting updated with the variants?

Tejas_Nadpara
Shopify Partner
1118 222 552

@JamalAslam 

 

Yes, Also price are getting updated with variants.

If you are still facing any issue then send me an email with your store URL.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on tejas.nadpara@gmail.com regarding any help
JamalAslam
Tourist
4 0 3

Let me get my partner on it and i will send you the email

Daniel_DiMaria
Tourist
4 0 3

Hey there, I am having the same issue. Swatches appear along with the old selectors and when selecting the swatches both the picture of the variant doesnt come up and what is added to the cart is actual what is in the dropdown selector (not what is selected on the swatch). Could you provide guidance on what you did to fix this or help me as well>

AnkurMathur
Visitor
2 0 0

Hi Tejas, I need similar help where wanting to either have color based variants to switch in drop down when user selects variant photo or have this swatch.liquid work for me with radio buttons. Right now doesn't seem to be working. Let me know if I can get some help from you. 

I am using Debut Theme

Adrien2p
Tourist
7 0 1

Hi there,

 

I had encounter the same trouble to add the swatch module to my debut theme.

So I created a repository with the step to follow if you want to give a try and feedback please. shopify-debut-swatch 

Cheers,

zainmarfani
Visitor
1 0 0

hi,

 

I used the link you posted. The swatches are popping up on my product page however, i am having some issues with the swatches actually working as buttons. I cant click the other color options. Also the name of the color does not display. Any chance you could help out with that.

Adrien2p
Tourist
7 0 1

Hello @zainmarfani ,

Do you have a screen shot or something I could look at it ?

PSM
Tourist
9 0 2

@Adrien2p Thanks for the detailed step-by-step. Worked like a charm. I have one small request. Do you know how to display the Color text on Mouse-over (hover) or if a color variant is selected?

Adrien2p
Tourist
7 0 1

Hello @PSM ,

 

Since the color is the second part of your color option code in the variant of the product, depending on your value (hex or text) you could had a tooltip management https://www.w3schools.com/css/css_tooltip.asp and then put your color text here.

PSM
Tourist
9 0 2

Thanks @Adrien2p. So I assume I add the styling into the custom.css file right? Sorry for the newbie questions.:) Still getting a hang of this. Thanks in advance

Adrien2p
Tourist
7 0 1

No problem at all 😉

Yes you can add it to the custom.css file and then you just have to surround the swatch element with that

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

 

Addyboy
Visitor
3 0 0

Hey @Adrien2p . Thanks for the step by step doc. I am unable to find href="{{ 'theme.css' | asset_url }}" in theme.liquid. Can you help me out please? THanks

Adrien2p
Tourist
7 0 1

Hi,

 

Either you should bind theme.css or theme.min.css depending your improvement

Brittany_Witt
Explorer
52 0 17

@Adrien2p thanks so much for your step by step guide! It worked perfectly for me! Would you happen to have a guide, or point me in the direction of another guide, that explains how to do this process for sizes, and other custom variant options?

For example, here is a product that offers a color variant of gold, rose gold or silver (I still need to add the color hex codes), and a size variant:

variant1.PNG 

 I would want the color variant to sit above the size variant rather than side by side as they currently are.

Here's another unique example of a product that comes in either gold or silver but also has a secondary color option to choose from:

variant2.PNG

Next is another product we have that comes in either gold, rose gold or silver but you can also choose the letter you want on the necklace:

variant3.PNG

And this last example shows a product that does not have a color option, it only comes in gold, but has a unique birth month/flower option to choose from:

variant4.PNG

Any idea on how I can create the same swatch look for all these other unique variant options?

Much appreciated!

Brittany Witt
mel221
New Member
4 0 0

Adrien2p - I believe that document might be outdated as there are a few sections I don't have in my debut code.

 

href="{{ 'theme.css' | asset_url }}" in theme.liquid

 

variantOption.value in theme.js

 

Can you please help? Thank you so much!

 

AlajaeAllen
Visitor
2 0 0

I need help adding color swatches 

cant find selectCallback function 

i am using debut theme

virender21
Visitor
1 0 0

@Tejas_Nadpara 

Hello

I am facing the same issue. can you please help me with setup color and size swatches in the latest Debut theme?


Thanks

AvidBrio
Shopify Expert
295 17 29

@Tejas_Nadpara   can please post the solution  here. 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
Gaushiya
Visitor
2 0 1

@virender21  if want color swatch in the New debut theme them DM on the my Email Id gausiya.s.siddiqui@gmail.com

banned
AvidBrio
Shopify Expert
295 17 29

@Gaushiya  you can share the solution 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
gravitysoftware
Tourist
15 0 3

I would like to recommend our application. Our app displays swatches on product pages, collection pages and homepage. It integrates with all popular themes. By default it uses the images assigned to the variants to render the swatches. You can customize the swatches by uploading images in the app panel. It's easy to use & no coding required.

dexter23
Visitor
1 0 0

I am also facing this issue. Please let me know how can we fix this in updated debut theme.

AlajaeAllen
Visitor
2 0 0

They never respond and it’s sucks. Been trying to fix this issue for weeks and don’t want to pay for an app to do this for me

JordanM
Pathfinder
100 4 19

It is not worthed it to make it yourself. Instead, get the Debutify theme and pay for it. It's a headache.

tb1313
Tourist
5 0 1

Dear Tejas,

I read your post above, and followed your advises but i have issues and questions :
1) the dropdown for colors still appear
2) In the developper tool on Safari there are 10 errors, and I’m very not familiar with js
3) when i click on a different color, it doesn't call for the right picture ...


Please help me


my url is blumkine.myshopify.com and for now, i only put color swatches in https://blumkine.myshopify.com/collections/tops-en-jersey/products/dee-dee-top?variant=3701951715753...
I thank you in advance,
Best regards,

Tb1313

maron1209
Excursionist
23 0 5

Hi @Tejas_Nadpara , 

 

I just saw your reply to the swatches buttons in the debut theme. I managed to add them to my product pagen, but still have the dropdown shown. Also, when I select a size button and add to cart it uses the sizes from the dropdown. Are you able to help?

FahadRaza93
Visitor
2 0 0

Hi Tejas,

 

I'm trying to create swatches for my Shopify store but unfortunately, I can't find the picture upload option in variants, Could you please help me.

 

FahadRaza93_0-1610987153747.png

 

Adrien2p
Tourist
7 0 1

Hello Tejas,

 

Unfortunately if you need to show images, you have to update the code yourself to show the correct image according to the selection.

karinalang22
Visitor
1 0 0

Hello Tejas!

I also want to add color swatches to my Shopify page and was wondering if you could help me out, thank you so much! If you prefer, you could contact me via email at karinalang2299@gmail.com

Thank you so much!