Dynamic content blocks

The Dynamic content block allows you to display various types of content dynamically in your checkout when certain conditions are met.

For example, if you're running a campaign to donate a portion of all T-shirt sales to charity, then you can create a special Thank-you for your support banner that displays in checkout only when a customer buys a T-shirt.

Supported content items for dynamic content blocks

Dynamic content blocks support the following types of content items:

  • Accordion
  • Banner
  • Benefits
  • Button
  • Divider
  • Heading
  • Image
  • Spacer
  • Text

You can add multiple content items in a single dynamic content block.

Dynamic content blocks also support a limited list of Markdown formatting when writing text:

  • H1, H2, and H3 Headings
  • Bold, italics, and strikethroughs
  • Images
  • Linebreaks
  • Links
  • Ordered and unordered lists
  • Horizontal rules

To add some personalization to your content, you can also use Liquid variables.

Create a dynamic content block

You can create and configure a dynamic content block in the Checkout Blocks app. After you create a dynamic content block, you must add it to the checkout.

Steps:

  1. From your Shopify admin, go to Sales channels > Checkout Blocks.
  2. Click Blocks, and then click Create block.
  3. Click Dynamic content.
  4. Select the template for the field that you want to use. If you don't want any fields or settings pre-populated, then select Blank template.
  5. In the Block name section, enter a name for the block. This isn't displayed to your customers.
  6. In the App block ID section, use the drop-down menu to apply a specific ID number. Learn more about app block IDs.
  7. In the Display rules section, configure your block display rules:
    • To display the block to all customers, leave the Display rules section empty.
    • To create a display rule, click ⊕ Add display rule, and then configure your rule. Add as many display rules as required.
  8. In the Content section, add and customize the content of your block:
    1. Optional: In the Section header field, click Add title (optional) to add a header to your block.
    2. In the Content items section, click ⊕ Add content item, and then select the content item that you want to add.
    3. In the content item dialog, configure the details and styling of your content item, and then click Done.
    4. Optional: Add more content items and customize them as required.
  9. Optional: In the Styles section, click Customize design to customize the block's container and column styles and sizes.
  10. Optional: In the Publishing section, click the pencil icon to select the markets and checkout pages that you want the block to display in.
  11. Click Save.

Your block is saved as Draft by default. When you're ready to publish the block, in the Status section, select Active from the drop-down menu.

Add a dynamic content block to checkout

You can add an existing dynamic content block to the checkout. Blocks must be set to Active in order to display in checkout.

If you want to preview the block in the checkout and accounts editor, then copy the block's unique preview ID from the Checkout Blocks app.

Steps:

  1. From your Shopify admin, go to Sales channels > Checkout Blocks.
  2. Click Blocks.
  3. Click the dynamic content block that you want to add to checkout.
  4. Click More actions ⌄ > Add to checkout.
  5. Optional: In the Preview block id section, click the clipboard icon to copy the block's unique preview ID.
  6. Select your desired checkout configuration, and then click Open editor.
  7. In the checkout and accounts editor, add the dynamic content block to your checkout:
    1. Navigate to the checkout page that you want to add the block to.
    2. Click ⊕ Add app block in the section that you want to add the block to.
    3. Click the Dynamic content Checkout Blocks option.
    4. Configure the details of the checkout block, and select the corresponding app block ID.
    5. Optional: Use the Preview block id (For testing purposes) field and the block's preview ID to preview how the block displays in checkout.
    6. Optional: Drag and drop the dynamic block to change the location on the checkout page where you want the block to display.
  8. Click Save.
Can’t find the answers you’re looking for? We’re here to help.