Before you proceed: |
If you are using a version 3 or version 4 theme you won't need to add this code to your theme's files to enable variations as buttons. Instead, you just need to activate a setting in your theme's settings.
The normal setup for the display of product variations on your website is to display them as drop downs, allowing users to view the available options as a list. By using the 'variant buttons' extension you can instead display variation choices as buttons as shown on the example below.
If you have variations in different colours then you can display a coloured background for the button as well. Coloured backgrounds for buttons are inserted by placing a hexadecimal colour reference into the variation name, e.g. Red:#FF0000.
Please Note: The code comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely.
1. Open the product.twig file (located in /views/product pages/product.twig) and find the code contained within {% for option in product.options %} and {% endfor %}
2. Replace the existing code with the code shown below.
| <div class="product-option"> <input type="hidden" name="value[]" value="" class="product-option-value"> <label> Select Your {{ option.name }} </label> <div class="product-option-container"> {% set group = loop.index0 %} {% for value in option.values %} {% if not value.hidden %} {% set parts = value.name|split(':#') %} {% set name = parts[0] %} {% set color = parts[1] ? parts[1] : '' %} <label class="rectangle {{ color ? 'color' : '' }}"> <input type="radio" name="group{{ group }}" value="{{ value.id }}" class="product-option-input"> <span class="inner" style="{{ color ? ('background-color:#' ~ color ~ ';') : '' }}"> {{ name }} </span> </label> {% endif %} {% else %} <div class="note"> Choose an option from the list above... </div> <input type="radio" name="group{{ group }}" value="" class="product-option-input" checked="checked"> {% endfor %} </div> </div> |
As shown in the example below.
Save your changes.
3. To your theme's CSS file (often called default.twig.css) or a LESS file, if they are present on your theme, containing the product styles (often called products.less) you should add the code shown below
| .product-option input { display: none; } |
4. Download the Javascript file here and add this to your application.js file (located within /assets/js/application.js). This should be at the top of the application.js file.
5. Within application.js you must replace
| $('.product-form').productForm(); |
with:
| $('.product-form').customProductForm(); |
If you'd like to display coloured backgrounds for the buttons for your variations, you can do so by, when configuring your variations, entering a hexadecimal colour reference after the variation name.
e.g. Red:#FF0000
For example:
EcommerceFrom 28 June 2025, new EU regulations will require all consumer-facing webshops to meet certain accessibility standards. Known as the European Accessibility Act (EAA), the goal is to make online stores...
B2B EcommerceNavigating the complexities of B2B purchasing requires an in-depth understanding of buyer behavior, which has evolved significantly over recent years. Companies today must adapt to these changing dynamics...
MarketingGoogle Shopping is a powerful platform that lets online stores showcase their products on both the Google results page and Google Shopping tab. This unique advertising opportunity helps brands put...
Ecommerce business managementThe success of your ecommerce store depends on more than just top-notch products and savvy marketing. According to a study by Salesforce, 88% of customers said their whole experience with a business is...
Ecommerce business managementWhen Magento was released back in 2007, the appeal of an open-source ecommerce platform quickly captured the attention of businesses wanting complete control over their online store. However, for...
Ecommerce business managementArtificial intelligence (AI) is revolutionizing the ecommerce landscape.By 2030, the AI-enabled ecommerce market is estimated to reach $16.8 billion, growing by a rate of 15.7% CAGR in the next 8 years....
EcommerceIn the ever-evolving landscape of ecommerce, the success of your business hinges not only on the products you sell but also on the robustness of your ecommerce platform.As we navigate through an era where...
See why ShopWired is one of Europe's favourite ecommerce platform and start building your ecommerce website today.
No obligation, no credit card, no commitment, no contract
