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

One comment on “Add content block homepage shopify

  1. Tanya O Toole on

    Hi ,
    Just wondering if you would be able do actually design a website for me, a simple one 5 pages in total .I have a small food business but do not have the computer skills to even use word press.
    I would be grateful if you could let me know if this is possible.

    Thanks,
    Tanya

    Reply

Leave a Reply

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

*