Elements - Buttons

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

img-md
w-500 modal-image

Hover over the button to display the toolbox and choose the Settings ( ) icon.

Enter the Button Text to be displayed on the button.

img-md
w-600 modal-image

Set Button Type to one of the following:

img-md
w-500 modal-image

Set the Button Link using one of the following types:

• 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 example - ../luma-analog-watch.html

  Fully qualified URL example - 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, select the Open in new tab checkbox.

• Product - Enter a product name (partial or full) or SKU, then choose the product name in the list.

  note note
  NOTE
  The products are displayed in the list according to the Show out of stock products settings. For Multi Source merchants using Inventory Management, the products list is limited by the source assigned to the default website only.

  img-md
  w-600 modal-image

• Category - Enter a category name (partial or full) or click in the blank field to display the category tree. Then, choose the category name in the tree.

  img-md
  w-600 modal-image

• Page - Enter the name of a CMS page (partial or full) or click in the blank field to display the full list. Then, choose the name of the page in the search results list.

  img-md
  w-600 modal-image

Complete the advanced settings as needed.

When complete, click Save in the upper-right corner to apply the settings and return to the Page Builder workspace.

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

img-md
w-500 modal-image

Enter the text that you want to appear on the second button.

Click the new button to display its toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.

img-md
w-500 modal-image

Set Button Type to Secondary.

Set up the Button Link as needed.

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

img-md
w-600 modal-image

Complete the advanced settings as needed.

When complete, click Save to apply the settings and return to the Page Builder workspace.

Click the second button again on the stage and choose the Duplicate (+---------------------------+ | img-md | +===========================+ | w-20 | +---------------------------+ | | +---------------------------+) icon.

img-md
w-500 modal-image

Enter the text that you want to appear on the third button.

Click the third button to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.

img-md
w-500 modal-image

Update the Button Link as needed.

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

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

img-md
w-500 modal-image

Under Appearance, choose Stacked.

Set All Buttons are same size to Yes.

img-md
w-300

Update the remaining settings as needed, using the descriptions from Change settings for a button container.

When complete, click Save to apply the settings and return to the Page Builder workspace.

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

img-md
w-500 modal-image

Click the button that you want to move.

Select and drag the Move (+----------------------+ | img-md | +======================+ | w-20 | +----------------------+ | | +----------------------+) icon, which appears just before the button text, to a new position for the button within the button container.

img-md
w-500 modal-image

Click the button on the stage to display the toolbox and choose the Settings (+--------------------------+ | img-md | +==========================+ | w-20 | +--------------------------+ | | +--------------------------+) icon.

img-md
w-500 modal-image

Update the standard settings as needed.

• Button Text - Enter the text to be displayed on the button (can also be updated directly from the stage).

• Button Type - Determines the button format.

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Type	Description
  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.

• Button Link - Determines the destination page that is served when the button is clicked.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Option	Description
  URL	Uses either a relative or fully qualified URL to identify the destination page.
  Product	Identifies 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.
  Category	Identifies the destination page as a specific category or subcategory in the category tree.
  Page	Identifies the destination page as a specific CMS page.

Complete the advanced settings as needed.

To save the settings and return to the Page Builder workspace, click Save in the upper-right corner.

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

Update the Appearance settings as needed.

• Use the arrangement options to display the buttons either horizontally or vertically in the container:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Option	Description
  Inline	Arranges the buttons horizontally.
  Stacked	Arranges the buttons vertically.

• Set the All buttons are same size option according to your preference.

  When set to Yes, all buttons in the container have a consistent size, based on the length of the longest button text.

Complete the Advanced settings as needed.

When complete, click Save to apply the settings and return to the Page Builder workspace.

To control the positioning within the parent container, choose the Alignment:

Set the Border style applied to all four sides of the button or buttons container:

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

(Optional) Specify the names of CSS classes from the current style sheet to apply to the button or buttons 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 button or buttons container.

Enter the corresponding values in the diagram.