Add Dynamic Block

Use the Add Dynamic Block content type to add an existing dynamic block to the stage.

Dynamic Block

To add an existing dynamic block to the stage

  1. Navigate to the Page Builder workspace on the target page, block, product, or category.

  2. In the Page Builder panel, expand Add Content. Then, drag a Dynamic Block placeholder to the stage.

    Drag Dynamic Block to Stage

    • Hover over the empty Dynamic Block container. Then, choose Settings () in the toolbox.

      Dynamic Block Toolbox

    • On the Edit Dynamic Block page, click Select Dynamic Block.

      Select Dynamic Block

    • In the list, find the dynamic block that you want to insert, and click Select. Then, click Add Selected.

      Select Dynamic Block List

      A summary of the dynamic block information appears below.

      Dynamic Block Summary

    • Set Template to one of the following:

      Dynamic Block Block Template Choose this template to add a standalone block.
      Dynamic Block Inline Template Choose this template to insert the block content into text.

      Template

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

    • When complete, click Save to close the Edit Dynamic Block page and return to the Page Builder workspace.

  3. In the upper-right corner, click Save.

To edit dynamic block settings

  1. Hover over the dynamic block container on the stage. Then, choose Settings () in the toolbox and do the following:

    Dynamic Block Toolbox

    • To choose an existing dynamic block, click Select Dynamic Block.

      Select Dynamic Block

    • In the list of active blocks, Select the block that you want to add. Then, click Add Selected.

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

    • When complete, click Save to return to the Page Builder workspace.

  2. In the upper-right corner, click Save.

To duplicate a dynamic block

  1. Hover over the dynamic block container. Then, choose Duplicate () in the toolbox.

    The duplicate appears just below the original.

    Duplicate Dynamic Block

  2. To move the new dynamic block to a different position, hover over its container. Then, choose Move () in the toolbox.

  3. Select and drag the dynamic block until the red guideline appears at the new position.

    The top and bottom borders of each container appear as dashed lines while the dynamic block is moved.

To remove a dynamic block from the stage

  1. Hover over the dynamic block container. Then, choose Remove ( ) in the dynamic block toolbox.

  2. When prompted to confirm, click OK.

Add Dynamic Block Toolbox

Tool Icon Description
Move Moves the block container and its content to another position on the stage.
Settings Opens the Edit Block page, where you can choose the block, and change the properties of the container.
Hide Hides the current block container and its content.
Show Shows the hidden block container and its content.
Duplicate Makes a duplicate copy of the block container and its content.
Remove Deletes the block container and its content from the stage.

Dynamic Block Settings

Setting Description
Condition Defines the query that retrieves the products for the list.
Number of Products to Display Specifies the number of products to appear in the list.
Advanced  
Alignment Determines the horizontal alignment of the block. Options:
Default - Applies the alignment default setting that is specified in the style sheet of the current theme.
Left - Aligns the block along the left border of the parent container, with allowance for any padding that is specified.
Center - Aligns the block in the center of the parent container, with allowance for any padding that is specified.
Right - Aligns the block along the right border of the parent container, with allowance for any padding that is specified.
Border Determines the border style that is applied to all four sides of the block container. Options:
Default - Applies the default border style that is specified by the associated style sheet.
None - Does not provide any visible indication of the 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 a inset line.
Outset - The container border appears as a 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 border.
CSS Classes Specifies the names of CSS classes from the current style sheet which apply to the container. Separate multiple class names with a space.
Margins and Padding Determines the size, in pixels, of the outer margins and inner padding of the block container. Enter the corresponding values in the diagram.
Margins - The amount of blank space, in pixels, that is applied to the outside edge of all sides of the 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 container. Options: Top / Right / Bottom / Left