Common checkout customizations using Checkout Blocks

You can customize your checkout using Checkout Blocks in many ways. This page contains brief guides for some common checkout customizations using Checkout Blocks.

Create shipping discount tiers for specific cart values

If you want to create shipping discount tiers, such as "50% off shipping for orders over $50" and "free shipping for orders over $100", then you can create multiple automatic shipping discounts based on the Cart subtotal rule. The shipping discount with the highest discount applies for checkouts that meet the criteria for multiple discounts.

Steps:

1. From your Shopify admin, go to Sales channels > Checkout Blocks.
2. Click Discounts > Add discount > Amount off shipping.
3. In the Amount off shipping section, select Automatic discount, and then add your discount message (for example: 50% off shipping on orders $50+).
4. In the Discount configuration section, create your custom discount ruleset:
   1. In the Discount value drop-down menu, select Percentage, and then add 50%.
   2. In the Discount rules section, configure your ruleset:
      1. Click ⊕ Add rule.
      2. Configure your rule to be Cart subtotal > Is greater than or equal to > 50.00.
5. Optional: You can configure the following options:
   • Delivery options, to specify which delivery options you want the discount to apply to. When selecting specific options, you can choose to apply to options by title, price, or delivery type.
   • Combinations, to allow customers to combine the discount code with product or order discounts.
   • Active dates, to specify when the discount begins and whether it expires.
6. In the Summary section, review your discount details to confirm that it's set up correctly.
7. Click Save.
8. From your Shopify admin, return to Sales channels > Checkout Blocks.
9. Click Discounts > Add discount > Amount off shipping.
10. In the Amount off shipping section, select Automatic discount, and then add your discount message (for example: Free shipping for orders $100+).
11. In the Discount configuration section, create your custom discount ruleset:
    1. In the Discount value drop-down menu, select Free shipping.
    2. In the Discount rules section, configure your ruleset:
       1. Click ⊕ Add rule.
       2. Configure your rule to be Cart subtotal > Is greater than or equal to > 100.00.
12. Optional: You can configure the following options:
    • Delivery options, to specify which delivery options you want the discount to apply to. When selecting specific options, you can choose to apply to options by title, price, or delivery type.
    • Combinations, to allow customers to combine the discount code with product or order discounts.
    • Active dates, to specify when the discount begins and whether it expires.
13. In the Summary section, review your discount details to confirm that it's set up correctly.
14. Click Save.

Change the copy of 'OR' beneath accelerated checkout methods

You can move a shipping & payment icons block to display beneath the ---- OR ---- dividing line under the accelerated checkout payment options, and then change the "OR" text to be any custom text you prefer, such as "Accepted payment types" or "Supported shipping providers".

Steps:

1. Create and configure a shipping & payments icons block in the checkout and accounts editor.
2. Drag and drop the Shipping & Payments icons block to display beneath the Wallets section.
3. In your Shopify admin, go to Online store > Themes.
4. In the live theme, click ... > Edit default theme content.
5. Use the search bar to search the term alternative.
6. In the Checkout alternative payment method banner, change the Or field to include your custom text.
7. Click Save.

Display a message under specific shipping methods

You can use the dynamic content block to display a message under specific shipping methods during checkout.

For example, if you offer the shipping rates Standard, Express, and International Express, then you might want to display a brief message beneath the "International" shipping option to clarify that customs and duties charges aren't included in the displayed shipping price.

Steps:

1. From your Shopify admin, click Sales channels > Checkout Blocks.
2. Click Blocks, and then click Create block.
3. Click Dynamic content.
4. In the Block name section, type in a name for the block. This isn't displayed to your customers.
5. In the App block ID section, set the ID as either Dynamic or apply a specific ID number. Learn more about app block IDs.
6. In the Display rules section, configure your block display rules to display only when the specific shipping method is included. In this example, the rule is configured to display beneath International Express:
   1. Click ⊕ Add display rule.
   2. In the Select a rule dialog, select Shipping method title.
   3. Configure the rule as Contains > International.
7. In the Content section, add and customize the content of your block:
   1. In the Content items section, click ⊕ Add content item, and then select Text.
   2. In the content item dialog, add your brief message, such as Additional customs and duties may apply., and then click Done.
8. Optional: In the Publishing section, click the pencil icon to select the markets and checkout pages that you want the block to display in.
9. Click Save, and then set the block status as Active.
10. In the checkout and accounts editor, add the dynamic block to the Shipping rate section of the checkout.
11. Click Save.

Include a custom field on the order packing slip

Checkout Blocks lets your store collect customer data using a custom fields block and save that data to an order metafield.

Steps:

1. In Checkout Blocks, create and configure a custom field block. Ensure the block is configured to save as an Order metafield.
2. In your Shopify admin, go to Settings > Shipping and delivery.
3. In the Packing slips section, click Packing slip template.
4. In the location in the template that you want to display the custom field value, add the following line of code, replacing key with your custom field's key:

{{ order.metafields.checkoutblocks.key }}

1. Optional: If you want to conditionally display the custom field value, then you can surround the content with a Liquid if/else statement based on your required conditions.
2. Click Save.

You can use multiple custom field key values in the packing slip template. For example, this code would display an order's purchase order number (metafield using po as a key) only when the customer has agreed to the terms of the order (metafield using agree_to_terms as a key):

{% if order.metafields.checkoutblocks.agree_to_terms %}
    PO #{{ order.metafields.checkoutblocks.po }}
{% endif %}

Add a custom field on an order to the customer's profile

You can sync order data captured through custom field blocks by leveraging the Shopify Flow app.

You can download an example .flow file for adding a birth_date metafield value to a customer profile. Customize the values of this template to match the custom field keys that you want to add.

Steps:

1. In Checkout Blocks, create and configure a custom field block. Ensure the block is configured to save as an Order metafield.
2. In Shopify Flow, set up a custom workflow to run when an order is placed:
   1. Click Create workflow > Select a trigger.
   2. Select Shopify > Order created.
   3. On the trigger, click Then ⊕ > Condition.
   4. Click Add a variable, and then select Order > metafields > key.
   5. In the Key field, add the key for the custom field that you want to add to the customer profile, such as birth_date.
   6. On the condition, click Then ⊕ > Action.
   7. Click Shopify > Update customer metafield.
3. In the Update customer metafield section, input the following information:
   1. Metafield namespace: The metafield that you want to add, such as personal_info.
   2. Key: The metafield key, such as dob.
   3. Type: The type of value that you want to include, such as Date.
   4. Value:

{% assign dob_key = "birth_date" %}
{% for metafields_item in order.metafields %}
{% if metafields_item.key == dob_key %}
    {{metafields_item.value}}
{% endif %}
{% endfor %}

When your flow is complete, click Turn on workflow to activate it.