Colors in Beyond

Edit theme → Theme settings → Colors

Three accents plus page, text, light, and dark. Story sections and product labels share this list.

Theme settings

Accents

Accent 1, Accent 2, and Accent 3. Use them for section backgrounds, labels, and the occasional Brand statement field.

Page, text, light, dark, borders, shadows

• Page background / Text: default canvas and copy
• Light background / Dark background: Light and Dark in section pickers
• Alert: errors and warnings
• Border opacity: strength of lines on About us and Text menu when Show block borders is on
• Enable drop shadows: on or off storewide

When Enable drop shadows is on, shadows appear on:

• The sticky header
• Navigation dropdowns and megamenus
• Drawers (cart, search, mobile menu, filters, and similar panels)
• Popups and the newsletter signup
• Sticky bars (product add-to-cart, quick add, cart checkout, collection filters)
• Quantity buttons on the product form
• Shop the Look cards and Shop the Banner hotspots
• Layered images in Overlapping media

When shadows are off, the theme usually draws a border in their place instead, controlled by Border opacity. A few elements only lose the shadow (slideshow arrows, pagination on hover, country/region dropdowns). Many story layouts look cleaner with shadows off; raise border opacity if the page needs more structure.

About us and Text menu can show block borders. Border opacity is how strong those lines appear, separate from the shadow toggle.

Alternating section backgrounds in a 1–2–1–2 pattern creates rhythm, for example page → accent → page → accent, or page → light → page. On a story homepage you might instead keep most sections on the page color and use one accent only behind Brand statement so that block is the pause.

On each section

Text color is Auto, Light, or Dark. Background color can be page, light, dark, or an accent. Auto is correct until type sits on a photo.

Darken image (and Typography’s image darkness) helps overlay headings on banners. About us media blocks use the section text color for accompanying copy.

A color that is not in Theme settings

See custom CSS. Prefer accents so story sections and product labels stay in family.

Button colors are in Buttons and inputs. Checkout and apps are unchanged.

Ask Sidekick

Open Sidekick from the theme editor toolbar (top right, next to the device preview icon), or press ⌘. (Ctrl+. on Windows). Describe your brand or the mood you want and it'll suggest colors, previewed before anything is applied to Theme settings → Colors.

"Suggest values for Accent 1, Accent 2, and Accent 3 for an editorial, story-led jewelry brand, plus a Page background and Text color that pair with them."

A fast way to get a starting palette, or a second opinion when you're stuck between two options, you still decide what to keep.

Troubleshooting

• Brand statement didn’t pick up the new accent: open the section and set Background color. Theme settings only define the list.
• Borders on About us look too strong: lower Border opacity, or turn off Show block borders on that section.
• Buttons didn’t change: Buttons and inputs.
• Checkout is unchanged: Shopify checkout, not the theme.