Text

Use the Text content type to add a container and text editor with a “What You See Is What You Get” view of the content to the stage. In addition, you can add links, images, variables, and widgets to the text from the editor toolbar. You can access the text editor directly from the stage or from the toolbox Settings. Changes made directly to the stage are saved automatically. To learn more, see Using the Editor.

Formatted Text on Banner

To add text

  1. In the Page Builder panel under Elements, drag a Text placeholder to a row, column, or tab set on the stage.

    Drag Text Placeholder to Stage

  2. Use the editor to enter and format text, as needed. To learn more, see Using the Editor.

    Text Editor with Content

  3. When complete, click Save.

The Insert Link button in the editor makes it easy to add a hyperlink to an image in the gallery. However, it can also be used to create an inline link in text, provided that you have the URL in advance. Unlike the Widget button, the Insert/Edit link button is not integrated with pages, products, or categories in the store.

To create a link for a telephone number or email, see Adding Custom Variables.

  1. In the storefront, navigate to the page that is to be the target destination for the link. You can either paste the fully qualified URL or a relative URL that omits the reference to your store domain.

    Full URL https://mystore.com/women/tops-women/tees-women.html
    Relative URL ../women/tops-women/tees-women.html
  2. In the text editor, select the Shop Tees > text in the third line. Then, choose Bold () on the editor toolbar.

  3. Again select the “Shop Tees >” text in the third line. Then, choose Insert/edit link () on the editor toolbar.

    Formatted Text

  4. In the Url field, enter the relative link that you prepared.

  5. Set Target to None.

    This setting opens the page in the same browser window, rather than opening a new tab.

  6. In the Title field, enter Shop Tees.

    The Title link attribute is used by some browsers as a tooltip.

  7. Click OK to save the link and return to the Page Builder workspace.

    Link Detail

To change text settings

  1. Hover over the text container. Then, choose Settings ( ) in the toolbox.

    Because the text container is tightly nested inside another container, make sure that you have the correct toolbox.

    Text Toolbox

  2. Update the content and settings as needed using the descriptions at the end of this page for reference.

  3. When complete, click Save and return to the Page Builder workspace. Then, click Save to save the page.

Text Toolbox

Tool Icon Description
Move Moves the text container to another valid place on the page.
(label) TEXT Identifies the current container as a text element.
Settings Opens the text container properties in edit mode.
Hide Hides the text container.
Show Shows the hidden text container.
Duplicate Makes a duplicate copy of the text container.
Remove Deletes the text container and its content from the stage.

Text Settings

Setting Description
Editor Used to enter new text or edit existing text. You can also enter and edit text, and add links, images, variables, and widgets from the editor toolbar.
Advanced  
Alignment Determines the horizontal alignment of the text in relation to its parent container. Options:
Default - Applies the default setting that is specified in the style sheet of the current theme.
Left - Aligns the text along the left border of its parent container, with allowance for any padding that is specified.
Center - Aligns the text in the center of its parent container, with allowance for any padding that is specified.
Right - Aligns the text along the right border of its parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all sides of the text container. Options:
Default - Applies the default border style from the style sheet that is associated with the current theme.
None - Provides no visible indication of 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.
Border Color Determines the color of the container border. Specify the color by choosing a swatch, clicking the color picker, or by entering a valid color name or equivalent hexadecimal value.
Border Width Determines the width in pixels of the container border.
Border Radius Specifies the size of the radius that is used to round each corner of the container border.
CSS Classes Specifies the names of CSS classes from the current style sheet that apply to the text. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the row. Enter each corresponding value in the row container diagram.
Margins - The amount of blank space, in pixels, that is to be applied to the outside edge of all sides of the text container. Options: Top / Right / Bottom / Left
Padding - The amount of blank space, in pixels, that is to be applied to the inside edge of all sides of the text container. Options: Top / Right / Bottom / Left