Discount code bar

Promote discounts with a special 'copy discount' code that customers can add at checkout.

Key features

Copy discount code button

Color or media background

Custom discount button icons

Blocks

Heading

Text

Discount

Content layout

---

_{Click section to find settings}

Vertical padding	0 - 20
Mobile vertical padding	0 - 20
Horizontal gap	Global Custom (0 - 10)
Mobile vertical gap	0 - 10
Mobile alignment	Left / Center / Right

Discount code button

---

Enter your discount code and choose how to display the "copy code" button. Customize the size, style, color, and icon.

Use your discount code generated in your Shopify Discounts page. Read Shopify's help guide to learn how to create discount codes.

_{Click section to find settings}

Display	Code button Code with copy button
Code	Enter your discount code as set up in the Shopify admin.
Size	X / S / M / L
Style	Solid Outline Dashed
Max width	150 - 225px
Color scheme	Default Primary Secondary Soft Overlay Overlay soft
Icon
Use custom icon

Background media

---

Display an image, solid color, or autoplay video (without sound) as the section background.

_{Click section to find settings}

Media type	Color Image Video

Image

_{Click section to find settings}

Image
Custom mobile image

Color

_{Click section to find settings}

Background color	Color scheme Custom
Color scheme	Match section Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Custom	Background Text

Video

_{Click section to find settings}

Video
Video focal point
Custom mobile video
Mobile video focal point

Overlay colors

_{Click section to find settings}

Overlay opacity	0 - 100%
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2

Content blocks

---

Add heading and text content in the nested block settings.

Heading block

_{Click Heading block to find settings}

Heading	Enter text to display heading.
Heading size	1 - 6

Text block

_{Click Text block to find settings}

Text	Enter text to display next to heading.
Heading size	1 - 4

Section styles

---

Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.

_{Click section to find settings}

Content area

Width	Full width Full width padded Page width
Full width on mobile	Available for Full width padded option.
Set content to page width
Border
Corner radius	Available for Full width padded and Page width options.
Dropshadow

Section

Top padding	0 - 27
Bottom padding	0 - 27
Dividers	None Top only Bottom only Both
Force dividers full width
Color scheme	Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID	Link directly to the section on any page. Learn more