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

Size variations in the form of small squares, allowing users to see which sizes are available for the item.

Industries

  • Fashion

Wireframe

Size Variations

Coding Instructions

Open thumbs/product/template.html, and paste the below code directly underneath the <h3> line:

<div class="nSizeList">
    [%if [@has_child@]%]
        [%list_item_variations id:'[@sku@]'%]
            [%param *variation_body%]
                [%if [@specific_name@] eq 'Size'%]
                    [%if [@value_image@]%]
                    <div class="nSize">[@value_name@]</div>
                    [%else%]
                    <div class="nSize">[@value_name@]</div>
                [%/if%]
            [%/if%]
            [%/param%]
        [%/list_item_variations%]
    [%/if%]
</div>

Notes On The Above Code

This code outputs the "Size" specific values for every child variation of the product. In order for the above to work, the specific name itself must be set to "Size".

Step 2. Add the variations code to the list view thumb

Open thumbs/product/list.template.html, and paste the below code directly underneath the <p>[@short_description@]</p> line:

<div class="nSizeList">
    [%if [@has_child@]%]
        [%list_item_variations id:'[@sku@]'%]
            [%param *variation_body%]
                [%if [@specific_name@] eq 'Size'%]
                    [%if [@value_image@]%]
                    <div class="nSize">[@value_name@]</div>
                    [%else%]
                    <div class="nSize">[@value_name@]</div>
                [%/if%]
            [%/if%]
            [%/param%]
        [%/list_item_variations%]
    [%/if%]
</div>

Step 3. Add the CSS

Add the below CSS to the appropriate stylesheet:

.nSize {
    margin: 0;
    display:inline-block;
    border:1px solid #EFEFEF;
    padding:3px;
    font-size:12px;
    text-transform: uppercase;
}
.nSizeList {
    margin:0 0 10px;
    min-height:25px;
}
</style>

Final Result

Multi-Item Add

Download Files

Download Files