comersDocs
Install guide
Colors, fonts & global settings

Brand & global settings

Colors, fonts & global settings

Set your logo, palette, typography, page width and the Comers design system once, for the whole store.

15 min8 stepsFor merchants

Before you start

  • Your logo as a PNG or SVG with a transparent background.
  • Your brand colours as hex codes, for example #0C0C0C.

What you will have

Every page uses your brand colours, fonts and spacing before you touch a single section.

  1. Upload your logo and favicon

    Theme settingsLogo

    This is the store-wide logo. The header uses it automatically unless you upload a different one in the header section itself.

    Theme settingsLogo1Click to open this group2LogoLogoSelect imageMain logo image used across the store.Logo width100pxDisplay width of the logo.FaviconSelect imageThe small icon shown in the browser tab. A square image works best.Theme editor · Theme settings › Logo

  2. Set the eight core colours

    Theme settingsColors

    These eight colours drive every section. Start here before overriding colours on individual sections.

    Theme settingsColors1Click to open this group2ColorsBackground#F6F6F4Page background. Default #F6F6F4.Foreground#0C0C0CMain text colour. Default #0C0C0C.Surface#FFFFFFCards, panels and drawers. Default #FFFFFF.Muted text#6F6F6FSecondary text such as captions and helper lines.Border#E6E6E2Dividers and outlines.Accent#0C0C0CPrimary buttons and highlights.Accent contrast#FFFFFFText that sits on top of the accent colour.Sale#9A3412Sale prices and discount labels.Theme editor · Theme settings › Colors

    TipKeep strong contrast between Foreground and Background, and between Accent and Accent contrast, so text and buttons stay readable.

  3. Choose fonts

    Theme settingsTypography

    Pick a Heading font and a Body font from Shopify's font library, then fine-tune the overall text size with Body scale.

    Theme settingsTypography1Click to open this group2TypographyHeadingsyne_n7Used for section and page headings.Bodyfigtree_n4Used for paragraphs, buttons and navigation.Body scale100%Scales all body text. 100 is the default size.Theme editor · Theme settings › Typography

  4. Set layout, cart type and product columns

    Theme settingsLayout

    These control the overall width and rhythm of the store, plus a few store-wide switches.

    Theme settingsLayout1Click to open this group2LayoutPage width1280pxMaximum content width. Default 1280.Section spacing56pxVertical gap between sections. Default 56.Cart typeDrawerDrawer (slides in) or Page (dedicated cart page).Show mobile tab barTurns the bottom navigation on phones on or off.Collection & search product columns54, 5 or 6 products per row on desktop.Theme editor · Theme settings › Layout

  5. Add your social profiles

    Theme settingsSocial media

    Paste the full URL for each network you use: Facebook, Instagram, TikTok, X, Pinterest and YouTube. Any section that shows social icons, including the footer, reads from here. Leave a field empty to hide that icon.

    Theme settingsSocial media1Click to open this groupTheme editor · Theme settings › Social media

  6. Tune the Comers design system

    Theme settingsComers design system

    This group sets the shared look of all Comers sections so the store feels consistent.

    Theme settingsComers design system1Click to open this group2Comers design systemDisplay heading fontAa ChangeLarge display headings, such as the hero.Default media ratioAuto (adapt to image)Shape of images and videos: Auto, 1:1, 4:5, 3:4, 2:3, 16:9, 9:16 or Custom.Heading size100%Body size100%Heading weightBoldThe global type scale.Section box shadow / border radius / paddingEmptyThe frame around each section.Section max width1320pxDefault 1320.Text animation presetFade upHow text enters as you scroll. Choose None to switch animation off.Folder cardsSelected sectionsStacked-card scrolling: Off, Selected sections, or All homepage sections.Show product breadcrumbsBreadcrumb trail on product pages.Theme editor · Theme settings › Comers design system

  7. Decide where the floating chat appears

    Theme settingsFloating chat

    Choose the pages that show the floating chat button, separately for desktop and mobile, and edit the greeting bubble text.

    Theme settingsFloating chat1Click to open this groupTheme editor · Theme settings › Floating chat

    TipBy default the mobile chat button shows on the homepage only, to keep product and cart pages uncluttered.

  8. Show or hide currency codes

    Theme settingsCurrency format

    Show currency codes adds the code after prices, for example “$40.00 USD”. Leave it on if you sell in more than one currency.

    Theme settingsCurrency format1Click to open this groupTheme editor · Theme settings › Currency format

Related

Customise the header Advanced control