How To Create a Custom HTML Section in Shopify?

The Custom HTML section allows you to add additional code to your website. Most of the themes usually have this section available, but if your theme is not available then you can follow this article to know how to add a Custom HTML section to your Shopify How To Create a Custom HTML Section in Shopify? store.

How To Create a Custom HTML Section in Shopify?expoundsofttechsolution How To Create a Custom HTML Section in Shopify?

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • In the Sections directory, click Add a new section custom-html.liquid.
  • After entering the section name, click on Create section.
  • Copy the below code and paste it to the custom-html.liquid file.
<div id="custom-section">  
  {%- if section.settings.title != blank -%}
  <div class="custom-title"><h2>{{section.settings.title}}</h2></div>  
  {%- endif -%}    
  <div class="custom-code">{{section.settings.custom_html}}</div>
  <p class="view-btn"><a href="#" >Read More</a></p>
</div>


<style> 
  #custom-section {position:relative;}
  .custom-title {text-align:center;}
  .view-btn {text-align:center;font-size:12px; margin-bottom:20px;font-style:italic;}
</style>

{% schema %}
  {
    "name": "HTML",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
      {
        "type":"textarea",
        "id": "custom_html",
        "label": "HTML"
      }
    ],
    "presets": [
      {
        "name": "Custom HTML",
        "category": "ESTS",
        "settings": {

        }
      }
    ]
  }
{% endschema %}
  • Click Save.

If you need any help please contact us.