Discount code on Cart page

Store Design
,

Topic summary

  • Goal: add a discount input on the cart page, align it to the right on desktop, and update the cart total dynamically after applying the code.

  • Context: Discount code is SAVE30, valid for products in the Electric Couches collection.

  • Proposed fix (CSS/alignment): Guidance to add Custom CSS in Theme settings to right-align the applied discount on desktop. CSS uses a media query (min-width: 768px) and positions span#applied-discount-code absolutely within .cart-row:has(.cart-sidebar-discount). A screenshot was provided to illustrate placement.

  • Dynamic update options: A third-party app (Discount Codes Anywhere) was suggested. It offers JavaScript events for real-time price updates after acceptance of a code, or a no‑code option that reloads the page once the discount is applied. Demo and app links were provided.

  • Status: No confirmation yet that the CSS alignment works or that dynamic pricing is implemented. Discussion remains open pending the original poster’s feedback.

Summarized with AI on December 12. AI used: gpt-5.
1

trying to add a discount field to cart page on this site: https://www.physioworldshop.co.uk/cart

I want it aligned right on desktop and I want it to update the cart price dynamically after clicking apply. please advise.

{% comment %}
  #############################################
  #  Mohamed El-Ghorfi Discount Code on Cart  #
  #                  [UPDATED]                #
  #############################################
  # Paypal Me: https://paypal.me/elghorfimed  #
  #              Buy Me A Coffee:             #
  #    https://www.buymeacoffee.com/elghorfi  #
  #############################################
  #           elghorfi.med@gmail.com          #
  #############################################
{% endcomment %}

  
    Discount Code:
    
      
      
    
  
  <small></small>
2

Hi @ChrisW3

Could you please let me know how can I get the discount code? We need to check the settings there as well.

Or do you just simply want the filed in the cart page where customer can apply their discount code?

Looking forward to hearing from you soon.

Best,

Lydia

3

The discount code is SAVE30 on these products: https://www.physioworldshop.co.uk/collections/electric-couches

4

Hi @ChrisW3

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 768px){
.cart-row:has(.cart-sidebar-discount) {
    position: relative !important;
}
span#applied-discount-code {
    position: absolute !important;
    right: 0;
}
}

image.png
image.png976×743 26.8 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

5

Hello! Thought I’d chime in here and say that I’ve had a hand in creating an app that would fit your needs. The app has JavaScript events that can be used to dynamically update the price after a discount has been accepted. You’ll have to have some JS knowledge to implement this, but we also offer a no code solution within the app which would reload the page once the discount code has been applied. You can test out the app here. Any feedback would be appreciated!

Discount Codes Anywhere

1 Like