• 05 March 2019

The Carter app for Shopify is required

Question from a Shopify merchant

Is it possible to add a discount field inside the product pages?

Answer

That's a fantastic idea to increase conversion! Especially with the recent addition of a Checkout button right inside the product pages, to skip the cart page (Carter was mainly built to add a coupon field in cart).

You need to use the Custom templates (developers section).

1. Choose a unique ID. In my example I wrote carter_product-page

2. Hit the purple button "Generate starting code"

3. This generates all the code you need (and even more) to copy/paste in your product page template.

4. Go to Online Store > Theme > Edit Code. Reach your product page template, probably called product.liquid or product-template.liquid.

5. Paste the snippet (the one you copied in step 3 above) where you can the coupon field to be displayed. Most likely near the Add to Cart and/or Buy Now buttons.
   Note: No need to copy the whole chunk of code at the same place in the product page template file. Actually, a recommended practice would be to move the <script> part near the end of the file, above the {% schema %} section, of course.

Note: each Shopify theme is different and coded differently. That means your theme's product-template.liquid file will look differently.

6. Style the coupon field and button to match your theme's style. You can use any CSS class or ID from your theme's stylesheet (from the theme.scss.liquid file, for example)

By default, it looks like this:

But you can make it look like the following, simply by adding the btn class to the Apply Discount button (again, each theme has different classes, btn might not exist in yours).

You could also add some margin to create a bit more space between the coupon field and the Add to Cart button. Or any design tweak you can imagine.

7. Test it live with a valid coupon code.

8. If you wish to show the subtotal updated in the cart page, you can use the snippet of code we made available.

You're a developer or have some coding skills? You can come up with anything you have in mind. For example, once the discount is applied in the product page, the product pricing could change or a discounted pricing could show up instantly after the coupon is applied.