Size Variations - Product Page

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

Wireframe

Size Variations


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.