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, tap 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, on the editor toolbar, choose Bold ( ).

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

    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. Tap 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 in the toolbox, choose Settings ( ).

    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 field descriptions at the end of this page for reference.

  3. When complete, tap Save in the upper-right corner to save the settings, and return to the Page Builder workspace. Then again in the upper-right corner, tap Save to save all changes to 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 text. Options:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns text along the left border of the container, with allowance for any padding that is specified.
CenterAligns text in the center of the container, with allowance for any padding that is specified.
RightAligns text along the right border of the 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:
DefaultApplies the default border style from the style sheet that is associated with the current theme.
NoneProvides no visible indication of container borders.
DottedThe container border appears as a dotted line.
DashedThe container border appears as a dashed line.
SolidThe container border appears as a solid line.
DoubleThe container border appears as a double line.
GrooveThe container border appears as a grooved line.
RidgeThe container border appears as a ridged line.
InsetThe container border appears as an inset line.
OutsetThe 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 which 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 text container. Enter the corresponding values in the visual representation of the container. Options:
MarginsThe amount of blank space, in pixels, that is applied to the outside edge of all sides of the text container. Options: Top, Right, Bottom, Left.
PaddingThe amount of blank space, in pixels, that is applied to the inside edge of all sides of the text container. Options: Top, Right, Bottom, Left