Size Variations - Product Page

This article describes how you can change the product variations dropdown to be small clickable blocks.

Wireframe

Size Variations


Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started to get a better sense of how the control panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Open the child product template

Navigate to the child product file /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/child_products.template.html.

Step 2: Add the code into the template

Replace the following highlighted code with the following code:

[%param *variation_body%]
    <div class="_itmspec_listitm d-inline-flex" ref="[@specific_id@]_[@value_id@]" aria-label="[@specific_name@] - [@value_name@] option">
        <a class="_itmspec_lnk size-block border rounded py-1 px-2 mb-1 mr-1 [%if [@selected@]%]_itmspec_selected[%/if%]" href="javascript:void(0);" ref="[@specific_id@]_[@value_id@]">
            [%if [@value_image@]%]
                <img src="[@value_image@]" alt="[@value_name@]" />
            [%/if%]
            [%if [@value_name@]%]
                [@value_name@]
            [%ELSE%]
                [@value_description@]
            [%/if%]
        </a>
    </div>
[%/param%]

Step 3: Add styling

Paste the following CSS code into /httpdocs/assets/themes/[THEME-NAME]/css/style.css to style the hover and clicked state:

/* Product Page - Size Variations */
a.size-block {
    color: #333;
    text-decoration: none;
}
a.size-block:hover,
a.size-block._itmspec_selected {
    background: #dee2e6;
}

Step 4: Set the specific display style

Navigate to Products > Product Specifics and click on the specific you want styled as clickable blocks (eg. size). Set the "Display Style" to "Text Only".

Size Variations - display style


Final Result

Size Variations


Customising this section

More information on how to customise this section can be found within the list_item_variations documentation.

Was this article useful?

Be notified when this page is updated. Optional.