Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Size Variations (Product Page)

Size variations as small clickable blocks, rather than using a dropdown.

Industries

  • Fashion

Wireframe

Brand Logo

Coding Instructions

Step 1. Add the updated HTML into the variation code

Open up the product template here: /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@]">

I.e.…

<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