Setting up Cart Widget

This article shows you how to properly set up and optimize your cart widget, regardless of whether you host your storefront on Subbly or elsewhere.

Changing the checkout layout

To choose the checkout layout, open Checkout Designer and select the Appearance tab. Choose one of the available layouts: Traditional one page checkout layout or Multi Step checkout layout. This is an account-level checkout presentation setting, so the selected layout is used across your checkout rather than selected per product.

The Traditional one page checkout layout presents the checkout on one page and uses one major validation. The Multi Step checkout layout divides checkout into multiple steps and validates information as customers progress. Multi Step can also provide more detailed conversion-tracking events, such as events related to adding a card or shipping address. The layout is separate from the cart widget's Behavior settings.

What is the cart widget and how does it work?

The cart widget is a pop-over that appears in the form of a sidebar, usually attached to the right border of your site's pages. It can be initiated either by adding products to the cart directly from the site or by clicking the cart icon, which is usually located in the site's header.

Once on the cart widget, customers can navigate through their cart, add or remove items, update shipping addresses and gifting preferences, or apply coupons when applicable. Once they finish browsing the site and adding items to their cart, they can proceed to checkout to finish their purchase.

We've designed the cart widget to streamline the user experience on your Subbly site and help prevent abandoned carts.

There are two ways the cart widget can be initiated for your customers:

1. Adding one of the products from your storefront to the cart.
2. Clicking the Cart icon previously added to your Subbly site

Appearance tab

You can use this tab to change the appearance of the cart widget and the checkouts so they match the branding of your store.

To start customizing the cart widget, go to Cart Settings inside your Subbly admin.

There's an entire list of styling changes and modifications you can make to the checkouts and cart widget. Color palette is inherited from Settings - Branding but you can change the colors or tile styling of each individual component of the checkout here.

You can preview the changes you make to see how they appear on the cart widget by clicking Open Preview.

Behavior tab

You can modify some of the cart widget's actions to suit your checkout flow by changing the state from one of the toggles on the Behavior tab.

The following settings are available in the cart widget's Behavior tab:

• Open summary when item is added to the cart - If this toggle is not active, the cart widget shows a message such as '(name of the product) is added to your cart'.
• Allow adding one-time products as add-ons - This applies when the new checkout widget is enabled and lets customers add one-time products as add-ons to a subscription product.
• Limit purchase of products with insufficient stock - Limits customers from purchasing products with insufficient stock.
• Display Commitment period and Trial for plans on the plan selection page of checkout - Displays commitment period and trial plans in the cart widget.
• Enable coupon/gift voucher field - Displays the coupon or gift voucher field in the cart widget.
• Limit customers to apply coupon and referral discount simultaneously - Prevents customers from applying a coupon when they are using a referral link from one of your customers.
• Ask the customer about gift duration - Asks the customer for the gift duration. If disabled, the gift duration is set to forever.
• Ask the customer about gift start date - Asks the customer for a gift start date. If disabled, the gift starts immediately.
• Hide plan price on plan selection step - Hides each plan's price when the product has different pricing plans attached.
• Show localization settings in the cart widget - Displays language and currency settings in the cart widget header instead of "Your cart".
• Enable coupon/gift voucher field setting controls whether customers can enter a gift voucher in the cart widget. Separately, the Advanced setting Allow skipping payment method selection when a gift card is applied controls the payment-method step at checkout. When enabled, customers may skip payment-method selection if the gift card covers the entire cart. When disabled, they must complete payment-method selection even when the gift card covers the full cart. Other checkout requirements still apply.

How to install the cart widget on a third-party website?

If you did not use Subbly to build your storefront, you can still install the cart widget on an external site. This section is organized as a mini-FAQ.

Installing Subbly's cart widget script on an external site

There are two common ways to install Subbly product checkouts on an external site:

1. Use an embed widget to integrate Subbly product checkouts in an embeddable iframe.
2. Link your site's calls to action to the Subbly product checkout URLs.

If your site's calls to action link to Subbly products, you can make the cart widget work across your site by adding the embed code to the site's pages before the closing </body> tag. Add it to every page where you list products.

<script>
  window.subblyConfig = {
    apiKey: 'API_KEY',
    settings: {
      interceptProductLinks: true,
      cartCounterEl: '.subbly-cart-product-count',
      cartToggleEl: '.subbly-cart',
      cartButton: true
    }
  }
</script>
<script type="module" src="https://assets.subbly.co/cart/cart-widget.js"></script>

How to add a floating cart icon to your external site?

The floating cart icon is the sticky cart icon ribbon shown on the side of some customer sites.

The floating cart icon is added by default when you copy the JavaScript provided in the previous section. To hide it, set cartButton to false.

How to change the floating cart icon on your external site?

To customize the floating cart icon, replace the cartButton: true line with the following code. Replace image_url.svg with the URL of your preferred SVG image, save the code, and refresh your website.

cartButton: true,
cartButtonImage: 'image_url.svg'

FAQ

Do I have to enable the cart widget if I have a Subbly website?

Not particularly. Every new build made on the Subbly's Agentic Builder actually takes the Subbly's checkout as a default. If you'd like to implement the checkout funnel where the items are being displayed in the cart drawer, you will need to prompt the agent to create similar experience for you.

Can I upload a custom font to use on the cart widget?

We recommend choosing one of the available fonts on the Cart settings page.

You can prompt the Agent to do this for you or simply upload the font and prompt the agent to update the font styling on the checkouts or inside the cart widget. Example of a prompt would be:

Make sure to use the attached font file as the main font to be used across the cart widget.