Enable your customers to input discount codes in their cart
This article walks you through:
- How to add discount codes in cart
-
How to display discount codes that have been applied in your cart
- Applying discount codes via URL query string
Introduction
Nyla's discount codes feature enables you to:
- Enable customers to add discount codes in cart
- Enable discount codes to be added using a CTA from anywhere on the site
- Apply discount codes via URL query string
- Use and display Shopify's automatic discounts
In order to enable this feature, first you should enable the app within Apps. This will then make the relevant properties, link and form actions available for use.
Currently customers can only add one discount code at a time, it is not possible to stack discount codes.
Adding Discount Codes in cart to your site:
Nyla has the following blocks to add discount codes directly to your site (Blocks > Nyla > Apps):
- Discount Code: Input
- Appears with the form and CTA always visible in the cart once items are added
- Discount Code: Minimal
- Appears with the form and CTA always visible in the cart once items are added
These blocks serve to add the feature to your site quickly and easily. They can also serve as a jumping off point to create your own custom UI if you prefer.
Displaying discounts applied to cart items:
Nyla includes the following blocks to display the discount applied to specific products in your cart:
- In product discount messaging
- Displays the name of the discount and the amount discounted.
- This works for product-level automatic discounts and discount codes that have been set up in Shopify
- Product price with discount applied
- Displays the original price and the price after the discount
⚠ Only discounts applied to the product level will be displayed on the cart item.
Discounts applied to the total cart sum will not be displayed in the cart items themselves. You can use the apps.discountCodes.discountCode property to show discount codes that have been added to the cart
See here for a video to see how to add these blocks:
Building Discount codes UI:
Discount codes use a form along with a form action. You can use properties to display what discount code has been added along with a link action to enable them to remove a discount code that has already been added.
You can see the details for each here:
Discount codes added using a CTA
You can make it possible to apply a specific discount code using a CTA.
When you set the link action to apply the discount code, you'll be prompted to enter the discount code you want to make available.
You can see the details here:
Discount codes added via a URL query string
In the discount codes app settings, you can set a link so that customers who visit your site using that link automatically have a discount code applied.
Customers who visit your site with that exact query string will have the discount code applied to their cart automatically.