Introducing custom styling for Shopify's new checkout extensions

With the launch of Checkout Extensibility, new things are possible in the Shopify Plus checkout. 

‍

That’s why tons of Shopify Plus stores are moving from checkout.liquid to Checkout Extensibility. To support those merchants, we’re introducing the most loved feature of our checkout.liquid upsell to Checkout Extensions: custom styling and design.

‍

Custom Styling will give you the ability to showcase products, text, price and discounts more prominently and in line with your brand. While checkout.liquid allowed us to customize the CSS, now you can use our WYSIWYG editor for Checkout Extensions. 

‍

We’re pumped to share the Custom Styling for Shopify Checkout Extensibility is now live in the UpsellPlus app. In this post we’ll cover everything you need to know about using this new customizability using UpsellPlus for your upsells in Shopify Checkout Extensibility. We’ll cover:

‍

‍

What is Custom Styling

How to configure custom styling for your Checkout Extensibility upsells

Let's dive in.

‍

What is custom styling for Shopify Checkout Extensibility?

‍

The new Shopify checkout, called Checkout Extensibility, is customized using apps. UpsellPlus allows you to display upsells and cross-sells at checkout on your Shopify Plus store.

‍

Before you weren’t able to control the look and feel of these upsells. With Custom Styling you can now control:

‍

• The layout: carousel, stack or row
• CTA button color and style
• Text color, weight and style
• Price color, weight and style
• Callout banner color weight and style

‍

‍

How to configure custom styling for your Shopify Plus Checkout Extensibility

‍

The new customization capabilities are available to all merchants on a Shopify Plus plan that have UpsellPlus installed. To enable these upsells, you’ll need to install UpsellPlus to your store. You can do that here: Connect Store

‍

Once you’ve completed that, you can click ‘Create an offer’ and choose ‘Checkout Page’, then select ‘Checkout Extensibility’. See the ‘Customization’ section to get started. The WYSIWYG preview will show what your upsell will look like in checkout.