Outside of the all of the nitty gritty details of what makes your business function, the core of what your users interact with on a daily basis is your brand identity. For it to be memorable and sticky to the average user clicking around, your brand has to have a personality that feels unique and custom. The major online store platforms give you the ability to customize anything and everything, down to the outline of a button, so why settle for a default when you don’t have to! 

Some of your products sold on Shopify may be available in different variants ( colors, sizes, etc), and if you don’t want to display them with the default drop-down from your browser and you don’t want to deal with separate app for displaying them... you are probably used to following the steps suggested by Shopify on their website:

https://help.shopify.com/en/themes/customization/products/features/add-color-swatches

Which tells you to use this file:

https://raw.githubusercontent.com/carolineschnapp/color-swatches/master/swatch.liquid 

This code will also  help you display the buttons as a custom drop-down like this one:

We will use the same steps outlined in the Shopify Help link above without adding the code they tell you to add, and instead making some small changes in the swatch.liquid file, adding some code in your custom Javascript code file, and then using CSS to style your dropdown however you want! 

Let’s jump right in! To make it as clear as possible, we will start by displaying the changes that need to be made in swatch.liquid file.

Look for the line:

{% unless found_option %}

And replace with 

<div class="swatch-container">

 <div class="swatch-main-visible"><!-- insert the title of the first available variant here --></div>

 {% unless found_option %}

The <div class="swatch-main-visible"> is the button that appears on the page when the dropdown is closed.

You should delete or comment the line: 

<div class="header">{{ swatch }}</div>

And replace this whole div

<div data-value="{{ value | escape }}" class="swatch-element ...">

…

</div>

With

<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">

 <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if variant.selected %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />

 <label for="swatch-{{ option_index }}-{{ value | handle }}">

 {{ value }}

 </label>

</div>

And after the line

{% endunless %}

Add a closing div:

</div>

To close the <div class="swatch-container">.

In the custom Javascript file, we will insert the programming for clicking on the dropdown buttons.

You can use this code to do that:

$(document).ready(function() {

 initProductVariantsDropDown();

}


function initProductVariantsDropDown() {

 if ( $('.swatch-container').length > 0 ) {


 $( ".swatch-container" ).each(function( index ) {


 $( this ).find(".swatch-main-visible").click(function(e) {

 $( this ).parent().toggleClass( "opened" );

 });


 $( this ).find(".swatch-element").click(function(e) {

 $( this ).parent().parent().removeClass( "opened" );

 $( this ).parent().parent().find(".swatch-main-visible").text( $( this ).text() );

 });


 });

 }

};

That’s it! We have all of the content that we need on the page to create our custom dropdowns. The rest we can use CSS to add the style we want!

Don’t settle for the default in anything when you can use this creative and simple trick to completely customize your product variant dropdowns throughout your site. Detail is key to your brand identity and this small detail will make your website stand out among the rest who didn’t take the initiative to adjust this small, but not insignificant detail.

Would you like us to build this feature on your e-commerce store? Visit our Creative & Development section.