Buttons

Use the Buttons content type to add either an individual button, or a set of buttons to the stage. Buttons can be arranged horizontally or vertically, and added directly to rows, columns, tabs, and banners on the stage.

Banner with Button

To add an individual button

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

    Drag Button to Stage

  2. If necessary, hover over the container to make the toolbox appear. Then, choose Settings ( ).

    Button Toolbox

  3. Enter the Button Text that is to appear on the button.

    Button Text

  4. Set Button Type to one of the following:

    Primary Applies the primary button style from the current style sheet.
    Secondary Applies the secondary button style from the current style sheet if applicable.
    Link Creates a hyperlink rather than a button.

    Primary and Secondary Buttons

  5. Set Button Link to one of the following:

    URL

    • Set Button Type to “URL.”

    • Enter the destination URL for the link.

      The URL can be either a relative link to a product or page in your store, or a fully-qualified URL.

      Relative URL ../luma-analog-watch.html
      Fully-qualified URL http://mystore.com/luma-analog-watch.html
    • If the link goes to a different website, you can keep the current page open to your store by opening the link in a new browser tab.

      To prevent the visitor from navigating away from your store, mark the Open in new tab checkbox.

    Product

    • Set Button Type to “Product.” Then, do one of the following:

      • Enter a partial or full product name.
      • Enter the product SKU.
    • Choose the product name in the list.

      Choose Product for Button Link

    Category

    • Set Button Type to “Category.” Then, do one of the following:

      • Enter a partial or full category name.
      • Click the blank Select field, and find the category in the tree.
    • Choose the category name in the tree.

      Choose Category for Button Link

    Page

    • Set Button Type to “Page.” Then, do one of the following:

      • Enter a partial or full name of a CMS page.
      • Click the blank Select field, and find the page in the list.
    • Choose the name of the page in the search results list.

      Choose CMS Page for Button Link

  6. Complete the remaining settings as needed, using the field descriptions at the end of this topic for reference.

  7. When complete, tap Save in the upper-right corner to close the Edit Button page. Then again in the upper-right corner, tap Save.

To add a set of buttons

  1. Follow the previous instructions to add an individual button to the stage.

  2. Hover over the container. Then in the toolbox, choose Add ( ).

    Add Button

  3. Type the text that you want to appear on the second button.

  4. Click the new button to display its toolbox. Then, choose Settings ( ), and do the following:

    Add Button

    • Set Button Type to “Secondary.”

    • Set up the Button Link as needed.

    In this example, the link is a relative URL that goes to the Contact Us page.

    Contact Us Button Settings

    • Update the remaining settings as needed, using the field descriptions at the end of this topic for reference.

    • When complete, tap Save to close the Edit Button page.

  5. Click the second button again. Then in its toolbox, choose Duplicate ( ).

    Duplicate Button

  6. Type the text that you want to appear on the third button.

  7. Click the third button. In its toolbox, choose Settings (  ). Then, do the following:

    Third Button Toolbox

    • Update the Button Link as needed.

    • In the upper-right corner, tap Save to close the Edit Button page and return to the Page Builder workspace.

  8. This time, hover over the container. In the toolbox, choose Settings ( ). Then, do the following:

    Buttons Toolbox

    • Under Appearance, choose “Stacked.” Then, set All Buttons are same size to “Yes.”

      Stacked Buttons of the Same Size

    • Update the remaining settings as needed, using the field descriptions at the end of this page for reference.

    • When complete, tap Save to close the Edit Buttons page, and return to the Page Builder workspace.

    The complete stacked button set appears on the stage, with one primary button and two secondary buttons.

    Stacked Buttons on Stage

  9. In the upper-right corner, tap Save.

To move buttons

  1. Click the button that you want to move.

    The Move () icon appears just before the button text.

  2. On the Move ( ) icon, hold down the mouse button, and drag the button to a new position in the button set.

    Moving a Button

To change button settings

  1. To make the toolbox appear, do one of the following:

    • For an individual button, click the button.
    • For a button set, hover over the container.

    Button Toolboxes

  2. In the toolbox, choose Settings ( ).

  3. Update the settings as needed, using the field descriptions at the bottom of this page for reference.

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

Individual Button Toolbox

Tool Icon Description
Settings Opens the Edit Button page, where you can change the properties of the button.
Duplicate Makes a duplicate copy of the button.
Remove Deletes the button from the stage.

Button Set Toolbox

Tool Icon Description
Move Moves the button container to another valid place on the page.
Add Adds a new button to the container.
(label) BUTTON Identifies the current container as a button element.
Settings Opens the Edit Buttons page, where you can change the properties of the container.
Hide Hides the button container.
Show Shows the hidden button container.
Duplicate Makes a duplicate copy of the button container.
Remove Deletes the button container and its content from the stage.

Button Settings

Setting Description
for Individual button
Button Text The text on the button can be updated directly from the stage, or from the Edit Button page.
Button Type Determines the button format. Options:
PrimaryApplies the primary button style from the current style sheet.
SecondaryApplies the secondary button style from the current style sheet, if applicable.
LinkCreates a hyperlink rather than a button.
Button Link Determines the destination page that is served when the button is clicked. Options:
URLUses either a relative or fully-qualified URL to identify the destination page.
ProductIdentifies the destination page based on the product name or SKU. The product name can be searched for based on either a partial or full name. The product is then chosen from the search results list.
CategoryIdentifies the destination page as a specific category or subcategory in the category tree.
PageIdentifies the destination page as a specific CMS page.
for button container
Appearance Arranges the buttons either horizontally or vertically in the container. Options:
InlineArranges the buttons horizontally.
StackedArranges the buttons vertically.
All buttons are same size When the checkbox is marked, all buttons in the container have a consistent size, based on the length of the longest button text. Options: Yes / No
Advanced
Alignment Determines the horizontal alignment of buttons in the container. Options:
DefaultApplies the default setting that is specified in the style sheet of the current theme.
LeftAligns buttons along the left border of the container, with allowance for any padding that is specified.
CenterAligns buttons in the center of the container, with allowance for any padding that is specified.
RightAligns buttons 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 four sides of the button container. Options:
DefaultApplies the default border style from the style sheet that is associated with the current theme.
NoneDoes not provide any 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. You can 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 buttons. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the button 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 button 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 button container. Options: Top, Right, Bottom, Left