Overview of blocks for customizing your checkout using Checkout Blocks

Blocks in the Checkout Blocks app, built with UI extensions, help you customize checkout by providing app blocks that you can drag and drop directly into the checkout and accounts editor. Some block types add visual customization elements to your checkout, such as information and warning banners or line item messaging. Other block types add interactive elements to your checkout, such as variant or quantity selectors for line items, or checkboxes or text fields for customers to select or input additional information.

Checkout Blocks can support up to 30 active blocks per block type. You can have up to 30 custom fields, 30 dynamic content blocks, or other types of blocks one time. You can create more than 30 blocks, but only the first 30 active blocks display in checkout.

The blocks that display in checkout depend on the display rules that you've applied to the block, the order in which blocks are prioritized, as well as whether or not an app block ID is being used to always display a particular block in a particular location.

Available app blocks in Checkout Blocks

Checkout Blocks supports multiple types of app blocks. The block type depends on the type of content that you want to add to your checkout, whether you want to add conditional display rules, and to which pages you want to add the block.

Some blocks can't be added to certain checkout pages due to the function of the block itself. For example, a custom field block relies on a customer to input additional information, such as adding a custom note or checking a box. This information must be captured before the order is completed, so the custom field can't be added to post-purchase pages, such as the thank you or order status page.

Table listing the available Checkout Blocks app blocks, along with the checkout pages they're supported on and a brief description of each app block.
App block	Supported pages	Description
Address blocker	Checkout	Block checkout based on address format rules.
Custom field	Checkout	Include custom fields in checkout, such as an agree-to-terms checkbox or a gift messaging field.
Dynamic content	Checkout Thank you Order status	Display content such as text, banners, and buttons based on conditional rules that you set. This block is available to merchants on the Basic Shopify plan or higher.
Line item edit	Checkout Thank you Order status	Allow customers to edit line items in the checkout order summary, such as including a variant or quantity selector. Also acts as a container for line item content.
Line item content	Checkout Thank you Order status	Display line-item-specific messaging, such as `Final sale`.
Shipping & Payment icons	Checkout	Display icons for supported shipping and payment methods.
Static content	Checkout Thank you Order status	Unlike dynamic content blocks, this content displays to all customers and supports text and banners. This block is available to merchants on the Basic Shopify plan or higher.

Learn more about creating app blocks.

Block analytics

Every active block has Views analytics that display at the top of the block details page in the Checkout Blocks app. These analytics track a count of how many times the block has displayed in checkout.

By default, the block displays analytics for Today, but you can click the date drop-down menu and use the date selector to review analytics for specific days or date ranges.

To reset analytics for the block, click ⋮ > Reset analytics. This can't be undone.

Display rules for blocks

Many block types, such as dynamic content and custom field blocks, let you set conditions which define which circumstances must be met for your checkout block to display in checkout. You can set multiple display rules per block, and you can also define whether all rules must be met or any one rule must be met in order to display the block.

Display rule syntax varies depending on the type of block you're building, but in general, rules are built using the following elements in order, when applicable:

The category of rule, such as Product type or Cart total.
The logical operator, such as Is or Is not, or Is greater than, Contains, or Ends in.
The parameter that defines the specific value that you want, such as Dresses or 50.00.

For example, to display a banner to high-spending customers to prompt them to create an account, you can build a block with the following display rules:

Only show when: All rules pass
Cart total > Is greater than or equal to > USD > 100.00
Customer is logged in > False

According to this set of display rules, your banner displays only when the customer has spent $100 USD or more, and they're not already logged into a customer account. The banner isn't displayed when customers are logged in, and it also doesn't display when customers don't spend up to the threshold of $100.

App block IDs

Some block types, such as custom field or dynamic content, have the option to specify an App block ID. An app block ID of 0 is selected by default.

An app block ID allows you to add different blocks of the same type in different sections of checkout. You can think of the checkout app block in the editor as a placeholder, which can load in multiple possible blocks depending on any display rules that you configure within the block. You can add up to 10 different app block 'placeholders' in each checkout page.

Example 1: Use different app block IDs to specify different locations for different blocks of the same type.

You want to display a required checkbox in the main content area, but with an optional gift note in the sidebar. Both of those blocks use the custom field block type, so you can add the Custom field app block twice in the checkout and account editor, and place each block to where you want them to display. However, you need to be able to set which particular block goes in which location.

The required checkbox can be set to have the app block ID of 1, and the optional gift note can be set to have the app block ID of 2. In the checkout and accounts editor, you can then set the Custom field app block in the main content area to use app block ID 1 to display the required checkbox, and the Custom field app block in the sidebar to use app block ID 2 to display the optional gift note.

Example 2: Use the same app block ID to specify a single location for blocks of the same type with different display rules.

You offer 3 automatic shipping discounts:

a 10% discount on orders over $25
a 25% discount on orders over $50
free shipping on orders over $100

To encourage customers to add more to their cart before completing their order, you want to add a dynamic banner in the Shipping method section of checkout that prompts customers to add more to their cart based on the shipping discount they're closest to achieving.

You can set up 3 dynamic content blocks that all have the same app block ID, such as 6:

Table of three example dynamic content blocks and their applicable display rules and content.
Block name	Display Rule	Banner content
Shipping Tier 1	Cart total > Is less than > $25.00	"Your cart qualifies for a 10% shipping discount if you spend $25 or more."
Shipping Tier 2	Cart total > Is less than > $50.00	"Your cart qualifies for a 25% shipping discount if you spend $50 or more."
Shipping Tier 3	Cart total > Is less than > $100.00	"Your cart qualifies for free shipping if you spend $100 or more."

Make sure that Shipping Tier 1 block has the highest sort priority, and Shipping Tier 3 block has the lowest sort priority. In this case, when a customer spends less than $25, even though the display conditions for all 3 blocks have technically been met, the Tier 1 block displays with the most appropriate message. When a customer spends more than $25 but less than $50, the Tier 2 block displays at the higher priority, even though the conditions for the Tier 3 block have also technically been met.

Finally, in the checkout and accounts editor, you can add a single dynamic content app block with an app block ID of 6 to the Shipping rate section, and the most appropriate of the 3 possible dynamic content blocks that you created will display in that 'container' space during checkout. When a customer spends $100 or more, no dynamic content displays in that area of the checkout because no display rules have been met for dynamic content blocks with an app block ID of 6.