Theme settings

Settings that apply to the whole store – logo, typography, layout, shapes, product cards, animations, search, social links and a few extras.

Open Online Store › Themes › Customize and select the brush icon to see Theme settings. Colors and the cart have pages of their own: Colors and dark mode and Cart.

Each group below starts with what you will use most, followed by a table with every setting in the group, its options and its default value in the Index preset. The Poster and Petal presets start with different values for some of them.

Help and documentation

The first group in Theme settings links to these docs, the FAQ, the launch checklist and support, so help is one click away while you edit.

Logo and favicon

• Logo: upload your logo and set its width separately for desktop and mobile. Without a logo image, the store name shows as a text logo; set its size and whether it is lowercase.
• Logo in dark mode: used instead of the logo while shoppers browse in dark mode. Leave it empty if your logo works on dark backgrounds.
• Small text next to the logo: a small superscript after the text logo – the number of products in your store, your own text (for example "Since 1998") or nothing.
• Favicon: the small icon in the browser tab. A square image of at least 32 × 32 px works best.
• Image for sharing: shown when a page without its own image is shared on social media or in messages. Use 1200 × 628 px.

Typography

• Heading font and Body font come from the Shopify font library. Fonts from the library are served by Shopify and load fast; you cannot upload your own font files in the editor.
• Heading size, Heading letter spacing and Heading line height shape every heading in the store. Letter spacing is in thousandths of an em: −45 is the tight Index look, 0 is the font's own spacing.
• Heading size on mobile scales headings on phones on top of the heading size, so long headings fit small screens.
• Use an accent font adds a third font for labels, small headings above titles, badges and product card subtitles, optionally in uppercase.
• Use even-width numbers keeps prices and counts aligned in lists and tables.
• Button font uses the body or heading font for buttons, optionally in uppercase.

Layout

Page width sets the widest the content gets on large screens. Side spacing is the space between the content and the screen edge. Column spacing and Row spacing are the default gaps in product grids and other grids.

Grid sections (Featured collection, Collection list, Multicolumn, Blog posts and others) use these values unless you turn on Use custom spacing in the section.

Shapes

• Button and chip corner radius, Input and search corner radius, Image corner radius and Tile and panel corner radius round the corners of each kind of element. 0 is square; 40 makes buttons fully rounded pills.
• Image shape in editorial sections: Arch rounds the top of the images in Image with text, Collection list and Multicolumn. Portrait images show the arch best.
• Line thickness sets the width of lines and outlines (1–3 px).
• Icon line weight makes the theme's built-in line icons thinner or bolder.
• Soft shadow under dropdowns and popovers adds a gentle shadow under floating panels. Turn it off for a completely flat look.

Product cards

Product cards appear in every product grid and slider: collections, search, featured collections, recommendations, recently viewed and the cart add-ons.

• Card style: Minimal (photo and text), Framed with a line (a border around the card and a line above the title) or Tile on a soft background (a rounded tile in the color scheme's surface color with centered text). The list view on collection pages keeps its rows in every style.
• Image ratio and Image fit: crop every photo to the same shape (square, portrait or landscape) or keep each photo's own shape with Adapt to image. Fit inside shows the whole product on the image background.
• Browse photos on the card: for products with several photos, shoppers get arrows on hover, can swipe on touch screens and see dots for the current photo. This replaces the second image on hover.
• Play the product video on hover: plays the product's first video, muted, over the first photo while the pointer is on the card. The video only loads on hover; touch screens and shoppers who reduce motion see the photos.
• Quick add button: show it on hover, always, or hide it.
• Products with options: show a Details button that leads to the product page (default), or open a quick add window where shoppers pick a size and color. Products with a single variant are always added straight from the card.
• Show product type: shows the product type under the title, or the custom.subtitle metafield when the product has one. See Metafields.
• Show product rating: needs a reviews app that fills the standard rating metafield.
• Show color dots and Show number of colors: small swatches for the product's colors and a "3 colors" label. See Color swatches.

Compare

With Let customers compare products on, every card gets a quiet Compare checkbox. Up to four products collect in a tray at the bottom of the screen and open side by side in a table with their vendor, type, availability, rating, options and weight. "Show differences only" hides the rows where all products are the same.

To add your own rows (material, size, capacity…), create a product metafield of type Multi-line text, fill it with one Label: value pair per line and enter its namespace.key in Specifications metafield. The Specifications block on the product page reads the same metafield. See Specifications.

Tags

Cards show small tags on the photo: Sale (as text, percent off or amount off), Sold out and New (for products published in the last 1–90 days). Add your own tag text with the product metafield custom.badge, or with a product tag that starts with badge: – for example badge:Bestseller.

Animations

• Reveal sections on scroll fades (or fades and lifts) sections in as they come into view. Each section also has an Animate on scroll setting under Advanced.
• Animation speed makes every animation in the theme slower or faster.
• Zoom images slightly on hover gives images with a link a gentle zoom.
• Page transitions: Fade or Fade and slide between pages, in browsers that support view transitions (Chrome, Edge, Safari 18.2 and newer). The header stays in place while the page changes. With Grow product photos into the product page, the photo of the clicked product card grows into the product gallery.
• Instant navigation: when a shopper hovers over a link or touches it, the browser loads that page in advance, so it opens almost at once. Instant prepares the whole page, Fast only downloads it. Cart, checkout, account, app and policy pages are never loaded in advance. Works in Chrome and Edge; analytics and apps keep working because every page is still a normal page load.
• Add to cart animation: the cart count flashes, the product photo flies to the cart, or nothing moves.
• Intro animation: shows the store name (or your own text) on a full-screen color for a moment when a shopper arrives – once per visit, only on the home page, or on every page.

Search settings

These settings control the search suggestions that open from the header search bar or icon. The search bar itself (bar or icon, width, the / key hint) is set in the Header section, and the search results page in Collections and search.

• Show suggestions while typing: products, collections, pages and articles appear under the search field as shoppers type, with the matching words highlighted.
• Popular searches: a comma-separated list of searches shown as chips before the shopper types, for example Mug, Linen napkins, Desk lamp.
• Products shown before typing: the first four products of a collection you pick, shown when the search opens.

Social media

Enter the full address of each profile, for example https://instagram.com/yourstore. The icons appear in the footer's Logo and text block when "Show social links" is on, and in the mobile menu.

Currency and extras

• Show currency codes adds the currency code after prices (for example €25.00 EUR). Useful when you sell in several currencies.
• Show back to top button adds a small button that appears after scrolling down a long page.
• Show added to cart message shows a short confirmation when the cart drawer is set not to open after adding a product.

Custom CSS

Shopify adds a Custom CSS field at the bottom of Theme settings and of every section. Use it for small visual tweaks only, and read Customizing code first.