d
Topic
Posts:
15
Last edited December 11, 2014

Size box from swatch to Drop down menus This post is outdated

Good day,

I'm having problem about swatch. We did size box below the title name in the product page. But, we want to change it to drop down instead. I've read some article on how to make drop down list but nothing happens when I implement it to our site. Please help me to fix this. Here is my shopify codes.

 

  • In product.liquid below the name, I've included this snippets. {% include 'short-form' %}

 

  • Inside my short-form.liquid is this:


{% if product.options.size > 1 %}

{% for variant in product.variants %}{{ variant.title }} - {{ variant.price | money }} {% endfor %}

{% for option in product.options %} {% include 'swatch' with option %} {% endfor %} {% elsif product.options.size == 1 and product.variants.size > 1 %}

{{ product.options[0] }} {% for variant in product.variants %}{{ variant.title }} - {{ variant.price | money }} {% endfor %}

{% for option in product.options %} {% include 'swatch' with option %} {% endfor %} {% else %}

{% if product.options.first != 'Title' %} {{ product.options.first }}:{% for variant in product.variants %}{{ variant.option1 | escape }}{% endfor %} {% endif %}

<!-- product variants -->

{% endif %} {% if product.available %}

QTY:

<!--<a class="down" field="quantity"><i class="icon-minus"></i></a>--><!--<a class="up" field="quantity"><i class="icon-plus"></i></a>-->

{% if product.options.size > 1 and product.variants.size > 1 %}Availability

Please select a variant

{% endif %}

{% endif %}{% if product.variants.size > 1 or product.options.size > 1 %} {% endif %}

 

  • Here is the codes for swatch.liquid


{% comment %} Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'. {% endcomment %} {% assign file_extension = 'png' %} {% if swatch == blank %}

You must include the snippet swatch.liquid with the name of a product option.

Use: {% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}

Example: {% raw %}{% include 'swatch' with 'Color' %}{% endraw %}

{% else %} {% assign found_option = false %} {% assign is_color = false %} {% assign option_index = 0 %} {% for option in product.options %} {% if option == swatch %} {% assign found_option = true %} {% assign option_index = forloop.index0 %} {% assign downcased_option = swatch | downcase %} {% if downcased_option contains 'color' or downcased_option contains 'colour' %} {% assign is_color = true %} {% endif %} {% endif %} {% endfor %} {% unless found_option %}

You included the snippet swatch.liquid with the name of a product option — '{{ swatch }}' — that does not belong to your product.

Use {% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}

Example: {% raw %}{% include 'swatch' with 'Color' %}{% endraw %}

This is case-sensitive! Do not put in 'color' if your product option name is 'Color'.

{% else %}

{{ swatch }}

<!-- tooltip --><!-- end tooltip design -->

{% assign values = '' %} {% for variant in product.variants %} {% assign value = variant.options[option_index] %} {% unless values contains value %} {% assign values = values | join: ',' %} {% assign values = values | append: ',' | append: value %} {% assign values = values | split: ',' %}{% if is_color %}

{{ value }}

{% endif %} {% if is_color %} {% else %} {{ value }} {% endif %} {% endunless %} {% if variant.available %} {% endif %} {% endfor %}

{% endunless %} {% endif %}


I can't find a solution on how to make that codes in drop down instead of size box. God bless and thanks in advance.