Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
So I’ve received about 5 emails from customers asking where they can enter their discount code. The problem is by DEFAULT on mobile the order summary is hidden in checkout and has to be expanded to see the discount field. I spent a minute trying to find the discount field myself when testing.
How can we make the discount field visible at checkout for a better experience?
hello there
To make the discount field more visible at checkout and provide a better user experience for customers, here are some suggestions:
Display the discount field prominently: Make sure the discount field is visible on the checkout page, preferably near the top of the page or in a prominent location. This will make it easier for customers to find and use.
Include a label or message indicating the presence of the discount field: Add a message or label to indicate that there is a discount field available for use. This could be something like "Have a discount code? Enter it here."
Provide a visual cue to expand the order summary section: Since the discount field is often located within the order summary section, provide a visual cue for customers to expand this section. This could be a button or link that says "Show order summary" or a small arrow icon that expands the section when clicked.
Test the checkout experience on mobile devices: Make sure to test the checkout experience on a variety of mobile devices to ensure that the discount field is easily visible and accessible on all screen sizes.