🌐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), 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.