Enhance Your Shopify Checkout with ReConvert's Drag & Drop Editor

Enhance Your Shopify Checkout with ReConvert's Drag & Drop Editor

Table of Contents

1. Introduction
2. What is the Checkout Editor?
3. How to Set Up the Checkout Editor
4. Customizing the Checkout
   • Previewing the Checkout
   • Switching Between Desktop and Mobile Views
   • Using Undo and Redo Buttons
   • Deactivating or Activating the Checkout
5. Adding Widgets to the Checkout
   • Available Widgets
   • Adding a Widget
   • Customizing Widgets
6. Configuring Upsell Settings
   • Giving the Upsell an External Name
   • Customizing the Heading
   • Selecting a Specific Product for Single Product Upsell
   • Enabling Variant Selection
   • Customizing the Image, Product Details, Price, and Discount
   • Configuring the Buttons
7. Adding Multiple Products to the Upsell
   • Adding Sections and Subsections
   • Adjusting the Order of Products
8. Saving and Placement
   • Saving the Configuration
   • Placing the Widget in the Shopify Checkout Editor
9. Testing the Checkout
   • Adding Products to the Cart
   • Viewing the Upsell in the Checkout

Introduction

In this tutorial, we will delve into the new feature for Shopify Plus stores offered by Reconvert - the Checkout Editor. This powerful tool enables Shopify merchants to upsell their customers during the checkout process, among other benefits. We will guide you through the setup process and explain how to customize your checkout page using the Checkout Editor.

What is the Checkout Editor?

The Checkout Editor is a feature developed by Reconvert exclusively for Shopify Plus stores. It provides an intuitive interface that allows merchants to customize their Shopify checkout. With this tool, you can enhance the checkout experience for your customers by adding upsells, modifying the appearance of the page, and more.

How to Set Up the Checkout Editor

To access the Checkout Editor, navigate to your Reconvert dashboard and click on the "Checkout Customizer" menu item. If you are using this feature for the first time, the page will appear empty. However, once you start getting analytics, the dashboard will populate with a full range of options for checkout upsells and widgets.

Click the "Customize Checkout" button to access the Reconvert Checkout Editor. Here, you will find a preview of your Shopify checkout, with separate sections for the information page, shipping information page, and payment information. You can switch between desktop and mobile views to see how your changes will appear on different devices. The editor also provides undo and redo buttons for convenient editing, as well as the ability to activate or deactivate the checkout.

Customizing the Checkout

Within the Checkout Editor, you can customize various elements of your checkout page. The left menu lists the different parts of the checkout, which change dynamically depending on the page you are on. By clicking on each section, subsection, or block, the right menu will display the customization options for that element.

To learn more about specific sections, subsections, or blocks, you can click on them and find a link that opens a pop-up with detailed explanations and video tutorials. This makes customizing your checkout a straightforward process.

Adding Widgets to the Checkout

Widgets are the building blocks of your customized checkout. Reconvert offers a variety of widgets to enhance the upselling experience, including multi-product upsells, dividers, headings, and single-product upsells. You can add these widgets by selecting them and dragging them to the desired location in the checkout.

To demonstrate the widget functionality, let's add a multi-product upsell widget. With each widget serving as a section, you can further customize subsections and blocks within it. You have the flexibility to hide, unhide, drag, or customize each element according to your preference.

Configuring Upsell Settings

Once you have added the upsell widget, it's time to configure its settings. Give the upsell an external name that will help you easily identify it. Next, customize the heading text to entice customers. For single-product upsells, select a specific product and decide whether to enable variant selection.

You can also fine-tune the appearance of the upsell by adjusting the image, product details, price, and discount settings. Customize button text and design to create a seamless checkout experience. It's worth mentioning that you have the option to display or hide elements such as descriptions based on your preferences.

Adding Multiple Products to the Upsell

If you want to include multiple products in your upsell, you can add sections and subsections. These allow you to organize the products and adjust their order as required. By simply dragging and dropping, you can easily rearrange the products within the upsell.

Saving and Placement

After configuring and customizing your upsell, hit the save button. This will ensure that your changes are applied and stored. To place the widget in the Shopify Checkout Editor, switch to the Shopify editor and select Reconvert from the blocks menu. Drag and drop the widget to the same location where you placed it in the Reconvert Checkout Editor.

To ensure proper functionality, go back to the Reconvert editor, select the corresponding section from the dropdown menu on the right, and save. Refreshing the page in the Shopify editor will then display your customized upsell widget in the checkout.

Testing the Checkout

To see the upsell widget in action, navigate to your online store and proceed to the checkout. Add products to the cart and view how the upsell appears during the checkout process. You can interact with the variant selector and quantity picker to see real-time updates. The upsell will showcase additional products with discounts, giving your customers more buying options.

Congratulations! You have successfully set up and customized your checkout with Reconvert's Checkout Editor. If you have any questions or need further assistance, feel free to reach out to our 24/7 live chat support or request a personalized onboarding demo with our customer success team.

Highlights

• Enhance your checkout experience with Reconvert's Checkout Editor
• Customize your Shopify checkout and add upsells
• Use widgets to create multi-product upsells, headings, dividers, and more
• Configure settings for each upsell, including product details, prices, and discounts
• Easily organize and customize your checkout with drag-and-drop functionality
• Test your customized checkout to ensure a seamless upselling experience

FAQ

Q: Can I customize the appearance of my checkout page? A: Yes, Reconvert's Checkout Editor allows you to customize various elements of your checkout, including headings, images, prices, and buttons. You can also preview how your changes will look on both desktop and mobile devices.

Q: Can I add multiple products to an upsell? A: Absolutely! Reconvert's Checkout Editor enables you to create multi-product upsells by adding sections and subsections to your checkout. You can easily rearrange the products' order and customize their settings.

Q: Will the upsell widget display real-time price changes? A: Yes, when customers adjust the quantity or variant selection, the upsell widget will reflect the changes in real time. This allows customers to see the updated prices before completing their purchase.

Q: Can I hide certain elements in the upsell widget? A: Yes, you have full control over which elements are displayed in the upsell widget. You can choose to show or hide descriptions, product details, and other components based on your preferences.