How to add Custom HTML section in Shopify with 4 steps

0 comments

how to add custom html section in Shopify

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?

what is Shopify html section 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?

benefits of Shopify html section

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”.

create custom html section in Shopify

- Click “Add a new section” under “Sections” directory, name it “custom-HTML” then hit “Done”.

create new html section in Shopify theme

- 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

How to add html section in Shopify

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.

how to add custom html section on Shopify pages

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.

add the code to Shopify customhtml section

- Move it to the desired location

move custom html section 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.

custom html Shopify section

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. 

Install EComposer Shopify Page Builder

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. 

Shopify html section

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

Add Shopify Rich Text Section

Create an Shopify header section

Shopify Snippets vs Sections

Community_d05546c4-86c8-4c33-89f1-5e563b717b7b