Adding Color Swatches to Debut theme instead of Dropdown

Solved
Highlighted
Excursionist
28 1 0

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!

0 Likes
Highlighted
Shopify Partner
1023 214 463

@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
0 Likes
Highlighted
Excursionist
28 1 0

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?

0 Likes
Highlighted
Shopify Partner
1023 214 463

@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
0 Likes
Highlighted
Excursionist
28 1 0

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

0 Likes
Highlighted
Excursionist
28 1 0

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

0 Likes
Highlighted
Shopify Partner
1023 214 463

@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
0 Likes
Highlighted
Excursionist
28 1 0

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!

0 Likes
Highlighted
Shopify Partner
1023 214 463

@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
0 Likes
Highlighted
Excursionist
28 1 0

Alright , would you send me a request?

0 Likes