Shoppers who have a promo code want to see their savings before they pay. HS Slide Cart Drawer Upsell adds a discount code field to the cart drawer, so shoppers can apply codes without leaving the cart and see the updated total right away. This keeps them in your buying flow and helps reduce cart abandonment.
How it works for shoppers
- Shoppers type a code and click the apply button or press Enter.
- Shopify checks the code. Valid codes appear as labels that shoppers can remove with one click.
- If a code can't be applied, the cart shows your invalid code message.
- Automatic discounts are applied by Shopify and shown in the cart, but they have no remove option.
- Shoppers can enter more than one code. Whether codes stack depends on the combination settings of your Shopify discounts.
Options
- Position: the default position among the cart blocks, or above the checkout button.
- Texts: the apply button text and the input placeholder. The placeholder and the invalid code message can be translated for each language.
- Style: button background and text colors, hover colors, font size, font weight, text case and corner radius.
- Discount display: related cart settings let you hide discount amounts on individual cart items or hide the list of applied discounts in the footer.
Create your codes in Shopify
The field applies discount codes you create in Shopify. Shopify's rules, such as dates, minimum purchase, eligible products, customers or markets, and combinations, decide whether a code applies. Shipping and taxes are calculated at checkout, so the final total is confirmed there.
Best practices
- Use a clear placeholder, such as "Discount code".
- Place the field above the checkout button during promotions, so shoppers see it before paying.
- If you rarely run code promotions, consider turning the field off so shoppers don't leave to search for codes.
- Write a friendly invalid code message that suggests checking the spelling.
- Test new codes in the cart before announcing them.
Troubleshooting
- A code is rejected: in Shopify, check that the discount is active, within its dates, and that the cart meets its requirements and eligibility.
- A code disappears when another is added: the two discounts aren't set to combine in Shopify.
- The field doesn't appear: make sure the discount code block is enabled for this cart drawer and that the cart has items.
- The checkout total is different: shipping, taxes and some discount rules are applied at checkout.
Questions about discount codes in the cart? Contact us at [email protected].