All Collections
Shopify Checkouts
Shopify Checkout Widgets
Shopify Checkout Extensions Installation
Shopify Checkout Extensions Installation

πŸ”„ Increase conversions with tailored checkout experiences and upsell proposals! πŸ›’πŸ“ˆ

Christian Sokolowski avatar
Written by Christian Sokolowski
Updated this week

🌟 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

Shopify made an announcement on February 13, 2023, stating their decision to discontinue the usage of the checkout.liquid file and transition all customers to checkout extensions. The Checkout Extensions Widget aligns with Shopify's future direction and this guide will detail the process of creating and integrating the Checkout Extensions Widget.

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 images to your order status page or thank you page via content blocks.


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.

Pro tip: Ensure you test the placement of your checkout on various devices, including mobile phones. What appears suitable on a desktop may not be as appealing on mobile, prompting the need for adjustments.

If you are looking to customize your widget and data sources, head down to those sections for more instructions!


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

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

Types of 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.

Variants


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.


Product display

Main products

In the "MAIN PRODUCTS" section of the checkout extension widget, users have the flexibility to feature a certain number of products. The widget preview, however, can display a maximum of two products. There are three product display options available: One-Time Only, Subscription Only, or a combination of both One-Time and Subscription. If you opt for both, you have the option to set Subscription as the default. This feature provides a variety of presentation options to engage your customers. Furthermore, users can choose the source of their product images, selecting either the product level or the variant level. Additionally, the option to include product descriptions and a quantity selector in the widget is available, enhancing the customer's shopping experience.

Please note that our Switch to Subscription functionality only supports subscription providers using selling plans.

Variants

Within the "VARIANTS" section, you have the ability to define the type of selector you'd like to use, which can be either a select dropdown or radio buttons. This selector enables customers to choose from the available variants. You also have the option to modify when these variant options are displayed, which is set as the default "if there is a variant, then show it." However, you can change this to "never show" or "always show" as per your preference. Additionally, you can opt to display the variant titles and choose to hide any out-of-stock variants from being visible in the selector.


Discounting

Checkout Extension Product Recommendations allow you to show customers they are getting a discount on the product through this offer. The discount type will default to none upon widget creation.

Configuring discounts in checkout extensions

  1. 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.

  2. Set the Discount Rate or Amount:

    • Input the desired discount value, whether it's a percentage or a fixed amount.

  3. 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.

Note on Discount Application: Setting up discounts in Rebuy's Checkout Extensions does not automatically create the discount on the line item within Shopify. It's crucial to have a separate script or function in place that applies the discount to the line item during the checkout process.

Currently our system exclusively accommodates whole number percentage discounts, such as 20% or 50%, in alignment with Shopify Discounting. Consequently, configuring a discount with decimal precision, like 10.5% or 23.333%, is not feasible for percentage discounts. It's important to note that this restriction applies solely to percentage discounts; fixed amount discounts, on the other hand, can have greater precision, such as 1.23 or 4.56.


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.


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!

Did this answer your question?