🌟 Forge one-of-a-kind customer interactions using Rebuy's data-driven Rules Engine! 🤖🔍 Utilize logic-based rules, both present and past customer interactions, product and website data, or tap into Rebuy's AI Endpoints to configure the most individualized offers during the Checkout process. 🛒💫
Important Notes
Before we get started. Make sure you understand all the capabilities of the Checkout Extensions widgets!
Shopify Plus Merchants
As a Shopify Plus merchant, you have the ability to add Checkout Extension blocks for product recommendations or images directly into your checkout. You can also use the checkout extensions content blocks to add images to your checkout, order status page, or thank you page.
You cannot add product recommendations to the order status page, or thank you page.
Non-Shopify Plus Merchants
If you are a non-Shopify Plus merchant, you do not have the option to add product recommendations to your checkout. However, you can still enhance your customer experience by adding recommendations or images to your order status page or thank you pages
Step by step video tutorial
Dive into this effortless and exciting step-by-step journey to acquire your very first checkout extensions! 🚀✨
Building a Checkout Extension widget
To get started, the first thing you need to do is set up a Checkout Extensions widget in Rebuy. You can achieve this by navigating to Rebuy, going to the checkout extensions section, and selecting the "get started" option.
Afterwards, you have the option to select from three different types of product offers for the checkout extensions. You can always modify this choice later, so go ahead and pick the one that best suits your requirements at this stage. Once you've made your selection for the widget type, simply click on one of the available options, give your widget a name, and then click on "create widget."
In-Checkout Recommendations
Display items that customers also bought based on the items currently in the cart.
Top Sellers
Display your store's best selling items, which automatically updates as your sales data changes.
Featured Items
Display specific products or collections directly on your Shopify checkout page such as new products, top sellers, sale items, etc.
By default, a widget will be built with the recommended AI pre-configured in the data source, so you will see a preview of those recommendations.
The preview will not show exactly how the widget will be presented in the Shopify checkout. Shopify does not allow third-party apps to customize their checkout, so we are limited to what they give merchants out of the box. You can always modify your checkout in the Shopify theme editor.
Adding widget to Shopify checkout page
Once your widget is created, you have the option to either install it immediately to the checkout for instant results or make adjustments to your widget settings and data source rules. If you decide to proceed with installing the widget into your Shopify checkout, you can follow these steps at your convenience.
When you're ready to install or preview the complete version, be sure to copy your widget ID (as it will be necessary for the upcoming steps). To access your Shopify checkout editor, you can conveniently do so by clicking the "go to Shopify" button in the widget settings, or click "preview" in the upper right corner, which will automatically direct you to the checkout editor.
If you do not want to install the checkout extensions on your live checkout, you can make an alternate checkout to preview the widget by going to your Shopify checkout settings and duplicating your live checkout profile.
After accessing your checkout editor, you have the option to select the "add app block" button. From there, pick the "Rebuy Smart Component" app block, input the widget ID from your widget page, opt for "NO" when it comes to hiding this extension setting, and then proceed to click on the save button.
Keep in mind that the save button in Shopify won't automatically refresh the page, so you'll need to refresh the page manually to view the app in the checkout previewer.
If you've configured specific data source rules beforehand, the widget might not display in the preview if those rules aren't met correctly. To gain a better understanding of how the widget will appear on your checkout, we recommend starting with the default Rebuy endpoint rules.
Congratulations! You have effectively installed your checkout extension widget. There's one more step to complete, which involves customizing the widget's placement. Return to the main checkout profile settings page, and within that page, simply click and drag the app block to your preferred location. Once you've found the ideal spot, proceed to click the "save" button.
App Block Placement and Mobile Rendering Limitations
When placing a Rebuy app block in the Shopify Checkout Editor, be aware that not all placement locations render on both desktop and mobile. This is a Shopify platform limitation that affects all checkout app blocks, not just Rebuy widgets.
On desktop, Shopify displays the checkout in a two-column layout. On mobile, that layout collapses to a single column, and the Order Summary section becomes a collapsible accordion. When this collapse happens, Shopify restricts which app block targets will render inside the Order Summary area.
The following app block targets render correctly on both desktop and mobile:
purchase.checkout.reductions.render-beforeDirectly before the Discounts section
purchase.checkout.reductions.render-afterNested inside the Discount or gift card section
purchase.checkout.cart-line-item.render-afterAfter individual line items
purchase.checkout.cart-line-list.render-afterAfter all line items
App blocks placed in the Order Summary section outside of these targets will not render on mobile.
If you need your widget to be visible on both desktop and mobile, place the app block in the Main section of the Shopify Checkout Editor instead of the Order Summary section. The Main section renders consistently across both layout types.
Widget settings
There are various settings available for modification within the Rebuy checkout extensions widget. However, there are some settings that we cannot control such as adding a logo, header, background, accent colors, button colors, error colors, etc. In order to modify those types of settings you will need to head to the Shopify checkout editor settings.
Language Settings
General
In the general language section, you can modify the widget super title, title, and description to say whatever meets your specific needs. The preview will update real time to see the changes you are making.
Call to action
With Rebuy's Checkout Extensions, you're provided with the capability to customize the language for variants, the 'Upgrade to Subscription' button, and the 'Add to Cart' state options. The system initially sets up with basic placeholders, which you can tailor to your liking. As you adjust these settings, the preview feature updates dynamically, offering you an real time view of how your changes affect the interface.
Pro tip: Checkout the info tool tip for additional variables to customize your customers checkout experience.
Success Banner
You can choose to show or hide a success banner when a customer adds an upsell to their cart during checkout. If you opt to display the banner, you also have the option to fully customize the message that appears after products from checkout recommendation widgets are added.
Customization Options:
Text: Change the message to suit your store's tone.
Colors: Adjust the text colors.
You currently cannot adjust the banner color.
Font Size: Modify the size of the font for better visibility.
Text Styles: Make the text bold, italic, or strikethrough.
Alignment: Control the alignment of the text (left, center, or right).
Hyperlinks: Add clickable links to the message for additional actions.
Note: These customization options are only available for checkout recommendation widgets.
Available placeholders:
{{quantity}}
The number of items added to cart.{{product_title}}
The name of the product added.
Product Display Settings
Main Products
In the "main products" section of the checkout extension widget, users can customize the following:
Product Limits and Types:
Product Display Limit:
You can feature multiple products in the widget, but the widget preview will show a maximum of two products at once.
Display Options:
There are three product display types to choose from:
One-Time Only
Subscription Only
Both One-Time and Subscription (with the option to set Subscription as the default)
Please note that our Checkout Extensions Subscription functionality only supports subscription providers using selling plans.
Display in Carousel
This setting allows you to show checkout recommendations in a carousel format.
Carousel Toggle:
Merchants can enable or disable the carousel feature through the Product Display > Carousel toggle option in the settings.
Orientation:
Select whether the carousel should be horizontal or vertical.
Note: If you choose the horizontal carousel, it’s best to place it outside the order summary blocks for optimal viewing and usability.
Max Products in View:
A maximum of 3 products can be displayed in the carousel at a time (whether vertical or horizontal).
Navigation:
Users can navigate the carousel using arrows. Clicking an arrow advances the carousel by a full set based on the "Number of Products per View" setting. For example, if "Number of Products to Show" is set to 4 and "Products per View" is set to 3, the carousel will display 3 products at a time. When the arrow is clicked, it will shift to show the next 3 products—2 from the previous set and 1 new product.
Additional Notes:
If checkout carousels are enabled, navigation arrows will appear on the right, and the super title, title, and description will be left-aligned by default.
If checkout carousels are disabled, the super title, title, and description will be center-aligned by default.
Titles, Images, and Quantity Customizations
Title Customization: Adjust the product title size from Extra Small to Extra Large. You can also customize the text style (Bold, Normal, Italic).
Image Source: Choose between product-level or variant-level images to display in the widget.
Product Descriptions: Include descriptions for each product.
Quantity Selectors:
Dropdown (default behavior): Select quantity via dropdown
Buttons/Manual Input: Shoppers can adjust product quantity using:
+/- buttons to increment or decrement the quantity.
Manual input in the same field to enter their desired quantity directly.
Min/Max Quantity Settings: Set your minimum and maximum quantities someone can add.
Variants
In the "variants" section, you can customize how variant options are presented to customers:
Selector Type: Choose between a select dropdown or radio buttons for customers to select from the available variants.
Display Options for Variants: The default setting is to "show if there is a variant," meaning the selector will appear only when variants are available. However, you can change this to:
"Never show" to hide the selector entirely, or
"Always show" to display the selector at all times.
Variant Titles: You can choose to display the titles of each variant in the selector.
Out-of-Stock Variants: Optionally hide any out-of-stock variants, ensuring customers only see available options.
Title Customization: Adjust the product title size, ranging from extra small to extra large, and modify the text style, choosing from bold, normal, or italic to align with your design preferences.
Discounting Settings
Checkout Extension Product Recommendations allow you discount products through this offer. The discount type will default to none upon widget creation.
Configuring discounts in checkout extensions
Select the Discount Type:
Choose between a percentage-based or a fixed amount discount.
For a percentage discount, it will be applied based on the percentage specified.
For a fixed amount, a specific monetary value will be deducted.
Toggle on "Use Shopify Functions (Recommended)" to ensure Rebuy will discount the products in both the widget and in the customer's cart.
NOTE: If you wish to show a "visual" discount only (meaning Rebuy will not discount the products once in cart), then toggle off the Shopify Functions setting above.
Set the Discount Rate or Amount:
Input the desired discount value, whether it's a percentage or a fixed amount.
Choose the Price Type to Apply the Discount:
Decide whether the discount applies to the regular price or the compare-at price. This flexibility allows you to customize how the discount interacts with different pricing strategies.
Toggle on the Treat as Gift With Purchase Setting
Located in the Advanced tab of the Checkout Extensions Product Recommendations widget, this setting enables a checkout offer widget to act as a GWP widget. Cart conditions are validated at checkout and the gift is auto-removed if they're no longer met. Shopify Plus only. More info in the Treat as Gift With Purchase section below.
For more information on Shopify Functions discounting using Rebuy, please review our Rebuy Discounting Overview guide here linked below.
Treat as Gift With Purchase Setting
Checkout offer (recommendation) widgets include a Treat as Gift With Purchase setting in their Advanced Settings tab. When enabled, items added by that checkout offer widget are treated by Rebuy's GWP watcher (GWP validation logic) as if they were standard Gift With Purchase Widget items — meaning the widget's datasource rules are re-evaluated at Shopify checkout and the gift is automatically removed if the customer no longer qualifies.
This is useful for any Shopify Plus merchant using a checkout recommendation widget to deliver a GWP offer at checkout rather than a standard GWP widget.
When to use this setting
Enable Treat as Gift With Purchase on any checkout offer widget that is being used to give the customer a free or discounted gift tied to cart conditions. Without this setting, items added by the checkout offer widget are not validated by the GWP watcher, and there is no guarantee they will be auto-removed if the customer drops below the qualifying threshold at checkout.
How to enable
Open the checkout offer widget you want to treat as a GWP widget.
Navigate to the widget's Advanced Settings tab.
Confirm Enable Attribution Tracking is toggled on. Treat as Gift With Purchase cannot be enabled without attribution tracking active.
Toggle Treat as Gift With Purchase to on.
Important dependency: If Enable Attribution Tracking is toggled off after Treat as Gift With Purchase has been enabled, the Treat as Gift With Purchase setting will automatically turn off and cannot be re-enabled until attribution tracking is turned back on. The two settings are dependent on each other.
Behavior once enabled
Once enabled, the checkout offer widget operates under the same GWP watcher validation as a standard Gift With Purchase Widget:
Datasource valid + Rebuy discount still applied to the gift → gift stays at checkout.
Datasource invalid (cart no longer qualifies, AI-recommended endpoint, or unsupported rule type) → gift is removed at checkout.
No Rebuy discount on the gift line (for example, a non-combinable code overrode the free status) → gift is removed at checkout to prevent the customer being charged full price.
Requirements and limitations
All standard GWP validation requirements apply to checkout offer widgets with this setting enabled:
Shopify Plus only (checkout extensions are Plus-gated).
The widget's datasource must return specific products. Datasources using the AI-recommended endpoint or any non-deterministic product source are treated as invalid and will cause the gift to be auto-removed at checkout.
Unsupported rule types. Datasource rules using URL conditions or order tag rules are inaccessible inside Shopify checkout extensions; validation is skipped when they are present.
Checkout-layer removal only. Auto-removal applies at the Shopify checkout step. If the customer navigates back to the cart, the gift may still appear there.
Shopify Markets + fixed pricing edge case. On stores using Shopify Markets with fixed market prices, the watcher may incorrectly remove gifts at checkout for customers shopping in a non-default currency because Shopify does not expose conversion rates at checkout.
Styling Settings
Container Border
Enable this setting to add a border around the edges of each recommendation within the widget.
Container Border Radius
The border radius controls how rounded the edges of the border are, ranging from sharp corners to fully rounded edges. Adjust the slider to set the desired roundness. Here are the preset options:
None (Square): Sharp 90-degree angles for a structured look.
Small: Slightly rounded corners that soften the appearance while keeping a rectangular shape.
Default: Moderately rounded edges that offer a balanced, versatile look.
Large: Noticeably rounded corners for a more informal, approachable design.
Fully Rounded: Completely circular (for square shapes) or pill-shaped (for rectangular elements), ideal for profile pictures or adding a playful touch.
Container Border Width
The border width defines how thick the border appears around the container or image:
Default: A standard thickness that creates a balanced visual without being too bold.
Medium: A thicker border that draws more attention, ideal for highlighting specific sections.
Image Border
Enable this setting to add a border around the edges of the product image within the widget.
Image Border Radius
The border radius controls how rounded the edges of the border are, ranging from sharp corners to fully rounded edges. Adjust the slider to set the desired roundness. Here are the preset options:
None (Square): Sharp 90-degree angles for a structured look.
Small: Slightly rounded corners that soften the appearance while keeping a rectangular shape.
Default: Moderately rounded edges that offer a balanced, versatile look.
Large: Noticeably rounded corners for a more informal, approachable design.
Fully Rounded: Completely circular (for square shapes) or pill-shaped (for rectangular elements), ideal for profile pictures or adding a playful touch.
Image Border Width
The border width defines how thick the border appears around the container or image:
Default: A standard thickness that creates a balanced visual without being too bold.
Medium: A thicker border that draws more attention, ideal for highlighting specific sections.
Image Fit Settings
Contain: The image keeps its aspect ratio, but is resized to fit within the given dimension.
Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
Button Styles
When customizing Rebuy's Checkout Extensions, you have the option to choose from three distinct button styles: Primary, Secondary, and Plain. The default button style in Rebuy's Checkout Extensions is set to "Secondary". This means that unless changed, the Secondary style will be automatically applied to your buttons. We default to this in order to align with Shopify's UX/UI best practice recommendations.
Primary: The Primary button style in Rebuy's Checkout Extensions takes its cue from your Shopify checkout editor settings. Specifically, the color for the Primary button is derived from the "Button" color setting in your Shopify checkout editor. It will display as a solid background button color for the widget's buttons.
Secondary: The Secondary button style in Rebuy's Checkout Extensions is aligned with your Shopify checkout editor settings. This means the color applied to the Secondary button is directly sourced from the "Buttons" color setting in your Shopify checkout editor. It will display the text as the color.
Plain: The Plain button style in Rebuy's Checkout Extensions is designed to mimic the simplicity of a hyperlink. This option displays as plain text, adopting its color from your Shopify checkout editor settings. Specifically, the "Accent" color chosen in your Shopify checkout editor determines the appearance of the Plain button
To configure your colors for the buttons go to Shopify Admin > Settings > Checkout > Customize your checkout > Settings (Top left of the page) > Scroll down until you see the colors. See below for which setting controls which button type. Please note that there is no way to use custom CSS for Checkout Extensions within the Rebuy settings.
Miscellaneous settings
🔒 You can choose to activate or deactivate hidden product properties. These concealed product attributes serve the purpose of tracking performance and facilitating dynamic discounts. Be aware that if you disable them, you'll forfeit valuable performance and engagement metrics! They are enabled by default.
Integrations
Rebuy Engine supports integrations with select review partners, allowing you to incorporate customer reviews into your checkout experience.
Enabling Review Integrations:
Ensure you have a review app service with one of Rebuy's select partners.
Enable the review service within Rebuy.
Navigate to the Integrations section in your widget settings to enable review integrations.
For assistance with setting up your review integrations, refer to the Rebuy Engine Help Center.
To update the color of your star ratings for checkout extensions:
Go to the Styling Tab: Navigate to the styling tab in your settings.
Select Your Desired Color: Choose the color you want for the star ratings.
Revert to Default: The color will default to your Rebuy theme. If you want to reset it, simply click the Reset to Theme button in the styling settings.
Setting data source rules
Once you have the initial widget built, you can modify your data source rules to meet your needs. To edit your data source, click on the "EDIT" button next to the "DATA SOURCE." Make the necessary adjustment to your rules and click "SAVE." The default rule on the checkout extensions widget will be to return one of the Rebuy endpoints.
In this example, I am setting the data source to return two specific products instead of the Rebuy AI endpoint. You can refresh the checkout extension widget page to view the updated data source return in the preview screen. Please note, that there is a limit of two products to be shown on the widget preview.
Tip:
You can configure the data source to display your customers names (if they are logged in) by setting the Data source to also return a title or super title with a value of {firstName}.
Example: Hi {firstName}! Have you seen these items yet?
Product preview (in widget preview)
The product preview section in the widget previewer serves as a tool to confirm how the data source rules will be applied to the widget. Please note that this previewer is restricted to displaying only two products and does not reflect the exact style you'll observe in your checkout. To obtain a comprehensive preview of your widget, you'll need to install it into a checkout.
Want to learn more about Rebuy features? Book a demo with our team today!