Set the system before styling individual sections.

Typography and layout

Establish hierarchy and page width first.

Open Theme settings in the Shopify theme editor. Set heading and body fonts, base type scale, page width, section spacing, and grid gaps before fine-tuning individual sections. A smaller screen may wrap headings differently, so verify both breakpoints.

Colors and appearance

Build reusable color schemes.

Define color schemes for backgrounds, text, borders, buttons, and accents. Then assign those schemes to sections. Appearance settings control the design direction, corner radii, and motion. The three design directions share one preset and the same commerce features.

See Design directions before changing the global direction on an established storefront.

Brand

Use complete, production-ready assets.

• Upload a legible logo that works at the configured width.
• Add a square favicon and verify it in a new browser tab.
• Set the social sharing image and current social profile links.
• Check logo contrast against every header color scheme.

Product cards and swatches

Match image treatment to the source catalog.

Choose a product card image ratio that suits the catalog. Use Adapt when products must remain fully visible and the source images have mixed proportions. A fixed ratio creates a more uniform grid but can crop media when the focal point is not set.

Enable swatches only for true visual options. Citera uses Shopify native swatch data first, then a manual color mapping when configured, and finally a text fallback.

Cart, data, and verification

Enable only what the store can support.

• Choose the cart drawer or full cart page behavior.
• Configure optional cart notes, gift orders, and shipping progress.
• Keep theme structured data enabled unless a dedicated schema app replaces the same output.
• Add site verification values only from the relevant search or merchant platform account.