Coupons Widget¶
Display a row of eye-catching coupon tickets on any page. Each ticket can show a title and a short description, and you can give each one a coupon code or a link. When used with the Dinosaur theme, clicking a ticket applies its coupon code straight to the customer's cart.
Page Builder name: Coupons | PapaThemes Dinosaur — Version: 1.0.1
Add it to your page¶
- In your BigCommerce control panel, open Storefront → Page Builder (or edit a page and open Page Builder).
- Find the Coupons | PapaThemes Dinosaur widget in the widget panel on the left.
- Drag it onto the spot where you want the coupons to appear.
- Four sample coupons appear. Select the widget to open its settings and customize each one.
Settings¶
The widget starts with 4 coupons. Each coupon has its own Content tab with the options below. To edit the title and description text, switch the page to edit mode and click directly on the text inside a coupon.
Content¶
| Option | What it does | Default |
|---|---|---|
| Page color | The color shown behind the small notch cut into the left edge of the ticket. Match this to your page background for a clean "cut-out" look. | #ffffff |
| Background color | Fill color of the coupon ticket. | #ffffff |
| Border color | Color of the ticket border and dashed divider line. | #d9d9d9 |
| Width | Sets the ticket width. Choose the unit (px or %), then enter a value for Desktop, Tablet, and Mobile. | px, 140px desktop / 140px tablet / 140px mobile (or 20% if % is chosen) |
| Text align | Aligns the title and description inside the ticket. Pick Left, Center, or Right for Desktop, Tablet, and Mobile. | Left |
| Coupon code | The discount code applied to the cart when the ticket is clicked (Dinosaur theme). | empty |
| Coupon link | A web address to open when the ticket is clicked. | empty |
| Show title | Turns the title line on or off. | On |
| Title style | Default uses the theme styling. Custom reveals font family, font weight, font size, mobile font size, text color, and hover text color so you can style the title yourself. | Default |
| Show description | Turns the description line on or off. | On |
| Description style | Default uses the theme styling. Custom reveals font family, font weight, font size, mobile font size, text color, and hover text color for the description. | Default |
Coupons (repeatable)¶
Coupons are a repeatable group, so you can add as many as you like.
- Add a coupon with the add button at the bottom of the coupon list in the settings panel.
- Remove a coupon using the delete (trash) icon on that entry.
- Reorder coupons by dragging them up or down in the list.
Each coupon uses the Content options shown in the table above.
Tips¶
Tip
Set Page color to the same color as the section background so the notch on each ticket looks like a real punched-out coupon edge.
- For a clickable coupon, fill in either a Coupon code (to apply the discount to the cart on Dinosaur) or a Coupon link (to send shoppers to a landing page).
- Keep descriptions short so they fit neatly on one or two lines across all devices.
- Use the Width Tablet and Mobile values to control how many tickets fit per row on smaller screens.
- Turn on Custom title or description style only when you need fonts and colors that differ from your theme.