DocumentationCommercePage Builder

Elements - HTML Code

Last update: Thu Sep 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

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

w-500 modal-image
HTML Code toolbox
Tool
Icon
Description
Move
img-md
w-25
Move icon
Moves the HTML Code container to another valid place on the page.
Settings
img-md
w-25
Settings icon
Opens the Edit HTML Code page, where you can change the properties of the container.
Hide
img-md
w-25
Hide icon
Hides the HTML Code container.
Show
img-md
w-25
Show icon
Shows the hidden HTML Code container.
Duplicate
img-md
w-25
Duplicate icon
Makes a copy of the HTML Code container.
Remove
img-md
w-25
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.

    code language-html 
    <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.

    img-md
    w-600 modal-image
    Dragging a HTML Code placeholder to the stage

  5. Hover over the HTML container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | 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.

    img-md
    w-500 modal-image
    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.

Step 3: Preview the page

  1. In the Currently Active section, set Enable Page to Yes.

    img-md
    w-600 modal-image
    Enabling the page

  2. In the upper-right corner, click the Save arrow and choose Save & Close.

  3. Find the page in the grid and select View in the Actions column.

    img-md
    w-700 modal-image
    Preview the page headings with the new font family

Change HTML code settings html-settings

  1. Hover over the HTML container to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | Settings icon | +--------------------------+) icon.

  2. In the text box, edit the code as needed.

    HTML, CSS, and JavaScript code are supported. Code snippets that belong in the <head> section of the page can be entered here.

    The editor also provides buttons to insert special elements in the code:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Button Description
    Insert Widget… Click to insert a widget at the cursor’s position in the HTML text box.
    Insert Image… Click to insert an uploaded image or an image from the Gallery at the cursor’s position in the HTML text box.
    Insert Variable… Click to insert a variable at the cursor’s position in the HTML text box.

  3. Update the Advanced settings as needed.

    • To control the positioning of the code within the parent container, choose an Alignment:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      Option Description
      Default Applies the alignment default setting that is specified in the style sheet of the current theme.
      Left Aligns the list along the left border of the parent container, with allowance for any padding that is specified.
      Center Aligns the list in the center of the parent container, with allowance for any padding that is specified.
      Right Aligns the block along the right border of the parent container, with allowance for any padding that is specified.

      In the following example, the options are set to use a center alignment for the rendered code block.

      img-md
      w-600 modal-image
      Divider with a center alignment

    • Set the Border style applied to all four sides of the code container:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2
      Option Description
      Default Applies the default border style that is specified by the associated style sheet.
      None Does not provide any visible indication of the container borders.
      Dotted The container border appears as a dotted line.
      Dashed The container border appears as a dashed line.
      Solid The container border appears as a solid line.
      Double The container border appears as a double line.
      Groove The container border appears as a grooved line.
      Ridge The container border appears as a ridged line.
      Inset The container border appears as an inset line.
      Outset The container border appears as an outset line.

    • If you set a border style other than None, complete the border display options:

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      Option Description
      Border Color Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
      Border Width Enter the number of pixels for the border line width.
      Border Radius Enter the number of pixels to define the size of the radius that is used to round each corner of the border.

    • (Optional) Specify the names of CSS classes from the current style sheet to apply to the container.

      Separate multiple class names with a space.

    • Enter values, in pixels, for the Margins and Padding to determine the outer margins and inner padding of the code container.

      Enter the corresponding values in the diagram.

      table 0-row-2 1-row-2 2-row-2
      Container area Description
      Margins The amount of blank space that is applied to the outside edge of all sides of the container. Options: Top / Right / Bottom / Left
      Padding The amount of blank space that is applied to the inside edge of all sides of the container. Options: Top / Right / Bottom / Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d