Colors, fonts, and layout
Understand the scope
Section titled “Understand the scope”Open Pawglade through Online Store → Themes → Edit theme, then open Theme settings. This guide covers Typography, Colors, Card tints, and Layout. Some admin interfaces still call the editing action Customize.
These are shared theme values. A section’s own Color scheme, background, width, spacing, or image corners can still determine its appearance. If one area stays unchanged, check its own settings before repeatedly changing all global colors.
Quick start: a clean appearance
Section titled “Quick start: a clean appearance”- Open Typography and choose Heading font and Body font. You can keep the existing fonts to begin with.
- Open Colors and set Accent color to your brand color. Check that Accent color (hover) and Button text remain readable together.
- At the top of the same group, choose the color scheme to edit. Return to the relevant section and select that scheme in Color scheme. Other sections using the scheme change too.
- Open Card tints and adjust the four soft colors. In a section such as Featured collection, choose a tint or Cycle through all tints in Card background tint to display them.
- Open Layout. For this example, use Page width = Medium, Page margin = 20 px, Space between sections = 80 px, Section background radius = 24 px, Card corner radius = 16 px, and Input corner radius = 10 px.
- Click Save and inspect the homepage, collection, and product pages on wider screens and phones. Check text, buttons, and spacing. Turn entrance animations on or off as preferred; they do not determine whether content exists.
Settings reference
Section titled “Settings reference”Defaults below are initial setting values. A saved theme may show different values; an existing store does not need to reset them.
Typography
Section titled “Typography”| Setting | Default | Options | What it does |
|---|---|---|---|
| Heading font | Nunito, bold | Shopify font picker | Heading font |
| Body font | Nunito Sans, regular | Shopify font picker | Body font |
Colors
Section titled “Colors”Within a color scheme, Background, Background gradient, and Foreground control areas using that scheme. Shopify displays scheme names in the interface language. Check which scheme the section actually uses. The following shared color fields appear in the same group.
| Setting | Default | Options | What it does |
|---|---|---|---|
| Background | #FAF9FC | Color | Base page background |
| Alternate section background | #F3F0FB | Color | Areas using an alternate background |
| Foreground | #1D1D2B | Color | Main text |
| Secondary text | #656274 | Color | Secondary text |
| Accent color | #6E41D6 | Color | Main accent |
| Accent color (hover) | #5A31C0 | Color | Accent on pointer hover |
| Button text | #FFFFFF | Color | Text on buttons using this color |
| Trust badge text | #157A5A | Color | Trust-information text |
| Trust badge background | #E4F3EF | Color | Trust-information background |
| Sale badge | #C43C0E | Color | Sale badges |
| Rating stars | #F5A623 | Color | Existing rating stars; does not create ratings |
| Borders | #E9E6F2 | Color | Elements using the shared border color |
| Footer background | #6E41D6 | Color | Base footer background; Footer’s own Color scheme can determine the displayed background |
| Footer text | #FFFFFF | Color | Base footer text; check the selected scheme and actual preview |
Card tints
Section titled “Card tints”| Setting | Default | Options | What it does |
|---|---|---|---|
| Cream tint | #FDF8E7 | Color | Cream background tint |
| Lilac tint | #F3F0FB | Color | Lilac background tint |
| Mint tint | #E4F3EF | Color | Mint background tint |
| Apricot tint | #FDF0E0 | Color | Apricot background tint |
A section using None (white) does not cycle through these tints. Changing the colors does not change the section’s tint selection.
Layout
Section titled “Layout”| Setting | Default | Options | What it does |
|---|---|---|---|
| Page width | Medium | Narrow / Medium / Wide | Content areas using the shared width |
| Page margin | 20 px | 10–100 px | Left and right page margins |
| Space between sections | 80 px | 48–120 px, steps of 8 px | Spacing in sections using the shared value |
| Section background radius | 24 px | 0–48 px, steps of 2 px | Background corners in sections using the shared default; individual sections can override it, while card and image corners are separate |
| Card corner radius | 16 px | 0–24 px, steps of 2 px | Cards using shared corners |
| Input corner radius | 10 px | 0–20 px, steps of 1 px | Input corners |
| Enable entrance animations | On | On / Off | Allows entrance animations in supported areas; customers’ reduced-motion preferences still apply |
Change one section’s background corners
Section titled “Change one section’s background corners”Return to Sections and open a section that provides Background radius. Follow theme uses the shared value above. Square = 0 px, Small = 12 px, Medium = 24 px, and Large = 32 px override only this section. Save and check that other sections on the page keep their previous corners.
This setting changes supported section backgrounds, such as Hero banner, FAQ, Fit finder, and Newsletter. It does not add a background to a layout without one, or change product-card and image corners inside it.
Example setups
Section titled “Example setups”Keep the soft brand style: Page width = Medium, Page margin = 20 px, Space between sections = 80 px, card corners = 16 px, and the product section’s tint = Cycle through all tints.
A more compact catalog: Page width = Wide, Page margin = 20 px, Space between sections = 48 px, card corners = 8 px, and the product section’s tint = None (white). Set product column counts in the individual section.
Common questions
Section titled “Common questions”Colors changed, but a Header menu or Footer stayed the same. Check that section or panel’s Color scheme and local background settings, then the selected scheme. Avoid making every scheme identical as a first step.
Card corner radius did not change a banner image. Cards, images, and section backgrounds can have separate corner settings. Use the relevant section’s controls.
Mobile still feels crowded. Check actual text length, the section’s mobile columns, and local spacing first. Desktop Page width does not turn a phone into a desktop layout.
Continue to Common settings after adjusting the appearance.