Skip to content

Colors in Emerge

Edit themeTheme settingsColors

Emerge Colors in Theme settings

Three accents plus page, text, light, and dark. Shape colors on sections pull from the same list.

Theme settings

Accents

Accent 1, Accent 2, and Accent 3 appear in section background pickers and in shape color.

Set them to colors you are willing to see as a large field, not only as a button. A neon accent that works as a 4px highlight may fail as a full-width wave.

Accent used on a section

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 hairline borders
  • 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
  • The main page wrapper when the footer overlaps content

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). Turn shadows off for a flatter Cafe-like surface, then raise border opacity if you want quiet lines without using a shape.

Alternating section backgrounds in a 1–2–1–2 pattern creates rhythm, for example page → accent → page → accent, or page → light → page. You can also let the shape carry the accent while the section body stays on the page color.

On each section

Text color is Auto, Light, or Dark. Auto is the default; Light or Dark when type sits on a photo or a strong accent. Darken image helps overlay headings.

Shape color is separate from background color. A section can have a page-colored body and an Accent 1 bottom wave so the next section appears to rise through it.

A color that is not in Theme settings

See custom CSS. Prefer accents so shapes and sections 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 a laid-back, cafe-style clothing 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.

Opening Sidekick from the theme editor toolbar

Troubleshooting

  • The wave is the wrong color: open the section and set Top/Bottom shape color. That is not Theme settings → Colors, but it picks from this list.
  • One section ignored the palette: that section has its own Background color.
  • Buttons didn’t change: Buttons and inputs.
  • Checkout is unchanged: Shopify checkout, not the theme.