Coupon code

Reference Growth Navigation · Pro Navigation 2 min read

One of your discount codes with a heading, a short text and a Copy button. It can also apply the code to the shopper’s cart when they copy it, so they don’t type it at checkout.

Caution

The block only shows the code; it doesn’t create the discount. Create it first in Shopify admin > Discounts. The sample codes WELCOME15 and SAVE20 won’t work unless matching discounts exist.

Add the block

1. Pick a layout

   In the mega menu panel of the preview, click Add block. Click Coupon code, hover over Coupon ticket (compact ticket) or Coupon strip (wide bar) and click Select.

   

   (1) Click Coupon code, (2) pick Coupon ticket or Coupon strip.

2. Enter your discount code

   In Edit Item, under General, replace the sample code in Discount code with your own. Spaces are removed and letters change to uppercase as you type.

   

   The Coupon code block in the preview, with its settings in Edit Item.

3. Set the texts

   Change the Heading, Text and Button label. Leave Apply the code automatically when customers copy it on to apply the discount on copy.

4. Save and publish

   Style it under Style, then click Save and Publish.

Settings

General

HeadingDefault: 15% off your first order / Extra 20% off sitewide

The offer. Defaults are for ticket / strip.

TextDefault: Use this code at checkout / Applied automatically when you copy the code

A short line under the heading.

Discount codeDefault: WELCOME15 / SAVE20

The code shoppers copy. It must exist in Shopify admin > Discounts. Defaults are for ticket / strip.

Button labelDefault: Copy

Text on the copy button.

Apply the code automatically when customers copy itDefault: On

Applies the discount to the shopper’s cart when they copy the code.

WidthDefault: 25% / 100%

How much of the mega menu row the block takes: Auto or 8.33% to 100%.

Style

LayoutDefault: The layout you picked

Ticket or Strip.

Accent colorDefault: #E11D48 / #0F766E

The highlight color of the coupon, for ticket / strip.

Visibility works as on every block; see Settings every block has.

Tips

• Match the block to the discount’s dates: use Visibility > Schedule publishing with the same start and end as the discount.
• Pair a Coupon strip with a countdown to add urgency to a limited-time offer.

Related pages

• CountdownAdd a countdown timer to the menu for flash sales, launches and holiday deadlines.
• Promo bannerAdd a banner with a heading, text and button to promote a sale or a new collection.
• NewsletterCollect email signups right from the menu with a short sign-up form.
• Blocks overviewAdd blocks such as links, images, products and countdowns to a mega menu or tab.

Was this helpful?

Report an issue