Magento Commerce, 2.3.x

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
  • 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:

    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. Options:

    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.

    for button container

    Appearance

    Arranges the buttons either horizontally or vertically in the container. Options:

    Inline

    Arranges the buttons horizontally.

    Stacked

    Arranges 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:

    Default

    Applies the default setting that is specified in the style sheet of the current theme.

    Left

    Aligns buttons along the left border of the container, with allowance for any padding that is specified.

    Center

    Aligns buttons in the center of the container, with allowance for any padding that is specified.

    Right

    Aligns 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:

    Default

    Applies the default border style from the style sheet that is associated with the current theme.

    None

    Does not provide any 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. 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:

    Margins

    The 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.

    Padding

    The 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.