Question 11665 in Shopify Question posted in
The Shopify help center can be found here.

Shopify display total discounts on cart page (before checkout)

I’m trying to display discount codes that have been applied via the URL on the cart page in a Shopify theme prior to checkout.

Example URL would be store.com/discount/DISCOUNTCOUPON

I have verified the discount exists, and if I click on Checkout and proceed to Shopifys built in checkout process then I can see the automatic discount was in fact applied – it just will not display on the cart page. Discount type is a % that applies to entire cart.

I have tried the below snippet as per this guide: https://shopify.dev/themes/pricing-payments/discounts

I am using the Dawn theme also as per the guide. (And applying the code to a section within the cart object).

{% if cart.cart_level_discount_application.size > 0 %}
  Discounts:

  <ul>
    {% for discount_application in cart.cart_level_discount_applications %}
      <li>
        {{ discount_application.title }}-{{ discount_application.total_allocated_amount | money }}
      </li>
    {% endfor %}
  </ul>
{% endif %}

I have also tried using some variations such as:

{{ discount.title }}
{{ discount.total_allocated_amount | money }})

Nothing seems to work to display the discount.

Anybody come across this before and have any ideas why? Also for extra clarification I am not using Shopify Plus however I cant find anywhere that this is a requirement.

Tags:

2

Answers


  1. 0

    There are 3 types of discounts in Shopify:

    1. Automatic Discounts: When creating discounts in the Shopify admin dashboard, you have the option to make it automatically apply to all or certain orders/customers.
    2. Shopify Scripts: This is a Shopify app available to Shopify Plus users. Using ruby code, you can implement more customized cart/checkout behavior.

    I believe the UX seen in the screenshots from the documentation was being achieved using one of the 2 above methods.

    1. Manual Discount Codes: When creating discounts in the Shopify admin dashboard, pick "Discount code" instead of "Automatic discount". These codes are only visible in the checkout section of the website, regardless if the store is Shopify Plus or not.

    Most people just write a disclaimer in the cart page, like "Discounts will be calculated during checkout".

    Adding discount codes via url generates a cookie named "discount_code", that can be displayed via JS in the cart page for a better user experience, but it only contains the name of the discount.

    Other solutions include various Shopify Apps built by third parties, for example: https://apps.shopify.com/discount-coupon-field-in-cart-page.

    They generally use the Shopify GraphQL Storefront API to create carts and display them, but this solution involves a lot more complexity: https://shopify.dev/api/examples/cart

    Login or Signup to reply.
  2. 0

    A late response, but want to answer your questions and share another solution for this.

    I thin your code snippet has some typos, i.e cart_level_discount_application needs an s at the end (Make sure there is no typos, and I think the snippet should work just fine, good luck)

    If you want to add an discount form (like the one in checkout) in your cart, or anywhere in your store you can check out this free Shopify Discounter Web Component

    Shopify Discounter Web Component supports:

    1. Discount codes
    2. Automatic discounts
    3. Gift cards
    4. Discount combinations
    5. Multi currencies
    6. Internalization
    7. Style customization using css variables
    8. Place it anywhere in your store

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search