EComposer is #1 Drag & Drop Page Builder that helps you create professional Shopify websites without any coding. Provide 100+ design elements and 300+ templates, there’s no limit to what you can build. Install EComposer for free today and start building the store you’ve always wanted.
How to add Custom HTML section in Shopify with 4 steps
Table Of Contents
Unleash the Hidden Potential of Your Shopify Store: Dive into the world of customizations and creativity with our comprehensive guide on adding Custom HTML sections. Elevate your brand's online presence by harnessing the magic of personalized coding.
We will unravel the benefits of integrating HTML sections, empowering you to create an online space uniquely yours and offering unparalleled design freedom and functionality. Let's embark on this journey to redefine your store's aesthetics and captivate your audience like never before.
What is Shopify Custom HTML section?
A Shopify Custom HTML section is a versatile tool that empowers you to infuse custom HTML, CSS, and JavaScript code into specific sections of your online store. Unlike conventional Shopify sections, which often offer predefined functionalities, HTML sections allow you to craft tailor-made elements, styles, and interactive features.
This advanced level of customization enables you to bring your unique design concepts to life, enhance user experience, and create a store that stands out in the digital landscape. With Shopify HTML sections, you're not just limited to the built-in options – you have the power to shape your store exactly as you envision it.
What is Shopify Custom HTML section used for?
Shopify Custom HTML sections are a powerful tool for enhancing the customization and functionality of your online store. They are used to:
- Custom Design Elements: HTML sections allow you to create custom design elements that perfectly match your brand's aesthetics. Whether it's unique banners, buttons, or layouts, you can craft them to align with your visual identity.
- Interactive Features: You can add interactive elements like sliders, animations, and custom forms using HTML sections, providing a dynamic and engaging user experience.
- Embedding Third-Party Content: If you want to integrate external content like videos, maps, or social media feeds, HTML sections offer the flexibility to embed these elements seamlessly.
- Advanced Styling: With HTML and CSS, you can fine-tune the styling of specific sections, ensuring consistency and alignment with your brand guidelines.
- Custom Scripts: Incorporate JavaScript functionality to create custom behavior, such as personalized pop-ups, live chat widgets, or advanced analytics tracking.
- Experimental Features: HTML sections can be used for testing new features or experimental design elements without altering your entire store's layout.
- Unique Functionality: When standard Shopify sections don't offer the functionality you need, HTML sections allow you to implement unique features and capabilities.
By leveraging Shopify HTML sections, you can transcend the boundaries of standard templates, making your online store genuinely one-of-a-kind and tailored to your specific business needs.
How to create a custom HTML section for Shopify stores
HTML section is not always available in your theme editor; hence, we will guide you on creating a custom HTML section in your Shopify theme first.
Step 1: Create a Custom HTML section on the Shopify theme
- From your Shopify admin, navigate to “Online Store > click on Themes > Customize > Edit code”.
- Click “Add a new section” under “Sections” directory, name it “custom-HTML” then hit “Done”.
- Copy the code below, then add it to the “Custom HTML” section.
<div id="ecomposer-custom-section">
{%- if section.settings.title != blank -%}
<div class="ecomposer-custom-title"><h2>{{section.settings.title}}</h2></div>
{%- endif -%}
<div class="ecomposer-custom-code">{{section.settings.custom_HTML}}</div>
<p class="ecomposer-credit">Powered by <a href="//www.ecomposer.io" target="_blank">ecomposer.io</a></p>
</div>
<style>
#ecomposer-custom-section{position:relative;}
.ecomposer-custom-title{text-align:center;}
.ecomposer-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": "ecomposer",
"settings": {
}
}
]
}
{% endschema %}
- Click on “Save” to keep the changes
Step 2: Add Shopify HTML section
- Now, back to Theme Customization. Open the page you want to add the custom HTML section.
- Click “Add section”, find “Custom HTML”, and see it’s available now on the section lists. Hit it to add this HTML section to your Shopify store.
Step 3: Add the HTML code to the added the section
- Open the “Custom HTML section” you’ve added to the Shopify page to add HTML code.
- Add the HTML code to the section. In this example, you want to show an onboarding video at the top of the page; hence, you will include HTML embed code from YouTube in the custom HTML section.
- Move it to the desired location
Step 4: Save
Click the “Save” button on the right side to save all the changes and bring them to the live site.
How to add a custom HTML section by EComposer easily
EComposer is the ultimate Shopify page builder app that stands out with its extensive array of advanced features. From an intuitive drag-and-drop editor to an AI-powered content generator, EComposer streamlines your store's creation process.
With an expansive library of conversion-optimized sections and page templates, you can perfectly customize your site. Enjoy benefits like an AJAX cart, enhancing customer convenience. The user-friendly interface makes crafting pages a breeze, while 24/7 live chat support ensures assistance when needed.
The code element is one of the best features of EComposer, which allow you to add embed code from the third-party free app, including HTML code.
Especially you do not need to customize anything on the Theme Code Library, which is complex for you. Furthermore, you also can customize everything with EComposer’s Code element from colors, fonts, effects, etc.
Check out the detailed guide here to quickly learn How to Add HTML Embed Codes to Your Shopify Store. Get started with EComposer free plan and witness the transformation yourself!
Final words
Incorporating a Custom HTML section into your Shopify store opens up possibilities for customization and enhanced functionality. Following the simple process outlined in this guide, you can effortlessly introduce unique design elements, interactive features, and personalized touches that resonate with your brand and engage your customers.
As you embark on this journey of creativity and versatility, remember that the power of HTML lies in your hands. So, let your imagination run wild and transform your Shopify store into an exceptional online destination.
=================
Add EComposer Next generation page builder Here
Follow Us on Facebook
Join Official Community
Others also read
Use Shopify section groups for theme customization
Add Blog section on Shopify pages
comments