Size Variations - Product Page


  • Fashion


Brand Logo

Coding Instructions

Step 1. Add the updated HTML into the variation code

Open up the product template here: /httpdocs/assets/themes/[THEME-NAME]/products/template.html

Add the class "size-block" to the start of the class attribute for this line of code:

<div class="_itmspec_listitm" ref="[@specific_id@]_[@value_id@]">


<div class="size-block _itmspec_listitm" ref="[@specific_id@]_[@value_id@]">

Notes on the above code

  • This layout requires that the specific display style (under products > product specifics) for the specific that you're wanting to change the layout for is set to "text only".

Step 2. Add the below CSS Paste the below CSS into /httpdocs/assets/themes/[THEME-NAME]/css/style.css:

.size-block ._itmspec_selected {
    padding: 0;

.size-block {
    display: inline-block;
    margin-right: 10px;
    padding: 11px;
    border: 1px solid #BDBDBD;

Final Result

Brand Logo

Was this article useful?

Be notified when this page is updated. Optional.