Skip to content

Typography in Blockshop

Edit theme → Theme settings → Typography

Blockshop Typography in Theme settings

Heading, navigation, and body fonts, plus a type size ladder for each role.

Theme settings → Typography

Fonts

You pick three fonts:

  • Heading font: banners, section titles, and other headings
  • Navigation font: header and dropdown labels
  • Paragraph font: body copy

Use one heading font and one body font. Navigation can match headings or paragraphs. Mixing three unrelated families makes the store feel busy.

A custom font

Shopify’s font picker covers most stores. To use a file or Google Font you already own, see Add a custom font.

Type roles

Each role has a desktop size. Most also have a Mobile size so heroes do not overflow phones.

  • Banner heading: slideshow and large hero titles
  • Featured heading: campaign titles that sit below banner size
  • Section heading: titles at the top of a section
  • Block heading: titles on cards, columns, and blocks
  • Navigation: header links
  • Sub navigation: dropdown and nested links
  • Buttons: button labels
  • Overline: small labels above a heading
  • Paragraphs: body copy
  • Featured paragraph: body copy on top of images and video

Keep the ladder obvious: banner larger than featured, featured larger than section, section larger than block, block close to paragraph. If section headings and paragraphs are the same size, the page has no hierarchy.

Check mobile

After you set banner and featured sizes, resize the editor preview to mobile. If a title wraps into five lines, lower Mobile size rather than shrinking desktop type.

Letter spacing and uppercase

  • Heading letter spacing and Paragraph / Button letter spacing open or tighten the letters.
  • Uppercase headings, Uppercase on nav, buttons, overlines, and paragraphs change the voice of the brand.

Treat uppercase and wide tracking as a brand choice, not a default on every role. All-caps paragraphs are hard to read. Wide tracking on a huge banner can look elegant; the same tracking on body copy looks sparse.

Blockshop adds type controls that sit with buttons:

  • Link style: Underline or Arrow on text links
  • Match link size to block heading: text links use the block heading size
  • Buttons → Size and Mobile size: button label size on desktop and phones

Set link style here so it stays consistent storewide. Colors and hover for the four button styles live in Buttons, inputs, and links.

Text on images

Under Text visibility:

  • Image darkness: storewide strength (0–100%) for dark overlays on photos and video
    • On the section: Darken image or Image overlay turns the overlay on and picks the direction: entire image, top down, or bottom up. None on the section means this Typography slider has no effect there.
  • Text shadows: storewide strength for Oval shadow
    • On the section: Text shadows picks None, Text shadow (fixed glow on headings, copy, and buttons), or Oval shadow (soft gradient behind the text; the Typography slider controls how strong)
  • Translucent box around text: softens the fill when Text background color is set (not Transparent)
    • Sections: Slideshow, Image with text overlay, Video, Featured images, Testimonials, Image with text (overlap layout)
    • Blocks: Grid with overlay tiles; Promotion blocks in Featured collection and Collection grid; megamenu blocks in Header

If overlay headings disappear on a pale photo, enable Darken image on the section first, then raise Image darkness in Typography, or set Text shadows to Text shadow or Oval shadow.

Ask Sidekick

Open Sidekick from the theme editor toolbar (top right, next to the device preview icon), or press ⌘. (Ctrl+. on Windows). Ask it for a font pairing that fits your brand.

"Suggest a Heading font and Paragraph font pairing for a modern retail store, and whether Navigation should match the heading or the paragraph font."

It previews the pairing before you apply anything to Theme settings → Typography, faster than comparing font libraries by hand. If you're deciding whether a custom font is worth adding at all, it's also a reasonable place to ask.

Opening Sidekick from the theme editor toolbar

Troubleshooting

  • Headings didn’t change: you may have edited the wrong role. Banner headings only affect slideshows and large heroes; section titles use Section heading.
  • Product card titles didn’t change: those sizes are Heading type in Theme settings → Product grid, not Typography.
  • A sentence in the header or cart is the wrong words: that is default theme content, not a font setting.
  • Custom font did nothing: the Custom liquid block must sit in the header group with spacing set to None. See Add a custom font.