Custom CSS
Add your own CSS when the built-in design settings don't go far enough.
This is the developer escape hatch. Everything you can do with the Colors, Typography, and Spacing & Sizing cards, do there first — those settings survive app updates cleanly.
Add custom CSS
Open your bundle and go to the Design tab.
Open the Custom CSS Settings card, marked Only for Developers. It starts collapsed.
Switch the card on with the toggle in its header. While the toggle is off, your CSS is saved but not used.
Type your CSS into the text area in the card.
Click Save and check a real product page.
CSS applies to this bundle only. It doesn't carry over to other bundles.
Find the right selector
Open a product page showing the bundle on your storefront.
Right-click the element and choose Inspect.
Copy the class from the element panel and write your rule against it.
These classes are in the offer's markup:
| Class | What it is |
|---|---|
.ia-deal-block | The whole offer block. |
.ia-deal-block-header | The block title. |
.ia-card | One tier. .ia-card--selected is added to the selected tier. |
.ia-card-title and .ia-card-subtitle | A tier's title and subtitle. |
.ia-card-price and .ia-card-full-price | A tier's price and its struck-through full price. |
.ia-card-saving | The label tag next to the title (horizontal layout). |
.ia-card-badge | The badge in the Simple style. |
When your theme fights back
Theme stylesheets sometimes load after the app's and win. If a rule looks correct but nothing changes:
- Make the selector more specific by adding a parent class.
- As a last resort, add
!importantto the declaration.
Things to check before you ship
- Look at the page on mobile as well as desktop.
- Test in an incognito window so you're not seeing cached CSS.
- Keep the CSS short. Long overrides break when the block's markup changes.
Keep a copy
Paste your CSS somewhere outside the app too. A duplicated bundle carries its CSS with it, but a deal you create fresh from a template starts with none, and a copy makes it easy to roll back.