Create an editable Value Stack section for your shopify website

A value stack is a small series of points that you want to convey to your customer as soon as they land on your home page.

This can be any number of things: guarantees, free shipping, free returns, payment options, awards etc etc

Example:

To add this to your shopify theme, start with going to Online Store > Edit Code

1) Create a new section and call it value-stack.

2) Add the below HTML/Liquid structure to this file.

<div class="value-stack vs-text-white vs-text-left">
      <div class="vs-container">
        <ul class="vs-banner-captions vs-row">
      
       {%- for block in section.blocks -%}
         {%- if block.settings.title != blank -%}  

{%- if forloop.length == 1 -%}
<li class="vs-column-12">
{%- elsif forloop.length == 2-%} 
<li class="vs-column-6">
{%- elsif forloop.length == 3-%} 
<li class="vs-column-4">
{% endif %} 
            <div class="vs-inner">

            {%- if block.settings.image != blank -%}
              {%- assign img_url = block.settings.image | img_url -%}
              <i class="vs-icon-img" style="background-image:url({{ img_url }});"></i>
            {% endif %}  
 <h4><strong>{{ block.settings.title }}</strong></h4>
{%- if block.settings.text != blank -%}{{ block.settings.text }}{% endif %} 
            </div>
          </li>
        {% endif %}  

    {%- endfor -%}
          
        </ul>
      </div>
    </div>

 

3) Below that add the following schema so that it can be customisable using Shopify’s theme customiser.

{% schema %}
  {
    "name": "Value Stack",
    "class": "value-stack-wrap",
    "settings": [
      {
        "type": "text",
        "id": "htmlcss",
        "label": "CSS Class"
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Icon And Text",
        "limit" : 3,
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Example title"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Subtitle Text</p>"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Value Stack",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}

 

4) Below that add the styling, feel free to modify to suit your websites colours/style.

{% stylesheet %}

.value-stack {background: #980000;}
.value-stack {padding-top:5px;padding-bottom:5px;}
.value-stack .h3{color:rgba(255,255,255,.7);text-transform:uppercase;}
.value-stack .vs-banner-captions{margin-top:0;margin-bottom:0;padding-left:0;list-style:none;}
.value-stack .vs-banner-captions .vs-inner{padding: 10px 15px 10px 64px;font-size:1.25rem;position:relative;}
.value-stack .vs-banner-captions .vs-inner .vs-icon-img{width: 53px;height: 53px;background-repeat:no-repeat;background-position:center center;background-size: cover;position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
.value-stack .vs-inner p {margin-bottom:0;color:#fff;}
.value-stack .vs-container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.value-stack .vs-row {display: -ms-flexbox;display: -webkit-box;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px;margin-left: -15px;}
.value-stack .vs-row .vs-column-12,
.value-stack .vs-row .vs-column-6,
.value-stack .vs-row .vs-column-4{position: relative;width: 100%; padding-right: 15px; padding-left: 15px;display:flex;justify-content:center;}


@media (min-width: 576px){
.value-stack .vs-container { max-width:var(--page-width);}
} 
@media (min-width: 768px){
 
  .vs-column-6 {-ms-flex: 0 0 50%;-webkit-box-flex: 0; flex: 0 0 33%;max-width: 33%;}
  .value-stack .vs-banner-captions .vs-inner{padding:15px 0 15px 57px;font-size:1rem;}
  .value-stack .vs-banner-captions .vs-inner .vs-icon-img{width: 49px;height: 49px;}
}
@media (min-width: 992px){

  .vs-column-4 {-ms-flex: 0 0 33.333333%;-webkit-box-flex: 0; flex: 0 0 33.333333%;max-width: 33.333333%;}
  .value-stack{padding-top:15px;padding-bottom:15px;}
  .value-stack .vs-banner-captions .vs-inner strong{font-size:1.175rem;}
  .value-stack .vs-banner-captions .vs-inner{padding:15px 0 15px 72px;font-size:1.0rem;}
  .value-stack .vs-banner-captions .vs-inner .vs-icon-img{width: 60px;height: 60px;}
}
@media (min-width: 1200px){

  .value-stack{padding-top:20px;padding-bottom:20px;}
  .value-stack .vs-banner-captions .vs-inner strong{font-size:1.375rem;}
  .value-stack .vs-banner-captions .vs-inner{padding: 20px 0 20px 71px;font-size:1.05rem;}
  .value-stack .vs-banner-captions .vs-inner .vs-icon-img{width: 65px;height: 65px;}
}
@media (min-width: 1430px){
  
  .value-stack{padding-top:25px;padding-bottom:25px;}
  .value-stack .vs-banner-captions .vs-inner strong{font-size:1.475rem;}
  .value-stack .vs-banner-captions .vs-inner{padding-left:93px;font-size:1.175rem;}
  .value-stack .vs-banner-captions .vs-inner .vs-icon-img{width: 80px;height: 80px;}
}

{% endstylesheet  %}

 

5) Press save and you can now go to the Shopify customiser (Online Store > Customise) and add your new value stack section.

Click the “Add Section” in the bottom left of the sections panel, and search for ‘Value Stack’.

Your new section will now be loaded ready for you to edit! Click on each column and customise all the fields to suit.

Let us know how you went!