Size Variations - Product Page

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

Wireframe

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".

Final Result

Customising this section

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