Adding Color Swatches to Debut theme instead of Dropdown

Solved
JordanM
Explorer
82 4 15

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)

Accepted Solutions
Tejas_Nadpara
Shopify Partner
1087 216 529

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 support@hexaecommerce.com regarding any help

View solution in original post

Replies 46 (46)
Tejas_Nadpara
Shopify Partner
1087 216 529

@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 support@hexaecommerce.com regarding any help
JordanM
Explorer
82 4 15

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
1087 216 529

@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 support@hexaecommerce.com regarding any help
JordanM
Explorer
82 4 15

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
Explorer
82 4 15

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
1087 216 529

@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 support@hexaecommerce.com regarding any help
JordanM
Explorer
82 4 15

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
1087 216 529

@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 support@hexaecommerce.com regarding any help
JordanM
Explorer
82 4 15

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
Explorer
82 4 15
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
JordanM
Explorer
82 4 15
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
1087 216 529

@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 support@hexaecommerce.com regarding any help
Tejas_Nadpara
Shopify Partner
1087 216 529

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 support@hexaecommerce.com regarding any help
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
1087 216 529

@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 support@hexaecommerce.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>