Skip to main content

Cart Widget

Ryan Haidinger avatar
Written by Ryan Haidinger
Updated over a month ago

Overview

This article will help you to customize the appearance of the Cart Widget for both the Slider Widget and VIP Checkout option.


Get Started

To get started with customizing each aspect of your cart widget, go to: Display > Cart Widget

At the top of the page, the first step is to select the type of Cart Widget to display:

  • Slider Widget - appears as an option slide bar within the Cart.

  • VIP Checkout - appears as an direct checkout button within the Cart.

Learn more about the differences in this support guide.


Customizing the Slider Widget

When this option is selected, there are a few sections that open up below including:

  • Cart Widget Content

  • Popup Content

  • Opt-Out Content (if checkbox enabled)

  • Design

  • Advanced Options

Cart Widget Content

This section allows you to customize the logo and tagline of the widget within the cart. By default, we display the Shipment Guard logo but this can be removed and replaced with your own text.

Popup Content

When customers click the (i) icon within the cart widget to learn more, this popup will display. This section allows you to customize all the text shown within this popup.

Opt-Out Content

To help encourage customers to stay opted-in to your program, you can enable the Opt-Out popup (within advanced options). This section allows you to customize all of the text for this popup.

Design

This section allows you to customize the font, text color, and checkmark color shown within both popups.

Advanced Options

This section contains a few options meant to enhance the overall experience with the cart widget for your customers.

  • Display protection opt-out popup - this option will display a popup if the customer clicks to disable the slider or removes the checkmark from checkout on the extension.


Customizing the VIP Checkout Widget

This particular Cart Widget can be customized directly within your Shopify Checkout Editor. The other design options on this page are the same as the Slider Widget, since they belong to both popups.

This next step assumes you've already setup and configured the VIP Checkout widget on your store. If this hasn't been completed yet, please see this support guide.

To begin customizing your VIP Checkout widget go to:

  • Click Online Store > Themes > Customize (on your live theme)

  • Click App Embeds (on the left mini menu) > Select Shipment Guard

  • Scroll down to see all of the design options for your VIP Checkout widget

To better visualize the appearance within the preview, we recommend to add a product to your cart and than click to open the cart drawer within the editor. From here, you'll be able to see the VIP Checkout widget and the direct changes you can make.

Did this answer your question?