The Easy Way to Add a Custom HTML Section to Shopify

Adding an HTML Shopify section to your site will give you more control over its design, allowing you to go beyond the default customization options offered by your theme and make your storefront much more memorable.

There are two ways you can add HTML sections to Shopify: using Shopify’s built-in theme editor or using the agile Shogun Page Builder app. We’ll guide you through both of these methods below — and we’ll also show you how Shogun’s AI Section Builder allows you to create your own custom sections without writing any code at all.

Adding Custom HTML to a Page Using Shopify Sections

To add an HTML section with Shopify’s built-in theme editor, you’ll first need to log in to your Shopify account, select ‘Online Store,’ and then click on the ‘Customize’ button next to your theme.

Navigate to the page you’d like to edit and hover your cursor over where you want the new section to go in the left sidebar. Click on the plus sign icon that pops up, and then select ‘Custom Liquid’ (this refers to Liquid, Shopify’s open-source templating language, but you can also use HTML here).

Once you add the section, you can then enter in your HTML code, and you’ll see the output of your code appear directly in the editor. For this example, we used the following code to add a scrolling banner to the top of the page to promote a sale:

<style>
.scrolling-banner-container {
  width: 100%; /* Adjust as needed */
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #f0f0f0; /* Example background color */
  padding: 10px 0;
}

.scrolling-banner-text {
  display: inline-block;
  padding-left: 100%; /* Starts off-screen to the right */
  animation: scrollText 10s linear infinite; /* Animation: name duration timing-function iteration-count */
}

.scrolling-banner-text:hover {
  animation-play-state: paused; /* Pause animation on hover */
}

@keyframes scrollText {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0); /* Moves the text entirely off-screen to the left */
  }
}
</style>

<div class="scrolling-banner-container">
  <p class="scrolling-banner-text">
    🔥 Big Summer Sale! Get 50% off everything! | Free Shipping on orders over $100! | Limited Time Offer - Shop Now! 🔥
  </p>
</div>

Using Shogun to Add HTML to Your Shopify Store

Shogun Page Builder offers multiple ways for you to customize your Shopify site with HTML code. 

For example, there’s an option available in Shogun Page Builder’s element library that’s designed specifically for this purpose.

First, open Shogun Page Builder and select the page you want to add your custom HTML to.

Then, drag the HTML module from the ‘Elements’ tab to anywhere you want on the page.

Click on the module to open the HTML editor. Here, you can enter whatever HTML code you wish. Note that the HTML editor doesn’t support templating languages like Liquid.

Shogun Page Builder also allows you to create custom reusable elements for your Shopify pages using HTML, Liquid, CSS, and JavaScript. This feature can save you an enormous amount of time if you plan to add the same HTML code to many different pages on your store.

To create a new reusable element with HTML, open the ‘Developer tools’ option in the left-hand navigation bar of Shogun Page Builder — this will take you to the ‘Custom Elements’ section of the app. Then, click on the ‘Create new…’ button.

Within the custom element editor, there are three tabs to accommodate different types of code. Note that the ‘Liquid’ tab supports Liquid and HTML.

After you’ve created a custom element in Shogun Page Builder, you’ll see it listed in the ‘Elements’ library of the main editor. To use it, simply drag it from the sidebar into the content area.

Using Shogun to Create Custom Sections without Writing Any Code

If you don’t know how to code (or don’t want to put in all the time and effort it takes to code new sections from scratch), Shogun has the perfect solution for you — with the AI Section Builder, you can create whatever kind of content you want by just asking for it. Absolutely no programming knowledge or skill is required. 

Indeed, to create a custom Shopify section with this tool, all you need to do is follow these three easy steps:

Step 1. Enter your prompt

After installing the AI Section Builder app on your Shopify store, enter a description of the section you want to make into the text field. Then, select ‘Submit.’ 

Step 2. Enter follow-up prompts if necessary

The initial output may not be exactly what you were picturing in your head — in that case, you can submit follow-up prompts to make any necessary adjustments. 

At the top of the app, you’ll find preview tabs that allow you to check out what the section looks like on both desktop and mobile devices. You can use this feature to confirm that you’re happy with every aspect of your section before moving on to the next step. 

Step 3. Add the section to your theme

Once you’re done designing your section, click on the ‘Add to theme…’ button. 

After that, you’ll be able to add the section to any of your pages directly through Shopify’s built-in theme editor.

That’s all there is to it!

Using the AI Section Builder takes much less time than manually coding solutions yourself, which means you’ll be able to test out many more ideas than you would have been able to otherwise. With this extra efficiency, you can finally discover what it takes to unlock the next level of growth for your online business.