# Welcome to Checkout Builder I'm glad you're here. :) Checkout Builder is the next evolution of Shopify's `checkout.liquid`, offering a powerful, no-code solution for customizing your checkout experience using Shopify's Checkout Extensibility framework. Whether you're transitioning from `checkout.liquid` or starting fresh, Checkout Builder empowers you to customize your checkout, order, and thank you pages with ease. {% hint style="success" %} Find Checkout Builder on the Shopify App Store: {% endhint %} *** ### 🚀 Get Started Ready to enhance your Shopify checkout? * **Install Checkout Builder**: Find us on the [Shopify App Store](https://apps.shopify.com/checkout). * **Explore Our Guides**: Dive into our extensive documentation for step-by-step tutorials on setting up widgets, customizations, discounts, and more. *** ### 🤝 Need Support? Our friendly support team is here to assist you every step of the way. * **Live Chat**: Within your Shopify store, open Checkout Builder and click the chat icon in the bottom right corner to chat with us live or leave a message. * **Email Us**: Reach out directly at . For more details, visit our [Support](https://help.checkoutbuilder.com/support) page. *** We’re excited to help you build a checkout experience that delights your customers and drives conversions! # \[TEMPLATE] How To: Setup a Widget #### 📝 Description *Provide a brief overview of what this widget does.*Example: The Countdown Timer widget adds urgency to your product pages by showing a live timer, increasing conversions through scarcity. *** #### ⭐️ Popular / Recommended Use Cases * Promote limited-time offers or flash sales * Drive urgency during product launches * Highlight seasonal discounts * Encourage faster checkout on product pages *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="SO0Dp37DNtQd3Pe7Hv6W" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Checkout Limitations: Shopify Plus vs Standard Plans The limitations outlined below are determined by Shopify’s plans, not by Checkout Builder. ### ✅ Shopify Plus Exclusive Features | Feature | Shopify Plus | Other Plans | | -------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------- | | **Checkout Extensibility (Full support)** | ✅ Yes – Full customization via UI extensions, Functions, Branding API | 🚫 Limited support (branding only, some Functions) | | **Custom Checkout (checkout.liquid)** | ✅ Yes *(legacy support)* | 🚫 No | | **Shopify Functions** (e.g., shipping, payment customizations) | ✅ Full access | 🚫 Limited support (Discounts, Payment & Delivery methods) | | **Shopify Scripts (Script Editor)** | ✅ Yes *(legacy feature)* | 🚫 No | | **Advanced Branding (via API/UI extensions)** | ✅ Yes | ✅ Basic only | | **B2B Checkout (B2B on Shopify)** | ✅ Yes (Company profiles, price lists, net terms) | 🚫 No | *** ### ✅ What You Can Still Do Without Shopify Plus Even if you're not on Shopify Plus, you can still customize a lot! Here's what’s possible: | Feature Type | What You Can Do | Description | | ------------------- | ------------------------ | ----------------------------------------------------- | | 🧾 Payment Methods | Rename | Change the name of a payment method shown at checkout | | | Reorder | Change the order in which payment methods appear | | | Remove | Remove a payment method you don’t want to show | | 🚚 Delivery Methods | Rename | Change the name of a shipping/delivery method | | | Remove | Remove a delivery method from your checkout | | 💸 Discounts | Apply shipping discount | Set up automatic discounts on shipping costs | | | Amount off order total | Automatically reduce the total order value | | | Amount off product price | Automatically reduce the price of specific products | > 🟡 *No Shopify Plus required for any of the above!* *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Frequently Asked Questions Find quick answers to the most common questions. ### 💡 General #### **What is Checkout Builder?** Checkout Builder is a tool that allows merchants to customize and enhance the look, feel, and functionality of their Shopify checkout using drag-and-drop widgets—no coding required. #### **Do I need technical skills to use Checkout Builder?** Not at all. Checkout Builder is designed for merchants of all experience levels. Our interface is intuitive and requires no coding knowledge. *** ### 🔧 Widgets #### **Why isn't my widget showing in the checkout?** Follow the steps in the interactive demo below (it'll take 30 seconds) to verify that you have installed your widget correctly. {% @arcade/embed flowId="SO0Dp37DNtQd3Pe7Hv6W" url="" %} #### **Can I add multiple widgets to my checkout?** Yes, you can add as many widgets as you need. Just ensure they don't conflict visually or functionally with each other. #### **What types of widgets are available?** We offer widgets for branding, upsells, trust badges, messaging, custom fields, and more. You can preview all available widgets in the **Widgets** section. *** ### 🎨 Customization & Branding #### **Can I match my widget design with my brand?** Absolutely. Most widgets support branding options like color, font, and custom content to align with your store’s identity. #### **Can I request a custom widget?** Yes! Reach out via the chat icon or email us at with your request and requirements. *** ### 🛠️ Troubleshooting #### **I see an error message—what should I do?** Take a screenshot or video of the issue and send it to us via the chat or email. Include any steps taken so we can replicate and resolve it quickly. *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Support Our friendly support team is here to help. Learn what information to share and when you can expect a response. 1. Open up Checkout Builder within your Shopify store, click on the chat icon (💬) in the bottom right and chat with us live.
2. Alternatively, you can always email us directly at ## What information should I share? To help *us* help *you* as efficiently as possible, please be sure to send us all relevant details: * If your support request involves setting up widgets or checkout branding, please provide a brief overview of your requirements and, if possible, a reference or example. * If your support request relates to a specific widget, please make sure to let us know the name of that widget. * If your support request involves adding a widget or feature, please share all relevant details and requirements. * If you are running into an error message, please pass along the error message in full. * Can you send us a screenshot to show us what you're seeing? Or, can you send us a short video to show us the steps that you are taking? These are extremely helpful. ## When will I get a response? We aim to respond to every message within the same day. At busy times this might not be possible, but we'll always get back to you as soon as we are able. You can close the live chat as any replies will be sent directly to your email. # Advanced branding editor Ready to take your Checkout's branding to the next level? Your in good hands with our one-of-a-kind branding editor with preview. ## Exciting updates on the way. Full documentation coming soon Looking to get started now? No worries. We'll help you get setup within 24 hours, [contact us](/overview/support). *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Basics Looking to get started with migrating from checkout.liquid? Kick things off below with a quick and easy walkthrough of Checkout Builder. ## Create your first Widget Create an upsell widget at checkout in just a couple of minutes, leverage the walkthrough tutorial below. Ready to take your widgets to the next level? [Learn more](/widgets). {% @arcade/embed flowId="tBisajgutYAke1HANkJx" url="" %} ## Update your Checkout Branding Take your checkout to the next level using our branding editor. Customize various elements beyond the capabilities of the checkout editor. {% @arcade/embed flowId="BiwwQ24T64a2Uad68val" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Widgets Learn how to utilize all of Checkout Builders various widget types. ## Checkout Upsell Ready to build your first upsell widget? Let's get started.\ \ Select the 'Create a widget' button from the homepage. You can use this button or the + icon in the top right of the dashboard.

Create your first widget! Missing this button? Navigate to the + icon in the top right corner of your dashboard.

Next, select the 'Checkout Upsell' widget type.\ \ If you're just getting started, select the blank template. Once you create your first widget, you can save it as a template. This will allow you to easily create similar widgets later with your favorite conditions, styling attributes and settings.

Select a template: To get started, select a blank template. You'll be able to save widgets you create as templates later. It'll make it easier if you'd like to have a number of similar widgets, based on different conditions or priorities.

Alright! Now we can get started on creating your widget. Give your widget a name and select ANY position. All of these options are available to you, but they don't make a difference as to where your widget will be placed at checkout. You'll have full control of that later..\ \ Now, it's time to work on setting our display rules! If set as none, your widget will display to ALL customers. If set as 'automatic', we can utilize a number of various conditions to display the widget to specific customers on your online store.\ \ In this example, I have selected 'automatic'. Similar to native collection filters within Shopify, we have the ability to include multiple conditions. You can select whether you'd like at least 1 condition to be met, or all conditions to be met to display the widget. In this tutorial, I have created only 1 condition, so I will leave this as 'all conditions'.

Display rules: Select visibility type, condition criteria, and condition types. You can utilize multiple conditions within a single widget.

Now that your display rules are set, we can quickly add your widget content. You have the ability to add a title and subtext to your widget, you can also control the CTA text here, such as changing your 'Add to cart' to just 'Add'.

Content: Easily add a title and subtext to your widget. Modify the add to cart button label if you'd like!

We can now determine which products will display within your Checkout Upsell. You have the option to utilize Shopify's product recommendations (this requires [Shopify's Search & Discovery app](https://apps.shopify.com/search-and-discovery)), selecting specific products, or collection. \ \ Utilizing Shopify's product recommendations will allow you to configure what recommendations are shown to the customer. There are multiple options provided for the 'product source', such as the option I selected. You're also able to use different product recommendation modes, either 'related' or complementary. Complementary products will need to be created manually within the Search and Discovery app. \ \ Within this section, you can also configure advanced settings such as minimum quantity to add (the quantity that will be added when the users interacts with the 'Add to cart button), as well as minimum products to show. You can also enable the quantity selector button for your widget here.\ \ Interested in giving a discount to customers that add products to their cart from this widget? You can also setup a discount here, specific to this widget. Reward customers for increasing your AOV!

Products: Setup what products are shown within your widget at checkout. Configure advanced settings and discounts.

## Scheduling **Overview:** Functionality and potential issues associated with scheduling in Checkout Builder. Note that the time selection operates in the user's local timezone rather than the store's timezone. **Details:** 1. **Default Scheduling Behavior:** * Scheduling is enabled, but if start/end is not modified, the time of saving will replace both values. 2. **Immediate Activation:** * If the start time is older than the time of save, the start time will be set to the time of save, activating the widget immediately. 3. **Handling Older or Same End Time:** * If the end time is older or the same as the start time (after the condition in point 2), the end time will be ignored, and the widget will not be drafted in this scheduling round. 4. **Cancellation of Previous Scheduling:** * Changing the start/end after scheduling (saving) will cancel the previous scheduling. Even if it is halfway done (e.g., start has been applied and waiting for the end), the previous scheduling will be overridden. 5. **Cancellation Options:** * Cancellation can be performed by: a) Changing the scheduled time (cancels old scheduling and creates a new one). b) Deleting the widget. c) Changing the status to something other than scheduling (either active or draft) - Note: Not recommended. d) Scheduling the widget again with the current time or past time without enabling the end date. This ensures the scheduling function runs with the start time (current time) and stops any previous scheduling. **Special Considerations:** * During the step to start (making the widget active), if the widget's status is not "Scheduled," the start and end steps will be canceled. This ensures the widget is scheduled before activation. * If the start time has passed and the start step has already run, the status is "Active." In this case, the end run will be canceled if the status is not "Draft" or "Scheduled." An edge case is noted where changing the status to draft and then active may affect the outcome at the end time. **Note:** This document provides a comprehensive overview of the scheduling process within the Checkout Builder application, including default behaviors, immediate activation, handling of end times, cancellation options, and special considerations. Please follow these guidelines to ensure smooth scheduling functionality within Checkout Builder. *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Frequently Asked Questions (FAQ) 💡 General ## Why is my widget not displaying at checkout? 1. After creating a widget, you will receive a shortcode. This shortcode is used to associate the correct widget with the block you are adding to your Checkout Profile. 2. Once you've added a block to your checkout, paste the shortcode value into shortcode field, be sure that is the same shortcode you were given when creating this widget. 3. Your widget may not be displayed because you have not set it to active within Checkout Builder. 4. Your widget will not be displayed if selected conditions in Checkout Builder are not fullfilled 5. You widget will not be displayed if it's not published on any of the checkout pages i.e Checkout, Thank you page or Order status page.\ \ **See the tutorial below that walks you through all of the steps above.** {% @arcade/embed flowId="rb2ewTtTA0wSb24NNAyE" url="" %} # How To Guides Looking to get started with migrating from checkout.liquid? Kick things off below with a quick and easy walkthrough of Checkout Builder. # Discounts # Product discounts #### 📝 Description This function allows you to automatically apply discounts to specific products in the checkout, helping boost conversions and tailor offers based on factors like cart contents, customer tags, or order value, no discount codes needed. *** #### ⭐️ Popular / Recommended Use Cases * Automatically apply discounts for customers with specific tags, like "VIP" or "Subscriber." * Offer discounts when customers add multiple units of the same product to their cart. * Apply targeted discounts to promote slow-moving or seasonal items. * Discount a product when purchased alongside related items to increase average order value. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="UdA8MYi9M4h69Qh1iDQP" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Shipping discounts #### 📝 Description This function allows you to automatically apply discounts to shipping rates at checkout based on conditions like order value, destination, or cart contents, no discount codes required. *** #### ⭐️ Popular / Recommended Use Cases * Automatically remove shipping fees when the cart total exceeds a certain amount. * Discount or waive shipping for customers in specific locations. * Reduce or eliminate shipping costs when certain product combinations are in the cart. * Apply temporary shipping discounts during promotional events to increase conversions. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="cOZrCsbVg4YyUWAVrYCA" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Order discounts #### 📝 Description This function lets you automatically apply discounts to the entire order total based on conditions like cart value, customer tags, or order contents. It helps increase average order value, reward loyal customers, and streamline promotions, no discount codes needed. *** #### ⭐️ Popular / Recommended Use Cases * Offer discounts when a customer’s cart total exceeds a certain threshold (e.g., $100+). * Apply automatic discounts during sales events without requiring coupon codes. * Give order-level discounts to tagged groups like “Wholesale” or “First-Time Buyers.” * Automatically discount orders for returning customers to build loyalty. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="hHNK8elgZOmlqtZPdW6r" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Delivery customizations # Rename a Delivery Method #### 📝 Description This widget lets you change the display name of delivery options shown at checkout, helping you align shipping names with your brand tone or provide clearer options for customers. *** #### ⭐️ Popular / Recommended Use Cases * Rename generic labels like "Standard Shipping" to "Eco-Friendly Shipping" or "Express Saver." * Help customers understand delivery speeds by using clear names like "2-Day Delivery" or "Next-Day Shipping." * Rename similar options to highlight differences, such as "Courier - Fast" vs. "Courier - Standard." * Use region-specific language or terms to make shipping options more relatable to your audience. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="K3OUoVFALYrwP9fvjkLt" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Remove a Delivery Method #### 📝 Description This customization allows you to hide specific delivery options at checkout, helping streamline the experience and prevent customers from selecting methods that don't apply to their order or region. *** #### ⭐️ Popular / Recommended Use Cases * **Limit delivery to specific regions** by hiding methods unavailable in certain areas. * **Simplify checkout** by removing unused or redundant shipping options. * **Control shipping strategy** for high-value or fragile items by forcing specific delivery methods. * **Prevent free shipping misuse** by removing it for certain products or order conditions. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="EOr1Xnsm6ILCAMP1lgd4" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Payment customizations # Rename a Payment Method #### 📝 Description This widget allows you to change the display name of payment methods at checkout, making them more intuitive, branded, or aligned with your store’s tone and messaging. *** #### ⭐️ Popular / Recommended Use Cases * Rename "Credit Card" to "Pay Securely by Card" for a more trustworthy feel. * Change "Shop Pay" to "Shop Pay (Fast & Secure)" to highlight benefits. * Translate or adjust payment names for international customers.. * Rename lesser-used options to emphasize benefits, like "Bank Transfer (No Fees)." *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="wknkpTj9UrL3wEvWtujd" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Reorder a Payment Method #### 📝 Description This widget lets you change the order in which payment methods appear at checkout, allowing you to prioritize preferred options and create a smoother, conversion-friendly experience for your customers. *** #### ⭐️ Popular / Recommended Use Cases * Move your most cost-effective or highest-converting payment method to the top. * Place the most familiar or widely used options first for faster checkouts. * Temporarily move certain payment options higher during promotions or events. * Ensure the most important payment options appear first on smaller screens. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="nHzVtrsNe20ZIPpEnhNT" url="" %} #### 💡 Additional Information The order of payment methods in the app determines their order on the checkout page. For example: * The method placed **1st** in the app will appear **1st** at checkout. * The method placed **2nd** will appear **2nd**, and so on. Any payment methods **not selected** in Checkout Builder will automatically appear **below** the last reordered method, in their original Shopify order. *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Remove a Payment Method #### 📝 Description This widget allows you to hide specific payment methods at checkout, giving you greater control over which options customers can use based on your business needs, location, or promotion strategy. *** #### ⭐️ Popular / Recommended Use Cases * Hide methods that aren’t supported or practical in certain countries. * Remove high-fee payment options to encourage cost-effective alternatives. * Eliminate rarely used payment methods to streamline customer decision-making. * Hide specific methods (like “Buy Now, Pay Later”) for certain sales or discount events. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="Pvmjrd1yrH2vluf0RxgQ" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Conditions code editor Available for "Custom Sections" widget, contact support to get access to it. ## Liquid Template Editor Guide This guide explains how to write Liquid templates in our editor, including available objects, tags, and best practices. ### Template Structure Liquid templates support three main types of markup: #### Output Display dynamic content using double curly braces: ```liquid {{ cart.cost.total }} ``` #### Control Tags Control flow using special tags: ```liquid {% if customer.loggedIn %} Hello, customer! {% endif %} ``` #### Comments Document your code: ```liquid {# Quick inline comment #} {% comment %} Detailed explanation here {% endcomment %} ``` ## Available Objects ### Lines The `lines` array contains information about each item in the cart. Each line item represents a product variant with its quantity and associated data. #### Properties **`id`** * **Type**: `string` * **Description**: Unique identifier for the line item * **Example**: `"gid://shopify/LineItem/12345"` **`quantity`** * **Type**: `number` * **Description**: Number of items of this variant in the cart * **Example**: `2` **`cost`** * **Type**: `object` * **Description**: Cost information for this line item * **Properties**: * `totalAmount.amount` (`number`): Total cost for this line item including quantity **`merchandise`** * **Type**: `object` * **Description**: Product variant information * **Properties**: * `id` (`string`): Variant identifier * `title` (`string`): Product variant title * `selectedOptions` (`array`): Selected variant options * `name` (`string`): Option name (e.g., "Size") * `value` (`string`): Option value (e.g., "Small") * `product` (`object`): Parent product information * `id` (`string`): Product identifier * `vendor` (`string`): Product vendor name * `productType` (`string`): Product category/type * `requiresShipping` (`boolean`): Whether the item needs shipping * `sku` (`string`): Stock keeping unit **`attributes`** * **Type**: `array` * **Description**: Custom attributes attached to the line item * **Properties**: * `key` (`string`): Attribute key * `value` (`string`): Attribute value #### Usage Example ```liquid {% for line in lines %} ID: {{ line.id }} Quantity: {{ line.quantity }} Total: {{ line.cost.totalAmount.amount }} {# Access variant details #} {{ line.merchandise.title }} SKU: {{ line.merchandise.sku }} {# Show selected options #} {% for option in line.merchandise.selectedOptions %} {{ option.name }}: {{ option.value }} {% endfor %} {% endfor %} ``` ### Cart The `cart` object contains overall information about the shopping cart, including totals and metadata. #### Properties **`currency`** * **Type**: `string` * **Description**: The currency code for the cart * **Example**: `"USD"` **`note`** * **Type**: `string` * **Description**: Customer notes attached to the cart * **Example**: `"Please gift wrap"` **`attributes`** * **Type**: `array` * **Description**: Custom attributes for the entire cart * **Properties**: * `key` (`string`): Attribute key * `value` (`string`): Attribute value **`quantity`** * **Type**: `number` * **Description**: Total number of items in the cart * **Example**: `5` **`cost`** * **Type**: `object` * **Description**: Detailed cost breakdown * **Properties**: * `total` (`number`): Final cart total including all costs * `subtotal` (`number`): Sum of line items before tax/shipping * `tax` (`number`): Total tax amount * `shipping` (`number`): Shipping cost #### Usage Example ```liquid Cart Summary: Total Items: {{ cart.quantity }} Subtotal: {{ cart.cost.subtotal }} Tax: {{ cart.cost.tax }} Shipping: {{ cart.cost.shipping }} Total: {{ cart.cost.total }} {% if cart.note != blank %} Note: {{ cart.note }} {% endif %} ``` ### Customer The `customer` object provides information about the current user's status and preferences. #### Properties **`loggedIn`** * **Type**: `boolean` * **Description**: Whether the customer is currently authenticated * **Example**: `true` **`acceptsEmailMarketing`** * **Type**: `boolean` * **Description**: Customer's email marketing preference * **Example**: `true` **`acceptsSmsMarketing`** * **Type**: `boolean` * **Description**: Customer's SMS marketing preference * **Example**: `false` #### Usage Example ```liquid {% if customer.loggedIn %} Welcome back! Marketing Preferences: {% if customer.acceptsEmailMarketing %} ✓ Email updates enabled {% endif %} {% if customer.acceptsSmsMarketing %} ✓ SMS updates enabled {% endif %} {% endif %} ``` ### Shipping The `shipping` object contains information about shipping methods and address details. #### Properties **`state`** * **Type**: `string | null` * **Description**: Shipping destination state/province code * **Example**: `"AL"` **`country`** * **Type**: `string | null` * **Description**: Shipping destination country code * **Example**: `"US"` **`selected`** * **Type**: `object` * **Description**: Currently selected shipping method * **Properties**: * `label` (`string | null`): Display name of the shipping method * `type` (`'shipping' | 'local' | 'pickup' | 'pickupPoint' | null`): Display type of the shipping method **`target`** * **Type**: `object | null` * **Description**: Target shipping method information. Only works when the widget is added under Delivery methods. * **Properties**: * `isCurrentSelected` (`boolean`): Whether this method is selected * `code` (`string`): Shipping method identifier * `title` (`string`): Display name * `cost.amount` (`number`): Shipping cost amount #### Usage Example ```liquid Shipping to: {{ shipping.state }}, {{ shipping.country }} {% if shipping.selected %} Selected Method: {{ shipping.selected.label }} Cost: {{ shipping.target.cost.amount }} {% else %} Please select a shipping method {% endif %} ``` ### Order The `order` object contains information about the current order being processed. #### Properties **`payment.selected`** * **Type**: `object` * **Description**: Selected payment method information * **Properties**: * `type` (`'creditCard' | 'deferred' | 'local' | 'manualPayment' | 'offsite' | 'other' | 'paymentOnDelivery' | 'redeemable' | 'wallet' | 'customOnsite' | null`): Payment method type **`metafields`** * **Type**: `array` * **Description**: Additional custom data attached to the order * **Properties**: * `key` (`string`): Metafield identifier * `value` (`string`): Metafield value * `namespace` (`string`): Grouping namespace. use "checkoutbuilder" to access fields created with "Custom fields" widget. #### Usage Example ```liquid Payment Method: {{ order.payment.selected.type }} Order Details: {% for field in order.metafields %} {% if field.namespace == "checkoutbuilder" %} {{ field.key }}: {{ field.value }} {% endif %} {% endfor %} ``` ## Filters The editor supports various filters to transform values. Filters are applied using the pipe character (`|`). ### String Filters | Filter | Description | Parameters | | ------------ | --------------------------------------- | ---------------------------------------------------------------------------------------- | | `replace` | Replaces all occurrences of a substring |

search (string, required)
replace (string, required)

| | `upcase` | Converts string to uppercase | None | | `downcase` | Converts string to lowercase | None | | `capitalize` | Capitalizes the first character | None | | `append` | Appends a string to the end | `suffix` (string, required) | | `prepend` | Prepends a string to the beginning | `prefix` (string, required) | | `strip` | Removes whitespace from both ends | None | | `split` | Splits a string into an array | `separator` (string, required) | #### Example ```liquid {% assign title = "hello world" %} {{ title | capitalize | replace: "world", "everyone" }} Output: "Hello everyone" {{ " spaces " | strip }} Output: "spaces" ``` ### Number Filters | Filter | Description | Parameters | | ------------ | ------------------------------ | ------------------------------- | | `ceil` | Rounds up to nearest integer | None | | `floor` | Rounds down to nearest integer | None | | `round` | Rounds to nearest integer | None | | `divided_by` | Divides by a number | `divisor` (number, required) | | `minus` | Subtracts a number | `subtrahend` (number, required) | | `plus` | Adds a number | `addend` (number, required) | | `times` | Multiplies by a number | `multiplier` (number, required) | #### Example ```liquid {{ 4.6 | ceil }} Output: 5 {{ 10 | divided_by: 3 | round }} Output: 3 {{ product.price | times: 0.8 | round }} Output: Price with 20% discount ``` ### Array Filters | Filter | Description | Parameters | | ------- | ------------------------------- | -------------------------------------------- | | `first` | Returns the first element | None | | `last` | Returns the last element | None | | `join` | Joins elements with a separator | `separator` (string, optional, default: " ") | | `size` | Returns array length | None | #### Example ```liquid {% assign fruits = "apple,banana,orange" | split: "," %} {{ fruits | join: " and " }} Output: "apple and banana and orange" {{ fruits | first }} Output: "apple" {{ fruits | size }} Output: 3 ``` ### Filter Chaining You can chain multiple filters together. They are applied from left to right. ```liquid {{ "hello world" | capitalize | replace: "world", "everyone" | append: "!" }} Output: "Hello everyone!" ``` > ⚠️ **Important Notes** > > * Maximum 3 filters per variable (see complexity rules) > * Filters must match the input type they accept > * Some filters change the value type (e.g., `split` converts string to array) > * Use intermediate variables for complex transformations ## Control Flow ### Conditional Tags Available tags: * `if`/`elsif`/`else`/`endif` * `unless`/`endunless` Example: ```liquid {% if cart.cost.total > 100 %} High-value cart {% elsif cart.cost.total > 50 %} Medium-value cart {% else %} Standard cart {% endif %} ``` ### Loops Available controls: * `for`/`endfor` * `break` * `continue` > ⚠️ **Important Limitations** > > * Maximum 20 iterations per loop > * No nested loops allowed > * Range loops limited to 20 steps: `(1..20)` Example: ```liquid {% for line in lines %} {{ line.merchandise.title }} {% if line.quantity > 10 %}{% break %}{% endif %} {% endfor %} ``` ## Show/Hide System ### Basic Usage Templates are hidden by default and must be explicitly shown: ```liquid {% if cart.cost.total > 100 %} {% show %} {% endif %} ``` ```liquid {% if cart.quantity == 0 %} {% hide %} {% endif %} ``` > 📝 **Key Rules** > > * First show/hide tag wins > * Processing stops at show/hide > * Default state is hidden ## Template Complexity ### Limits ```typescript { TOTAL_MAX: 50, // Max complexity score LOOPS_MAX: 5, // Max loops NESTING_MAX: 3, // Max nesting CONDITIONS_MAX: 10, // Max conditions ASSIGNMENTS_MAX: 15, // Max assignments FILTERS_PER_VAR: 3 // Max filters per variable } ``` ### Scoring Each element adds to complexity: * Loop: +5 points * Condition: +2 points * Assignment: +1 point * Filter: +1 point * Large range loop: +3 extra points ## Best Practices ### 1. Optimize Loops Pre-calculate values outside loops: ```liquid {% assign total_cost = cart.cost.total %} {% for line in lines %} {% if line.cost.totalAmount.amount > total_cost | divided_by: 2 %} High-value item: {{ line.merchandise.title }} {% endif %} {% endfor %} ``` ### 2. Use Early Exits Exit early when possible: ```liquid {% if cart.quantity == 0 %} {% hide %} {% endif %} ``` ### 3. Keep Filters Simple Avoid long filter chains: ```liquid {# Good #} {% assign title = line.merchandise.title | upcase %} {{ title | replace: "OLD", "NEW" }} {# Avoid #} {{ line.merchandise.title | upcase | replace: "OLD", "NEW" | strip }} ``` ### 4. Handle Null Values Always check for null: ```liquid {% if shipping.selected %} {{ shipping.selected.label }} {% else %} Select shipping method {% endif %} ``` ### 5. Document Complex Logic Use comments for clarity: ```liquid {% comment %} Express shipping requirements: - Cart total > 100 - All items need shipping - Customer logged in {% endcomment %} ``` ### 6. Optimize Property Usage Each property access in your template triggers a recalculation when that property changes. To ensure optimal performance: * Only use properties that are necessary for your logic * Remove debug statements before saving * Avoid accessing deeply nested properties repeatedly ```liquid {# Bad - Accessing unnecessary properties #} {% if customer.loggedIn and customer.acceptsEmailMarketing and customer.acceptsSmsMarketing %} {{ cart.cost.total }} {{ cart.cost.subtotal }} {{ cart.cost.tax }} {% endif %} {# Good - Only using required properties #} {% if customer.loggedIn %} {{ cart.cost.total }} {% endif %} ``` ```liquid {# Bad - Repeated deep property access #} {% for line in lines %} {{ line.merchandise.product.title }} {% if line.merchandise.product.vendor == "Specific" %} {{ line.merchandise.product.productType }} {% endif %} {% endfor %} {# Good - Assign deep properties to variables #} {% for line in lines %} {% assign product = line.merchandise.product %} {{ product.title }} {% if product.vendor == "Specific" %} {{ product.productType }} {% endif %} {% endfor %} ``` > ⚠️ **Performance Impact** > > * Each property access creates a dependency > * Changes to any accessed property trigger template recalculation > * Unused property access impacts performance unnecessarily > * Debug statements should be removed in production # Form # Content # Line item modifier # Payment icons # Motivation widget (coming soon) # Custom choice list (coming soon) # Upsell # Product discounts #### 📝 Description This function allows you to automatically apply discounts to specific products in the checkout, helping boost conversions and tailor offers based on factors like cart contents, customer tags, or order value, no discount codes needed. *** #### ⭐️ Popular / Recommended Use Cases * Automatically apply discounts for customers with specific tags, like "VIP" or "Subscriber." * Offer discounts when customers add multiple units of the same product to their cart. * Apply targeted discounts to promote slow-moving or seasonal items. * Discount a product when purchased alongside related items to increase average order value. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="UdA8MYi9M4h69Qh1iDQP" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Shipping discounts #### 📝 Description This function allows you to automatically apply discounts to shipping rates at checkout based on conditions like order value, destination, or cart contents, no discount codes required. *** #### ⭐️ Popular / Recommended Use Cases * Automatically remove shipping fees when the cart total exceeds a certain amount. * Discount or waive shipping for customers in specific locations. * Reduce or eliminate shipping costs when certain product combinations are in the cart. * Apply temporary shipping discounts during promotional events to increase conversions. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="cOZrCsbVg4YyUWAVrYCA" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Order discounts #### 📝 Description This function lets you automatically apply discounts to the entire order total based on conditions like cart value, customer tags, or order contents. It helps increase average order value, reward loyal customers, and streamline promotions, no discount codes needed. *** #### ⭐️ Popular / Recommended Use Cases * Offer discounts when a customer’s cart total exceeds a certain threshold (e.g., $100+). * Apply automatic discounts during sales events without requiring coupon codes. * Give order-level discounts to tagged groups like “Wholesale” or “First-Time Buyers.” * Automatically discount orders for returning customers to build loyalty. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="hHNK8elgZOmlqtZPdW6r" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Delivery customizations # Rename a Delivery Method #### 📝 Description This widget lets you change the display name of delivery options shown at checkout, helping you align shipping names with your brand tone or provide clearer options for customers. *** #### ⭐️ Popular / Recommended Use Cases * Rename generic labels like "Standard Shipping" to "Eco-Friendly Shipping" or "Express Saver." * Help customers understand delivery speeds by using clear names like "2-Day Delivery" or "Next-Day Shipping." * Rename similar options to highlight differences, such as "Courier - Fast" vs. "Courier - Standard." * Use region-specific language or terms to make shipping options more relatable to your audience. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="K3OUoVFALYrwP9fvjkLt" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Remove a Delivery Method #### 📝 Description This customization allows you to hide specific delivery options at checkout, helping streamline the experience and prevent customers from selecting methods that don't apply to their order or region. *** #### ⭐️ Popular / Recommended Use Cases * **Limit delivery to specific regions** by hiding methods unavailable in certain areas. * **Simplify checkout** by removing unused or redundant shipping options. * **Control shipping strategy** for high-value or fragile items by forcing specific delivery methods. * **Prevent free shipping misuse** by removing it for certain products or order conditions. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="EOr1Xnsm6ILCAMP1lgd4" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Payment customizations # Rename a Payment Method #### 📝 Description This widget allows you to change the display name of payment methods at checkout, making them more intuitive, branded, or aligned with your store’s tone and messaging. *** #### ⭐️ Popular / Recommended Use Cases * Rename "Credit Card" to "Pay Securely by Card" for a more trustworthy feel. * Change "Shop Pay" to "Shop Pay (Fast & Secure)" to highlight benefits. * Translate or adjust payment names for international customers.. * Rename lesser-used options to emphasize benefits, like "Bank Transfer (No Fees)." *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="wknkpTj9UrL3wEvWtujd" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Reorder a Payment Method #### 📝 Description This widget lets you change the order in which payment methods appear at checkout, allowing you to prioritize preferred options and create a smoother, conversion-friendly experience for your customers. *** #### ⭐️ Popular / Recommended Use Cases * Move your most cost-effective or highest-converting payment method to the top. * Place the most familiar or widely used options first for faster checkouts. * Temporarily move certain payment options higher during promotions or events. * Ensure the most important payment options appear first on smaller screens. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="nHzVtrsNe20ZIPpEnhNT" url="" %} #### 💡 Additional Information The order of payment methods in the app determines their order on the checkout page. For example: * The method placed **1st** in the app will appear **1st** at checkout. * The method placed **2nd** will appear **2nd**, and so on. Any payment methods **not selected** in Checkout Builder will automatically appear **below** the last reordered method, in their original Shopify order. *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Remove a Payment Method #### 📝 Description This widget allows you to hide specific payment methods at checkout, giving you greater control over which options customers can use based on your business needs, location, or promotion strategy. *** #### ⭐️ Popular / Recommended Use Cases * Hide methods that aren’t supported or practical in certain countries. * Remove high-fee payment options to encourage cost-effective alternatives. * Eliminate rarely used payment methods to streamline customer decision-making. * Hide specific methods (like “Buy Now, Pay Later”) for certain sales or discount events. *** #### 🛠️ How to Set Up Watch the step-by-step guide below: {% @arcade/embed flowId="Pvmjrd1yrH2vluf0RxgQ" url="" %} *** ### 📬 Support Need help? Our support team is here—just reach out below. 👉 Visit the [Support](https://help.checkoutbuilder.com/support) page\ 📧 Email us at \ 💬 Or use the chat icon in the bottom right corner of the app dashboard. We’re here to help! # Address validator (coming soon) # Changing colors # Changing fonts # Changing section and form styles # Conditions editor # Liquid code conditions editor # Widget Priority # Widget shortcodes # Widget groups (coming soon) # Widget translations (coming soon) # Widget editor # Analytics