Theme Settings

Theme settings are settings that affect the theme as a whole. You can customize colors and fonts, configure social media accounts and adjust other settings, like what happens when a product is added to the cart.

Colors

In this section you can configure colors used throughout the theme and adjust the style of buttons.

General
  • Text – set the main text color
  • Secondary – set the secondary color
  • Links and accents – set the accent color, which is also used for links
  • Background – set the background color for the whole store
  • Titles – set the color of title text
  • Subheader – set the color of subheader text
Header
  • Text – set the color of the text and icons in the header section
  • Bottom border – set the color of the header’s bottom border (if the hero image block is enabled, the border isn’t drawn on the homepage)
Buttons

Configure the button style used throughout the store. Setting a button style changes what the color settings do.

  • Button style – choose between four styles: “Square, full color,” “Square, border only,” “Rounded, full color” and “Rounded, border only”
  • Background / border – set the background color if a “full color” style is chosen above, or the border color if a “border only” style is chosen above
  • Background / border hover – modify the background or border color set above when the mouse pointer hovers over the button
  • Text – set the buttons’ text color
  • Text hover – modify the text color when the mouse pointer hovers over the button
Image with text overlay
  • Text color – set a text color for text in an “Image with text overlay” section
  • Button color – choose a color for the Call to action buton in an “Image with text overlay” section; the options are “Default,” which uses the button color set above, “White,” or “Black.”
Footer
  • Footer background – set the background color of the footer
  • Footer text – set the text color of the footer
  • Footer secondary – set the secondary color of the footer (used for titles, secondary links and the input field border)

Typography

Glossary

Letterspacing

Letterspacing, also called tracking, is the horizontal spacing between letters. You can adjust the letterspacing for several elements in this section.

Font weight

Font weight refers to the thickness of the font’s letters’ strokes. “Bold” is a weight; so is “Light.” A font’s normal weight is called “Regular,” or, sometimes, “Book.”

In web development, font weights are represented by numbers. 400 is regular, 700 is bold, 300 is thin, and so on. The greater the font weight number, the thicker the strokes – the bolder the font.

Fonts

Use the Shopify font picker to choose three fonts: Heading, Body, and Secondary.

Text Overlay

This applies to all text overlays, like the ones in the “Image with text overlay,” “Slideshow,” and “Header” homepage sections.

  • Capitalize – make text overlay titles uppercase
  • Letterspacing – increase the letterspacing by preset units
Header navigation

Only applies when the “Logo to the left” header style is chosen in the Header section’s settings.

  • Font – choose a font, among the ones set in the “Fonts” section above, to use for the header navigation 
  • Capitalize – make header navigation text uppercase
  • Letterspacing – increase the letterspacing by preset units
Headings
  • Capitalize – make headings uppercase
  • Letterspacing – increase the letterspacing by preset units
Product grid titles

This applies to product titles in a grid, like the ones on a collection page, or in collection-based homepage sections.

  • Capitalize – make product grid titles uppercase
  • Letterspacing – increase the letterspacing by preset units
  • Font weight – increase or decrease the font weight (if the font weight is available in the selected font)
Section headings
  • Capitalize – make section headings uppercase
  • Letterspacing – increase the letterspacing by preset units
  • Align – choose to align section headings to the left or to center
Secondary

This applies to buttons and some subtitles and meta text.

  • Capitalize – make uppercase
  • Letterspacing – increase the letterspacing by preset units

Favicon

The favicon is a small icon that represents your site. It often appears to the left of the site’s title in the browser’s tab.

  • Image – choose an image to use as a favicon; make sure the image looks good at a very small size like 16 by 16 pixels

Cart

  • Stay on the current page when an item is added to the cart – show a notification and stay on the current page instead of navigating to the dedicated cart page
  • Enable order notes – let your customers add special instructions to their order
  • Show product vendor – show each product’s vendor in the cart

Social media

Accounts

Provide full URLs to your social accounts.

Checkout

Customize your Shop’s checkout settings. This one is not a theme setting, take a look at Shopify’s checkout customization guide for further help.

Change theme style

Apply one of the theme’s styles (previously called “Presets”) – Record, Create, or Publish. Theme styles are snapshots of pre-configured theme settings that add up to a distinctive look. You can use these as a starting point for customizing your store.