The Checkout Customization feature in YourToken is designed to empower Shopify brands with a flexible and personalized shopping cart experience. By incorporating attributes like Cart Upsell, Dynamic Progress Bars, and specialized messages for loyalty points and discounts, brands can enhance the overall checkout journey for their customers. The customization settings, including Cart Items, Cart Upsell, Loyalty/Offers, and Cart Footer, offer granular control over the appearance and functionality of the cart drawer. Customize the appearance of the Cart Header, including dynamic properties such as font, color, and weight. Users have the option to enable an item count display alongside the close button or a secondary checkout button at the top (optional). The drawer would appear either when some item(s) are added, or when the customer navigates to the cart by clicking on cart icon. Other than the trigger user can enable/disable backdrop overlay and opacity of the same. Added items placement is fixed and isn’t replaceable. Currently there wouldn’t be any dropdown value, it would be disabled with “Default” value, alongside a button to enable/disable option to change cart item quantity. It’s another placement with no disable value as of now. The drop-down value depends on the enabled features in the loyalty program module. If not enabled, user would be prompted to initialize loyalty program to activate the reward specific placement. User can select Auto-apply button (values managed from loyalty module). Brand can modify looks of the text as per their branding needs.

In case, “ways to redeem” is enabled and there are coupons available, the apply-coupon PANEL can be selected. It adds another property to our cart drawer, with backdrop within cart when the panel is open. Given the diverse themes used by different stores, the Checkout Customization in YourToken acknowledges the need for adaptability. While it may not replace every theme-specific cart, it provides a robust and adaptable alternative, allowing brands to align their cart drawer with the unique aesthetics and functionality of their online stores. This ensures a seamless and brand-consistent shopping experience for customers across various Shopify stores. Progress bar is another placement that we can modify in future based on the logic we using. VIP tiers, free delivery, etc. User would be able to select the variations available through the drop-down menu. For now, there would be either Free delivery or none(if disabled, placement stack wouldn’t show up). Bar color is customizable. and may add progress animation if available. User can give their customers additional instructions or promotional message with optional sub-text. As we grow our available Cart category nudges, the enabled nudges would show up in the dropdown menu. This is a placement specific area stacked below cart items. To make it less messy for the customer, brands(users) can enable divider and add a divider text. The cart body is replaced with empty cart properties. Body Primary text is mandatory, with all text properties. User can enable explore button that redirects to the collection page.

The offer visibility is enabled by default, letting user decide whether to make it visible or not is optional for development purpose. User can enable cart drawer animation (slide right). If disabled, would show up instantly based on the defined trigger. Users can select any of the provided icon types from the dropdown, and can modify certain properties of the icon based on their branding preferences. Properties include: Icon Type (outline/filled); Icon color; backdrop opacity and color; and Badge color.