Theme Styles, Color Schemes, and Global Settings

Firefly combines Shopify’s native Theme style selector with reusable color schemes and detailed global component settings. Set the overall direction first, then refine only the values your brand needs.

Choose one of four Theme styles

The Theme style selector shows these exact names:

The color shown in the table is each scheme’s starting background. Every scheme also stores text, button, button-label, border, and optional gradient values. A Theme style changes more than color: it can also set fonts, type scale, page spacing, card treatment, radii, shadows, and control styling.

Important: “Firefly (Glow direction)” is a descriptive name used in this guide. The actual Shopify selector option is Firefly, not Glow.

Understand the five named color schemes

Color-sensitive sections provide the same five choices:

• Accent 1 — the primary brand/action scheme.
• Accent 2 — a secondary emphasis scheme.
• Background 1 — the primary page surface.
• Background 2 — an alternate surface for separation.
• Inverse — a high-contrast surface that reverses the normal light/dark relationship.

Open Theme settings > Colors to edit the scheme definitions. Each scheme includes Background, Background gradient, Text, Solid button background, Solid button label, and Border. Sections reference a scheme by name, so editing one definition can update many sections consistently.

A practical scheme workflow

1. Choose the Theme style closest to the intended store direction.
2. Keep the five scheme roles distinct. Use Accent 1 for primary calls to action, Background schemes for long-form content, and Inverse where strong contrast is appropriate.
3. Preview buttons, links, icons, borders, inputs, product cards, overlays, and form messages on each edited scheme.
4. Check both desktop and mobile pages containing the scheme. Real images, gradients, and app output can change perceived contrast.

Use a custom brand color

Under Custom theme style, Firefly provides:

• Enable custom theme style
• Custom brand color
• Preferred text color

The custom option is not a fifth Theme style. It overrides the selected style’s primary brand/action color while preserving that style’s typography, major surfaces, and layout direction. Firefly may use black or white instead of the preferred text color when that produces better readability against the chosen brand color.

Always inspect real buttons, badges, focus indicators, icons, announcement content, promo content, and product actions after enabling a custom color. Automated color selection is a safeguard, not a substitute for reviewing the actual storefront.

Global setting groups

Firefly’s Theme settings include the following groups:

• Logo — logo image, desktop/mobile width, and favicon.
• Colors — legacy page colors and the five reusable color schemes.
• Typography — heading/body fonts and scale.
• Layout — page width, page margin, section spacing, and grid spacing.
• Buttons, Variant pills, and Inputs — border, radius, opacity, shadow, and offset controls.
• Product cards, Collection cards, and Blog cards — style, image padding, alignment, color scheme, borders, radius, and shadows.
• Content containers, Media, Dropdowns and pop-ups, and Drawers — component borders, radii, and shadows.
• Badges — placement, corner radius, sale scheme/text, and sold-out scheme.
• Icons — accent treatment and stroke width.
• Brand information — headline, description, image, and image width.
• Social media — URLs used by header, mobile menu, footer, and other social-link surfaces.
• Search behavior — predictive search, vendor, and price display.
• Currency format — optional currency-code display.
• Cart — cart type, notes, badges, drawer collection, progress messaging, and upsells.
• Custom theme style — primary brand-color override.
• Motion and borders — global motion preference and border width.

Section settings versus global settings

Global settings define reusable defaults and component styling. Individual sections then choose content, layout, color scheme, responsive behavior, and spacing for that instance. If one section looks different from the rest, check both its local Color scheme and the corresponding global card, media, button, or input settings.

Changing Theme style after setup

Before switching an established store to another style, duplicate the theme. The style selector can replace multiple global values at once. After switching, recheck custom color overrides, section schemes, logo sizing, card layouts, header/footer surfaces, product actions, cart, forms, and mobile spacing.

Continue with Header, Footer, and Global Storefront Elements.