Upsell Product
Customize & Preview overview with typography controls and live dynamic design preview.
1. Customize & Preview Overview
The Customize & Preview screen is used to control the overall cart drawer appearance. The left side contains expandable settings panels such as Typography & Sizes, Colors, Cart Icon, and Cart Drawer Settings. The right side shows a live design preview so the merchant can immediately understand how changes will appear on the storefront.
The Save button at the top-right should be used after the settings are finalized. The preview is marked as Dynamic, meaning the drawer layout shown on the right reflects the current configuration, including cart items, progress bar, free product area, upsell product block, checkout button, and Cart/Offers bottom navigation.
Typography & Sizes
Design Preview
The Customize & Preview screen is used to control the overall cart drawer appearance. The left side contains expandable settings panels such as Typography & Sizes, Colors, Cart Icon, and Cart Drawer Settings. The right side shows a live design preview so the merchant can immediately understand how changes will appear on the storefront.
The Save button at the top-right should be used after the settings are finalized. The preview is marked as Dynamic, meaning the drawer layout shown on the right reflects the current configuration, including cart items, progress bar, free product area, upsell product block, checkout button, and Cart/Offers bottom navigation.
Typography & Sizes
- Base size controls the root font size of the cart drawer. Increasing this value makes most drawer text larger, while reducing it makes the drawer more compact.
- Heading scale controls the multiplier used for headings. It helps make headings larger or smaller without manually adjusting every heading.
- Button radius controls the corner radius of buttons. Use a lower value for square buttons and a higher value for rounded buttons.
Design Preview
- The preview displays the cart drawer with the configured announcement bar, progress bar, cart products, free product area, upsell product carousel, checkout section, and bottom navigation. Review this preview before saving changes so the drawer looks correct for both cart and offer experiences.
Colors panel for progress bar, buttons, announcement bar, background, and drawer text.
2. Colors Settings
The Colors section controls the visual branding of the cart drawer. Each color field includes a color swatch and HEX value input, allowing the merchant to match the cart drawer with the store theme or brand palette.
Changes made here affect the cart drawer UI, progress bar, buttons, announcement bar, background, icons, headings, and drawer text. These settings are useful when the merchant wants the drawer to look consistent with the storefront design.
Progress Bar & UI
Button and Announcement Bar
Background and Drawer Text
The Colors section controls the visual branding of the cart drawer. Each color field includes a color swatch and HEX value input, allowing the merchant to match the cart drawer with the store theme or brand palette.
Changes made here affect the cart drawer UI, progress bar, buttons, announcement bar, background, icons, headings, and drawer text. These settings are useful when the merchant wants the drawer to look consistent with the storefront design.
Progress Bar & UI
- Text color controls the main text color inside progress and UI areas.
- UI background controls the general background color behind important cart drawer sections.
- Progress bar controls the filled progress indicator color, while Progress background controls the unfilled progress track.
- Border color controls divider and outline colors, and Icon color controls the color used for cart, goal, and reward icons.
Button and Announcement Bar
- Button color controls the main action button background, such as Add to cart or Checkout buttons. Button label color controls the text color inside those buttons.
- Announcement bar Background and Text color control the top announcement area inside the cart drawer, such as promotional or discount messages.
Background and Drawer Text
- Background type can be set to Gradient, allowing the drawer to use a gradient start and gradient end color. This helps create a more modern cart drawer style.
- Drawer text color controls regular text inside the drawer. Heading color controls the heading text used across drawer sections.
Cart icon and cart drawer behavior settings for checkout, layout, and navigation options.
3. Cart Icon and Cart Drawer Settings
The Cart Icon section lets the merchant choose the icon style used inside the cart drawer. The Cart Drawer Settings section controls checkout text, discount code input visibility, drawer position, mobile layout, and key behavior options.
These settings are important because they control how customers interact with the drawer after adding products to the cart. The correct configuration can make the checkout flow clearer and reduce friction for customers.
Cart Icon
Checkout Settings
Behavior Settings
The Cart Icon section lets the merchant choose the icon style used inside the cart drawer. The Cart Drawer Settings section controls checkout text, discount code input visibility, drawer position, mobile layout, and key behavior options.
These settings are important because they control how customers interact with the drawer after adding products to the cart. The correct configuration can make the checkout flow clearer and reduce friction for customers.
Cart Icon
- Icon type allows the merchant to use the default icon option.
- Cart related Polaris icon lets the merchant select a cart-related icon from the available icon list. The selected icon is shown in the cart drawer preview.
Checkout Settings
- Checkout button label controls the text displayed on the checkout button. For example, it can be set to Checkout, Buy Now, or another store-specific call-to-action.
- Show discount code input displays a discount code field inside the drawer when enabled. Keep this disabled if discounts are handled automatically or shown through the offers system.
Behavior Settings
- Drawer position controls whether the drawer opens from the right or another supported position.
- Mobile layout controls how the drawer appears on mobile devices. Drawer layout is useful when the merchant wants a compact sliding drawer experience.
- Auto-open after add to cart opens the cart drawer automatically when a customer adds an item to the cart.
- Sticky checkout button keeps the checkout button visible for easier access.
- Show Cart and Offers buttons displays the bottom navigation tabs so customers can switch between the cart view and offers view.