Guild documentation

Appearance

Theme settings ​

Documentation scope: Guild 0.1.x pre-release builds. The exact public release version will be confirmed in the changelog before Theme Store publication.

Theme settings control the global look and feel of Guild. They apply across the storefront unless a section or block uses its own settings, so it is better to set the baseline here before fine-tuning individual sections. Use Theme editor workflow when you are not sure whether a change belongs in Shopify Admin, Theme settings, templates, sections, blocks, apps, Custom HTML, Custom Liquid, or code. For Shopify's platform-level theme settings workflow, see Shopify's theme settings documentation.

Colors ​

Use Colors to create and manage color schemes. Color schemes include background, background gradient, text, heading, link, accent, card, button, and button label colors. Guild ships eight default schemes: three light surfaces and five high-contrast surfaces, including smoked blue, turquoise, cranberry red, walnut brown, and deep slate. A small, deliberate set of schemes is usually easier to maintain than a different palette on every section.

Recommended use:

  • Create one main light scheme for most pages.
  • Create one alternate scheme for highlighted sections, banners, or promotional content.
  • Keep button label colors readable against button backgrounds.
  • Test link and accent colors against both light and dark backgrounds.
  • Use color schemes consistently instead of styling every section separately.

Rich text highlight behavior:

  • Rich text blocks with Custom underline style can use None, Fade, Accent, Shadow highlight, Underline highlight, Background highlight, Custom highlight, or Image background.
  • Shadow highlight, Underline highlight, Background highlight, Custom highlight, and Accent use the selected highlight color scheme. Image background uses the block's Background image picker and applies only after an image is selected.
  • Custom underline color can keep the selected scheme default or use the current content color.
  • Custom highlight shape accepts pasted SVG markup. When it is blank, Guild uses the built-in brush shape.
  • Review contrast when using highlight or accent effects, especially on dark or highly saturated color schemes.

Typography ​

Use Typography to set the global body and heading baseline. Body settings include Body font, Body font weight, Bold text weight, Body font style, Emphasis font style, Body font width, line height, letter spacing, and text transform. Heading settings include Heading font, Heading font weight, Heading font width, line height, letter spacing, and text transform. There is no separate global Price font weight setting; price components use their own defaults and local Font weight controls where available.

Many section and block controls use three separate typography concepts:

  • Typography selects the Body or Heading typography role where that choice is available.
  • Text style controls Default, Muted, Italic, or Muted italic presentation.
  • Font weight controls Default, Light, Regular, Medium, Semi bold, Bold, or Extra bold independently from Text style. Default keeps the semantic weight owned by the current component rather than forcing one numeric weight everywhere.

For automatic title and heading-like controls, Text style is available only when Typography is set to Body. Font weight and Uppercase remain available for both Heading and Body, so merchants can adjust emphasis without switching typography roles.

Recommended use:

  • Use a readable body font for product descriptions, policies, and long-form content.
  • Use heading settings to express brand style while keeping headings readable on mobile.
  • Set Bold text weight as the shared strong-emphasis baseline; use local Font weight only when a specific component needs a different emphasis.
  • Avoid applying uppercase styling too broadly, especially to long body text.
  • If headings wrap awkwardly, adjust heading size, line height, or letter spacing.
  • Review Light, Medium, Semi bold, and Extra bold on the actual selected Shopify font. Some font families do not provide every weight variant, so browser fallback can differ between families.

Font sizes ​

Use Font sizes to set desktop and mobile body text sizes. Heading, price, and quote controls use size scales relative to the current body size.

Recommended use:

  • Review desktop and mobile body sizes before publishing.
  • Keep product prices easy to scan.
  • Reduce heading scales or mobile body size when long headings wrap too aggressively.
  • Avoid very small body text, especially for product details and policy pages.

Layout ​

Use Layout to set global layout behavior that affects the storefront structure. Review this before making page-specific spacing decisions, especially on stores that mix full-width editorial imagery with tighter product grids.

Recommended use:

  • Set the global layout baseline before fine-tuning individual sections.
  • Review wide content, boxed content, collection grids, and product pages after changing layout behavior.
  • Check mobile previews because global layout changes can affect multiple templates.

Spacing ​

Use Spacing to adjust body spacing, heading spacing, and section spacing on desktop and mobile.

Recommended use:

  • Increase section spacing for editorial or premium layouts.
  • Reduce section spacing for denser merchandising pages.
  • If pages feel crowded on mobile, increase Section spacing on mobile or review section-specific padding.
  • If headings feel detached from their content, review heading top and bottom spacing scales.

Radius ​

Use Radius to control the rounding of general elements, media, and tags.

Recommended use:

  • Keep media radius consistent across product images, editorial images, and cards.
  • Use stronger rounding only when it is part of the brand style.
  • Check repeated card grids after changing radius values.

Buttons and inputs ​

Use Buttons to set global button height and button border width. Use Inputs to control input radius and input border width.

Recommended use:

  • Keep buttons tall enough for touch interaction.
  • Keep primary buttons visually stronger than secondary buttons.
  • Keep form inputs clear against the selected background color.
  • Test contact and newsletter forms after changing input styles.

Shadows ​

Use Shadows to adjust default shadow blur and opacity.

Recommended use:

  • Use subtle shadows for cards and elevated content.
  • Avoid strong shadows on dense grids, because repeated cards can become visually busy.
  • Check both light and dark color schemes after changing shadow settings.

Tags ​

Use Tags to control tag padding and the gap between tags. Tags are useful for short labels, filters, campaign links, or content highlights.

Recommended use:

  • Keep tag labels short.
  • Test tags on mobile when several tags wrap onto multiple lines.
  • Use consistent tag radius and spacing across the store.

Localization and RTL stores ​

Guild uses Shopify locale data for the page language and can switch the page direction to RTL direction when the active locale uses an RTL language. For Shopify language setup, translation requirements, and market language behavior, see Shopify's localization and translation documentation.

Recommended use:

  • Add and manage languages in Shopify admin before reviewing localized storefront behavior.
  • Review header, footer, product cards, slideshows, popups, forms, and cart pages after enabling an RTL language.
  • Check directional icons, carousel arrows, utility separators, and text alignment in a storefront preview.
  • Keep translated text lengths in mind, because labels and buttons can wrap differently across languages.

Important behavior:

  • Page direction is controlled by the active Shopify locale, not by a separate theme setting.
  • Existing RTL handling improves layout direction, carousel direction, and mirrored decorative controls, but full RTL readiness still requires rendered browser QA.
  • Do not claim a language or RTL setup is final until the store has real translated content and the target locale has been tested.

Brand assets ​

Use Brand assets for the store logo, favicon, and social media preview image. These assets appear in different contexts, so check the header, browser tab, and social preview rather than assuming one upload covers every use cleanly.

Recommended use:

  • Add a logo that works on the header background colors used in the store.
  • Add a square favicon image. A square .png image at least 180 x 180px is recommended.
  • Add a Social media preview image as the fallback preview image when a page does not provide its own image. A 1200 x 630px .jpg or .png image is recommended.
  • Review the header after changing the logo.
  • Review social media previews after changing the social media preview image.

Social media ​

Use Social media to add public social media profile links used by social link blocks, footer utilities, or other social areas.

Recommended use:

  • Add only active public profiles.
  • Keep social media links aligned with the brand accounts used elsewhere.
  • Leave unused platforms blank instead of linking to empty or placeholder profiles.

General utilities ​

Use General utilities for boxed content padding, default reduced opacity, and image overlay hover opacity.

Recommended use:

  • Use Box padding to control the default padding for boxed sections, cards, and content blocks.
  • Use Default reduced opacity for muted, faded, or disabled UI elements.
  • Use Image overlay hover opacity carefully so image links remain readable and not visually heavy. Use Enable smooth scrolling only when the store benefits from a softer desktop scrolling feel; visitors who prefer reduced motion keep standard browser scrolling.

Social media preview behavior:

  • Page, product, article, and collection images can take priority over the global social media preview image.
  • The global social media preview image is used as a fallback.
  • Social meta is rendered by the theme without requiring external scripts.
  • SEO metadata includes title, canonical URL, optional description, robots rules for non-indexable pages, Open Graph tags, Twitter Card tags, and structured data where the current template supports it.
  • Product/ProductGroup and article structured data use Shopify-native data. The domain-root home page adds OnlineStore and WebSite site-name structured data, while supported resource pages add breadcrumb structured data.

Merchant documentation for the Guild Shopify theme.

Copyright © Guild