Get a free audit

Theme settings

Last updated Theme version 1.0.0

Press / to search. Use the arrow keys and Enter to open a result.

All guides
On this page

Theme settings control the look and behavior of your whole store. Open them in the theme editor (Online Store > Themes > Customize) by clicking the paintbrush icon. Each group below matches a group in that panel.

Settings that belong to one section only (for example the header or a product page) are not here. They live in the section itself and are covered in the other pages of this guide.

Where a setting has a range, the number is shown as you drag the slider. Defaults below are the values of a fresh install before you choose a preset.

Logo and favicon

Theme settings > Logo and favicon

  1. Logo: your main logo, shown in the header and, unless you set another, in the footer.
  2. Logo for transparent header: a light version of the logo, shown when the header sits over a hero image (see the Transparent header on home page setting in Header and navigation).
  3. Logo width on desktop: 40 to 300 px.
  4. Logo width on mobile: 30 to 200 px.
  5. Favicon: the tab icon. Square image, at least 32 x 32 px.
  6. Social sharing image: shown in link previews for pages that have no image of their own. Use 1200 x 628 px.

Good to know

  • SVG logos stay sharp at every size.
  • If a logo looks too small or large on phones, change the mobile width only. The desktop width is not affected.

Colors

Theme settings > Colors

Colors are organized as color schemes. You get five. Each scheme has these colors:

  • Background, and optionally Background gradient, which replaces the solid background where gradients are supported.
  • Text and Secondary text (used for captions and small print).
  • Surface (cards and panels): the tint used behind cards, panels and inputs.
  • Borders and dividers.
  • Primary button and Primary button label.
  • Secondary button label and border.
  • Links and highlights.

Sections, the header, the footer, blocks inside a freeform section and promo tiles each have a Color scheme setting. Pick the scheme and the section recolors itself.

Below the schemes is a group called Status and badges. These colors are the same on every page:

  1. Sale badge and price and Sale badge text.
  2. Other badges and Other badge text.
  3. In stock and success.
  4. Low stock and warnings.
  5. Errors.
  6. Rating stars.
  7. WhatsApp buttons: used only on WhatsApp actions, so asking a question never looks like buying.

Good to know

  • Check contrast. Text on its background should be easy to read, especially on buttons and on sale badges.
  • Changing a scheme changes every section that uses it. To restyle just one section, switch that section to a different scheme instead.
  • A common pattern is scheme 1 for most sections, a darker scheme for the announcement bar and promotional bands, and a tinted scheme for alternating sections.

Typography

Theme settings > Typography

Headings

  1. Font: pick from the Shopify font library. Bold and italic styles are chosen automatically where the font has them.
  2. Size scale: 80 to 150 percent. Scales all headings together.
  3. Letter spacing: from minus 5 to 20.
  4. Letter case: Default keeps the case you typed. Uppercase capitalizes every heading.

Body

  1. Font: the font for paragraphs, buttons and menus.
  2. Size scale: 90 to 130 percent.

Arabic and Hebrew

Shopify's font library has no Arabic or Hebrew letters, so these letters use the best font built into each shopper's device. Choose the style:

  1. Heading style: Classic (naskh) or Modern (sans serif).
  2. Body style: Classic (naskh) or Modern (sans serif).

See Languages and right-to-left for details.

Good to know

  • Two fonts (one for headings, one for body) is the classic, fast choice. More fonts make pages slower.
  • The Arabic and Hebrew style applies wherever those letters appear, even on English pages.
  • Uppercase headings with wide letter spacing give a fashion feel. For long headings, leave the case at Default.

Layout

Theme settings > Layout

  1. Page width: 1000 to 1800 px. The maximum width of page content on large screens.
  2. Space between sections: 0 to 100 px. Added on top of each section's own padding.
  3. Space between grid items: 4 to 40 px. The gap between product cards and similar grids.

Corner radius

  1. Buttons
  2. Inputs
  3. Images and videos
  4. Cards and panels

Each radius runs from 0 (square corners) up to a maximum of 24 to 40 px (very round).

Good to know

  • Keep radii consistent. A store with square images and round buttons often looks accidental.
  • Increasing Space between sections is the quickest way to make a page feel more spacious.

Buttons

Theme settings > Buttons

  1. Primary button style: Solid or Outline.
  2. Border thickness: 0 to 4 px.
  3. Uppercase labels: capitalizes button text.
  4. Letter spacing: 0 to 20.
  5. Lift on hover: buttons rise slightly when the pointer is over them.

Product cards

Theme settings > Product cards

Product cards are the small tiles for each product on collections, search, the home page and recommendations.

  1. Image shape: Natural, Square, Portrait, Tall or Landscape.
  2. Image fit: Fill the shape crops the photo to the shape. Show the whole image shows the full photo with space around it. Use the second option for products photographed on white.
  3. Card style: Plain or Card with background.
  4. Text alignment: Start or Center.
  5. Show second image on hover: swaps to the product's second photo on desktop.
  6. Show vendor
  7. Show rating: shows stars when a review app supplies ratings. See Product page.
  8. Color swatches shown: 0 to 10. Set to 0 to hide swatches on cards.
  9. Quick add: None, Icon or Button. Lets shoppers add a product without leaving the page.
  10. Enable quick view: a magnifier opens the product in a popup.
  11. Enable wishlist: a heart on each card. See Wishlist and compare.
  12. Enable compare: a compare icon on each card. Shoppers can compare up to four products.
  13. Low stock message at: shows "Only X left" at or below this quantity. Set to 0 to hide.

Good to know

  • Quick add adds a product with no options straight to the cart. For a product with options, the button reads Choose options and opens the quick view popup so the shopper can pick a size or color.
  • Wishlist and compare are stored in the shopper's own browser. No app is needed.

Badges

Theme settings > Badges

  1. Position on product images: Top start, Top end or Bottom start. Start means the left in English and the right in Arabic.
  2. Sale badge: Text, Percentage saved or Amount saved.
  3. Show sold out badge
  4. Show "New" badge for: the number of days after a product is published (0 to 90). Set to 0 to hide.

To add your own badge, add a product tag that starts with "badge:" to a product, for example "badge:Bestseller". The badge shows the text after the colon.

Cart

Theme settings > Cart

  1. Cart type: Drawer (slides in from the side), Page (full cart page) or Popup notification (a small confirmation).
  2. Free shipping threshold: a number in your store currency. Shows a progress bar in the cart. 0 hides it.
  3. Enable order notes
  4. Show discount code field
  5. Show shipping estimator on the cart page
  6. Require terms agreement before checkout, with the Terms page to link to.
  7. Gift wrap product: choose a product to offer as gift wrap.
  8. Show "Order on WhatsApp" in the cart

Recommendations in the cart

  1. Show recommendations
  2. Fallback collection: complementary products come first, this collection fills the remaining spots.
  3. Number of products: 1 to 6.

The full guide is Cart.

Theme settings > Search

  1. Show results while typing: turns predictive search on or off.
  2. Show vendor in results
  3. Show price in results

Currency format

Theme settings > Currency format

  1. Show currency codes: adds the code after prices, for example $1.00 USD. The cart and checkout always show codes.

Social media

Theme settings > Social media

Paste the full link to your profile for each network: Facebook, Instagram, TikTok, X (Twitter), YouTube, Pinterest, Snapchat, Threads, LinkedIn, Tumblr, Vimeo and Telegram. Icons appear in the footer and wherever a section has Show social links. Leave a field empty to hide that icon.

Chat and contact

Theme settings > Chat and contact

  1. WhatsApp number: international format, digits only. For example 971501234567.
  2. Floating chat button: None, WhatsApp, Messenger, Telegram or Phone call.
  3. Messenger or Telegram username: used by those two buttons.
  4. Chat button position: End side or Start side.
  5. Phone number
  6. Email
  7. Address
  8. Map link

These details are reused in the footer, on the contact page and in the header. More in WhatsApp and chat.

Popups

Theme settings > Popups

Newsletter popup

  1. Enable newsletter popup
  2. Image
  3. Show after: 0 to 60 seconds.
  4. Also show when a visitor is about to leave (desktop)
  5. Show again after: 1 to 30 days. How long to wait before showing the popup again to the same visitor.

Age verification

  1. Ask visitors to confirm their age
  2. Minimum age: 13 to 25.

Good to know

  • Popups can annoy visitors and reduce sales. Use a delay of at least 8 seconds, and keep the exit intent option for a real discount offer.
  • Age verification asks the visitor to confirm. It does not check ID.

Animations

Theme settings > Animations

  1. Reveal sections on scroll
  2. Hover effect: None, Zoom images or Lift cards.
  3. Show back to top button

Visitors who have asked their device to reduce motion see reduced animation, whatever you choose here.

Good to know

  • Write down your settings before switching presets, because a preset replaces them.
  • If you edit the home page and your changes look off, check whether a setting here (such as Image shape) is the cause before changing the section.

Product card colors and sizes

When a product has a color option with swatches, its card shows the colors under the price (up to the number in Color swatches shown). Pointing at a color shows that color's photo and its name; clicking or tapping chooses it, and the card link, quick view and price then follow the chosen color. Give each color variant its own image in the product admin so the photo can change.

Turn on Show sizes on hover (Product cards) to let shoppers on computers add a size in one click: pointing at a card slides up its sizes in the chosen color, and sizes that are sold out are struck through. On phones the quick add button stays, since there is no hover.

Still stuck? Contact support