How to create custom section in shopify

Create section in shopify

Today we discuss to create a custom section in Shopify.
Sometimes we want to display some extra content dynamically.

Steps to create section:

1) From Shopify admin, go to Online Store > Themes.
2) Find the theme you want to edit and click Actions > Edit code.
3) Go to Sections > Add a new section > Enter section name (eg:-welcome_home).
4) Click on newly created section.

Source code exmaple :-

<div class="container">
    <div class="custom-content-box">
        {% if section.settings.heading != blank %}
         <h4>{{ section.settings.heading }}</h4>
        {% endif %}                
      	<p>{{ section.settings.content }}</p>       
    </div>
    </div>
      <div class="custom-content-img">
        {%- if section.settings.myimage != blank -%}
          {{ section.settings.myimage | img_url:'512x'| img_tag: section.settings.myimage.alt }}
        {%- else -%}
          {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}        
    </div>
</div>
{% schema %}
  {
    "name": "Welcome section Test",
    "class": "welcome-section",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Hello User"
      },      
      {
        "type": "textarea",
        "id": "content",
        "label": "Content"        
      },
      {
        "type": "image_picker",
        "id": "myimage",
        "label": "Image"
      }
    ],
    "presets": [
        {
        "name": "Welcome section Test",
        "category": "Welcome section"
        }
      ]
  }
{% endschema %}

{% stylesheet %}
 
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

5) Add shown above and SAVE it.

6) Click the Customize theme.

7). Under Sections select “Add section”.

Enjoy create custom section in shopify !


Related Post – Add Color Swatches In Shopify

Like us on Facebook and Linkedin for more updates.

Leave a Reply

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

Back To Top