PaaS only

Elements - HTML Code

Last update: September 7, 2023

CREATED FOR:

  • Beginner
  • Intermediate
  • User

Use the HTML Code content type to add snippets of HTML, CSS, and JavaScript code in the Page Builder stage. For example, you might want to add custom HTML, declare a CSS class that can be applied to an element on the page. Or, you might want to add a snippet of code for a logo, button, or banner that you received from a third-party provider.

HTML Code toolbox

HTML Code toolbox

ToolIconDescription
Move Move icon Moves the HTML Code container to another valid place on the page.
Settings Settings icon Opens the Edit HTML Code page, where you can change the properties of the container.
Hide Hide icon Hides the HTML Code container.
Show Show icon Shows the hidden HTML Code container.
Duplicate Duplicate icon Makes a copy of the HTML Code container.
Remove Remove icon Deletes the HTML Code container and its content from the stage.
NOTE
Hidden elements are stored in the database and invisible to customers. However, these elements are visible to search engines and other bots that crawl your site. They are also returned as part of the content if requested through an API call with an attribute of invisibility, unless you remove them from the stage.

Add HTML code

The following example demonstrates how to embed Google Font code and declare custom heading classes that override the current stylesheet.

Step 1: Choose a Google font

  1. Visit the Google Fonts site and choose the font family that you want to use.

  2. Copy the generated code that is to be embedded in the <head> section of the page and paste it temporarily into a text editor.

    • Embed Font code
    • CSS Rule

  3. Add the font-family rule to each heading class, enclosing the heading classes in a <style> tag.

    This code is pasted into Page Builder.

    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

Step 2: Add the code to the page

  1. In the Admin sidebar of your store, go to Content > Elements > Pages.

  2. Find the page where the font is to be available and open it in edit mode.

  3. Scroll down and expand the Content section.

  4. In the Page Builder panel, expand Elements and drag an HTML Code placeholder to a row, column, or tab set on the stage.

    Use the red guideline to position the divider either before or after another content container in the row, column, or tab set.

    Dragging a HTML Code placeholder to the stage

  5. Hover over the HTML container to display the toolbox and choose the Settings ( Settings icon ), icon.

  6. In the text box, paste the embed Google Fonts code and style declarations that you prepared.

    To make it easier to read, you can enter a few spaces to indent the code.

    HTML code and styles

  7. Update the remaining settings as needed (see Change HTML code settings for details).

  8. In the upper-right corner, click Save to apply the settings and return to the Page Builder workspace.

    The new font renders when the page is viewed through a browser.