Brand style is the set of colors, corners and fonts your offers share. Set it once under Design, then copy it into your offers, so they match each other and the rest of your store without editing each offer by hand.
What brand style changes
Brand style works differently for each offer type. Fonts, the announcement bar and Classic bundles change as soon as you save. Colors, corners and the selected-option style reach an offer only when you update that offer, as described in Step 6.
Fonts apply to every offer type. This table shows which colors and shape settings each offer type takes from your brand style.
Offer type | What it takes from your brand style |
Volume discount on the Modern widget, including Mix and match, Different products, Progressive gifts and Buy X, get Y free | Accent, Text, Headings, Text on buttons and badges, Buttons, Cards, Corners and Selected option |
Volume discount on the Legacy widget | Accent, Text, and Text on buttons and badges |
Combo bundle | Accent, Text, Headings, Text on buttons and badges, Cards, Corners and Selected option |
Fixed pricing on a product page | Accent, Text, Headings, Text on buttons and badges, Buttons, Cards and Corners |
Dynamic pricing, Sectioned bundle, Fixed pricing on its own page and Buy X get Y | Every color in the Colors and Bundle pages cards. Corners and Selected option don't apply. |
Product discount | Text, Headings, Text on buttons and badges, Buttons and Cards |
Classic bundle | Text and Headings only, store-wide, as soon as you save |
Shipping discount and the older offer types (Mix and match (old), Customize bundle and Infinite bundle) | No colors or shape settings |
Before you start
Make sure the Appstle Bundles app embed is on in your theme. Design → Where offers show says App embed on when it is. Your fonts and store-wide colors reach your store through it.
Have your colors ready as six-digit hex codes, such as #1a1a1a.
To use a custom font, make sure your theme already loads it.
Set your brand style
In the Appstle Bundles app, click Design.
In the Your brand style card, click Customize brand style.
The card shows your current colors, corners and fonts, and how many offers use them. The Brand style page has the settings on the left and a preview on the right. Offer colors holds the looks, colors and shape your offers take when you update them, and Store-wide holds the fonts, which go live when you save. Use Showing above the preview to choose which offer it shows with your brand style.
Step 1: Start from a look
A look fills in the colors, corners and selected-option style in one click. Nothing is saved until you click Save.
Click Match my store to copy your theme's button colors and corners. Appstle fills in Accent, Text on buttons and badges and Corners, then shows Matches followed by your theme's name. It doesn't copy your theme's fonts.
Or click one of the looks: From your theme, Clean, Bold, Soft, Luxe or Playful. Hover over a look to see it in the preview.
This table shows what each look sets.
Look | Colors | Corners | Selected option |
From your theme | Your theme's colors | Each offer's own | Each offer's own |
Clean | Black and white, near-black accent | 12 px | Outline |
Bold | Dark green | 14 px | Tint |
Soft | Brown on cream | 18 px | Tint |
Luxe | Gold accent, black buttons | 0 px | Outline |
Playful | Orange | 22 px | Tint |
Step 2: Choose your colors
Under Colors, click a color to open the color picker. Choose a color, or type a six-digit hex code. To go back to your theme's color, click Use your theme's color.
These colors change the following parts of your offers.
Setting | What it colors |
Accent | Selected options, badges and progress bars, and the announcement bar's background |
Text | Option titles, prices and product names, also in Classic bundles |
Headings | Offer titles and section headings, and Classic bundle descriptions |
Text on buttons and badges | The text on buttons and badges, and the announcement bar's text |
Buttons | The Add to cart and Choose buttons inside offers |
Cards (under More options) | The background of options and product cards |
When a color says From your theme, Volume discounts on the Modern widget, Combo bundles and Fixed pricing bundles on a product page use your theme's color, and they change when your theme does. Every other offer, including a Volume discount on the Legacy widget, uses Appstle's standard colors, which are mostly black and white.
Step 3: Set the corners and the selected option
Under Shape, choose how rounded your offers are and how the option a shopper picks stands out.
Corners: choose Per offer to keep each offer's own corners, or Same for all to use one size. With Same for all, enter a size from 0 to 32 in Corners in pixels. Corners apply to Volume discounts, Combo bundles and Fixed pricing bundles on a product page. Other bundle pages have fixed corners.
Selected option: choose Per offer, Outline (a border in your Accent color) or Tint (a light shade of your Accent color). It applies to Volume discounts and Combo bundles. Tint is available only after you pick an Accent color.
Step 4: Set the colors for bundle pages
The Bundle pages card sets the colors for Dynamic pricing, Sectioned and Fixed pricing pages, and Buy X get Y. To go back to a standard color, click Use the standard color.
Open More options to see the last three colors in this table.
Setting | What it colors |
Buttons on hover | Sectioned bundles and Fixed pricing bundles on their own page |
Unavailable buttons: background | Sectioned bundles and Fixed pricing bundles on their own page |
Unavailable buttons: text | Sectioned bundles and Fixed pricing bundles on their own page |
Bundle page background | Behind Dynamic pricing, Sectioned and Fixed pricing pages, and around Buy X get Y |
Unavailable fields: background | Disabled buttons on Dynamic pricing and Buy X get Y, and disabled dropdowns |
Unavailable fields: text | The text on those disabled buttons and dropdowns |
Step 5: Choose your fonts
Under Fonts, choose a Heading font and a Body font.
Choose Theme default, System sans-serif, Arial, Verdana, Georgia, Times New Roman or Courier New.
Or choose Custom font… and enter the exact name your theme uses in Font name, such as Poppins. Custom fonts must already be loaded by your theme.
Fonts apply to every offer as soon as you save.
Step 6: Save and update your offers
Click Save. Appstle shows “Brand style saved. Fonts, the announcement bar and Classic bundles show it now.”
If some offers were using your previous brand style, the Update N offers too? window lists them. Click Update N offers to copy your new brand style into them, or click Not now to keep their old colors. Offers you skip show as Own look.
New offers start with your brand style, so you don't need to update them.
Use your brand style on offers that have their own look
An offer has its own look when its colors, corners or selected-option style differ from your brand style. You can bring these offers in line at any time.
Open Design. The Your brand style card says how many offers keep their own look, for example “Used by 4 of 5 offers. 1 keeps its own look.”
Click Use on N offers.
In the Apply your brand style to N offers? window, check which offers it names, then click Apply to N offers.
Appstle copies your brand colors, and your corners and selected-option style if you set them, into those offers. Their other style settings stay as they are. When it finishes, it shows how many offers were updated, already used your brand style, were skipped or weren't saved.
Applying your brand style replaces the colors you set by hand in every offer that keeps its own look, and you can't leave one out. To update only some offers, open each one and pick Brand style under Look instead.
To change one offer only, open it and go to step 3, Look and texts. Under Look, pick Brand style to give it your brand style, or pick another look or change its colors to give it its own look, then save the offer. The Your brand style summary there has an Edit link to this page.
Things to know
A saved offer keeps its own copy of its colors. Changing your brand style updates an offer only when you click Update N offers or Use on N offers, or pick Brand style in the offer's Look. The exception is a color left on From your theme in a Volume discount on the Modern widget, a Combo bundle or a Fixed pricing bundle on a product page, which follows your theme.
In the Colors card, #000000 for Accent, Text, Headings or Buttons, and #ffffff for Text on buttons and badges or Cards, count as From your theme. If you pick one of them, the field shows From your theme, and Volume discounts on the Modern widget, Combo bundles and Fixed pricing bundles on a product page use your theme's color. For pure black or white in those offers, use a value one step away, such as #010101 or #fefefe.
Classic bundles use only Text and Headings, and they change as soon as you save. The offer editor shows a Store-wide colors badge for them.
The announcement bar uses Accent for its background and Text on buttons and badges for its text. The bar shows when Show the announcement bar is on under Design → Display settings and at least one active offer has Show this offer in the announcement bar turned on.
If you leave the page with unsaved changes, Appstle asks whether to discard them or keep editing.
Older articles and screens used different names for these colors. This table matches them to the names you see now.
Old name | Name now |
Primary Color, Main Color | Accent |
Primary Text Color, Main Text Color | Text |
Heading Text Color | Headings |
Secondary Text Color | Text on buttons and badges |
Button Background Color | Buttons |
Product Card Background Color | Cards |
Primary Hover Color, Button Hover Color | Buttons on hover |
Primary Disabled Color | Unavailable buttons: background |
Primary Disabled Text Color | Unavailable buttons: text |
Bundle Page Background Color | Bundle page background |
Field Disabled Background Color | Unavailable fields: background |
Secondary Disabled Text Color | Unavailable fields: text |
FAQs
Why didn't my offers change after I saved my brand style?
Saving changes fonts, the announcement bar and Classic bundles at once. For other offers, click Update N offers in the window that appears after you save. If you clicked Not now, or no window appeared, open Design and click Use on N offers. Your store then updates in the background, so allow a short while before you check the storefront.
Why is Tint greyed out?
Tint is a light shade of your Accent color, so you need to pick an Accent color first. While Accent says From your theme, only Per offer and Outline are available. Picking #000000 for Accent also counts as From your theme, so use another color, such as #1a1a1a.
Why can't I change the corners of my Dynamic pricing or Sectioned bundle?
Corners apply to Volume discounts, Combo bundles and Fixed pricing bundles on a product page. Dynamic pricing, Sectioned bundles, Fixed pricing on its own page and Buy X get Y have fixed corners.
Why does Match my store say it couldn't read my theme?
Appstle reads the button colors and corners from your theme's settings. If it can't, it says it couldn't read the colors of your theme. Pick your colors by hand, or choose a look. If it says “Couldn't reach your theme just now,” click Try again.
Why doesn't my custom font show?
Check that the name in Font name is exactly the name your theme uses, and that your theme loads the font. Appstle only applies the name you enter.
Where did Design → Appearances go?
Its colors now live on the Brand style page, under the names in the table above. Opening the old Appearances address takes you to the Brand style page.






