How To Create a Custom HTML Section in Shopify
The “Custom HTML” section allows you to add additional code to your homepage. The options are really endless here as this is the perfect place to add in any custom widgets or apps you’d like on your homepage.
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 store manually.
- 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 with the name section-custom-html
- Copy the below code for this file content.123456789101112131415161718192021222324252627282930313233343536373839<div id="huratips-custom-section">{%- if section.settings.title != blank -%}<div class="huratips-custom-title"><h2>{{section.settings.title}}</h2></div>{%- endif -%}<div class="huratips-custom-code">{{section.settings.custom_html}}</div><p class="hura-credit">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p></div><style>#huratips-custom-section{position:relative;}.huratips-custom-title{text-align:center;}.hura-credit{text-align:right;font-size:11px; 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": "Hura","settings": {}}]}{% endschema %}
- Click Save
In order to add a Custom HTML section, click into Customize (your Theme Editor) > Sections > Add Section > Custom HTML.
I hope this article is useful to you. Thanks for reading!
