Line item content blocks

The Line item content block lets you display specific content beneath line items in the checkout order summary when certain conditions in the customer's checkout are met. Unlike other types of content block which can display on multiple sections of the checkout, this block displays only in the checkout order summary within the Items in cart section.

This type of block can be useful for displaying information, such as delivery estimates or sale policies for specific items. For example, you can add a plain text message about shipping delays for a specific product that displays only when the shipping state is New York. For another example, you can display a pop-up Final sale message that displays only when a customer's cart includes a product that's been tagged with #final-sale.

You can display the line item block content in one of the following formats:

  • plain text
  • badge
  • tooltip
  • modal pop-up

You can use Markdown to format your content and Liquid to add variables to your content. CSS, HTML, and Javascript aren't supported for content.

If you display more than one line item content block on a single line item, then you can reorder the blocks using their sort priority.

Create a line item content block

You can create and configure a line item content block in the Checkout Blocks app. After you create a line item 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 Line item content.
  4. In the Block name section, enter a name for the block. This isn't displayed to your customers.
  5. In the Display rules section, configure your block display rules:
    • To display the block to all customers and on all line items, 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.
  6. In the Content section, add and customize the content of your block:
    1. In the Display type menu, select the format for your content.
    2. Optional: If your block is a Tooltip or Open in modal, then type in a content Title.
    3. In the Content text field, type in your content. You can format the content using Markdown and Liquid.
    4. Optional: In the Styling section, you can customize the style of the content, including icons or text alignments and colors.
  7. Optional: In the Publishing section, click the pencil icon to select the markets and checkout pages that you want the block to display in.
  8. 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 line item content block to checkout

Line item content blocks display in checkout as part of the Line item edit block. You must first create a line item edit block with Line item content blocks as an active option in order for line item content to display. Existing line item content blocks must also be set to Active in order to display in checkout.

You only need to add the Line item edit block one time to the checkout in order for all applicable line item content blocks to display their content. If you have multiple line item content blocks active, then you can select which order they display in by adjusting their sort priority.

Steps:

  1. From your Shopify admin, go to Sales channels > Checkout Blocks.
  2. Click Blocks.
  3. Click the line item 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 line item edit 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 Order summary section.
    3. Click the Line item edit Checkout Blocks option.
    4. Optional: Use the Preview block id (For testing purposes) field and the block's preview ID to preview how the block displays in checkout.
  8. Click Save.
Can’t find the answers you’re looking for? We’re here to help.