Add content block homepage shopify

This tutorial explains how to add content block homepage shopify. Here it explains how to create editable content blocks.

Add content block homepage shopify

Check here to find out how to add images blocks shopify theme.

Editable content block

As the first step create the backend sections as shown below.

create editable content block homepage shopify

Add new section

add_content_homepage_shopify
add content section homepage shopify

Create content blocks shopify

<div id="usp-block">
  <div class="usp">
    <ul> 
      <li>{{ section.settings.text-box-1 }}</li>
      <li>{{ section.settings.text-box-2 }}</li>
      <li class="last">{{ section.settings.text-box-3 }}</li>
    </ul> 
  </div>
</div>

{% schema %}
  {
    "name": "USP Block",
    "settings": [
     {
        "id": "text-box-1",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      },
      {
        "id": "text-box-2",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      },
      {
        "id": "text-box-3",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      }
]
  }
{% endschema %}

Add the block styling.

{% stylesheet 'scss' %}

.usp {
    background-color : #a89b88;
    margin : 1em;
}
.usp li {

    display: inline-block;
    color : #fff;
    width: 33%;
    height: 45px;
    line-height: 45px;
    margin-bottom: 0;
    text-align: center;
    border-right: 1px solid #000;
}
.usp li.last {
    border-right : none;
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Add content block homepage shopify

add_content_block_homepage_shopify

Also refer how to transfer shopify blog from one store to other.

Share this Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *

*