Theme settings

Every group in Theme settings: colors, typography, layout, style, product cards, cart, animations, brand, social media and age verification.

Theme settings apply to the whole store. In the theme editor, click the Theme settings icon in the left sidebar. The groups below appear in the same order as in the editor.

Colors

Theme settings > Colors

Nappa uses color schemes. A color scheme is a set of colors that always work together. Each section and some blocks have a Color scheme setting, so you can change the colors of one section without changing the rest of the store.

Each preset includes three schemes. The first scheme is the default for pages. You can edit them and add more.

Colors in pairs

Every background color comes with the color used on top of it. Keep the two colors of each pair readable together.

Background and Text: The background of the section and its text and icons.
Primary button and Primary button label: Filled buttons, such as Add to cart, and their text.
Secondary surface and Secondary surface text: Secondary buttons, framed product cards, panels and fields, and the text on them.
Accent and Text on accent: Links, emphasis and accent badges, and text placed on the accent color.
Lines and borders: Dividers, borders of cards and outlines of secondary buttons.

When you change a scheme, check the contrast of each pair. Text needs a contrast ratio of at least 4.5:1 with its background. Links use the Accent color on the Background color, so check that pair too. See Check the contrast of your colors.

Typography

Theme settings > Typography

Heading font: The font of headings. Choose it from the Shopify font library with the font picker. System fonts need no download.
Body font: The font of all other text.
Heading size 80 to 160 %: Scales all headings up or down.
Body size 14 to 18 px: The size of body text. We suggest 16 px or more for readability on phones.
Heading letter spacing -4 to 4: Tightens or loosens the space between letters in headings.
Heading emphasis Italic, Accent color, Underline: Applies to words set in italic in headings. Most heading fields accept italic: select a word and click the italic button. With Accent color, the word uses the accent color. With Underline, it is underlined.

To use a font that isn't in the Shopify font library, you need to edit theme code. Our support doesn't cover this change.

Layout

Theme settings > Layout

Page width Narrow, Standard, Wide: The maximum width of page content on large screens.
Space between sections 24 to 160 px: The vertical space around sections. Sections with a Space above and below setting use a share of this value.
Corner radius 0 to 28 px: Cards, images and panels scale from this value. 0 gives square corners.
Button shape Pill, Follow corner radius: Pill gives fully rounded buttons. Follow corner radius uses the corner radius above.

Style

Theme settings > Style

Outline thickness 0 to 3 px: Adds a drawn outline to buttons, cards and images.
Shadow None, Solid offset, Soft: Solid offset draws a hard shadow in the text color under buttons, badges and some panels. Soft draws a blurred shadow under product cards.
Badge style Flat, Sticker: The look of badges such as sale, new and low stock badges.
Heading case As written, Uppercase: Shows headings as you typed them, or in capital letters.
Card style Image and text, Framed on a surface: Image and text shows product cards without a frame. Framed on a surface places each card on the secondary surface color, with a border. Cards in a row keep the same height.
Field style Box, Underline: The look of form fields, such as the email signup and search fields.
Icon weight Thin, Regular, Bold: The stroke width of icons.
Header and footer shape Full width, Floating: Floating detaches the header and footer from the screen edges, with rounded corners. See Header shape and layout.
Header layout Logo, menu and icons; Search bar: Search bar shows a visible search field next to the logo, with the menu on a second row. It suits large catalogs.

Product cards

Theme settings > Product cards

These settings apply to product cards everywhere: collection pages, search results, featured collections and recommendations.

Image ratio Portrait, Square, Tall, Landscape: The shape of product images on cards. Portrait is 4:5, Tall is 3:4 and Landscape is 4:3.
Image fit Fill the frame, Whole image: Fill the frame crops the image to the card shape. Whole image shows the full image on a plain background. It suits cut-out product photos, such as shoes or bottles.
Show quick add: Adds a button that opens the product options in a panel, so customers can add to cart without leaving the page. Hidden on sold-out products.
Show color swatches: Shows up to five swatches under the card. Uses the swatches set on the color option of each product. Selecting a swatch shows the image of that color. See Swatches.
Show vendor: Shows the product vendor above the title.
Show star rating: Uses the standard product rating metafield filled by review apps. Hidden on products without reviews. See Reviews.
Show second image on hover: On computers, shows the second product image when the pointer is over the card. Works when the second media is an image.
Sale badge Percentage off, Sale: On products with a compare-at price, shows the discount percentage or the word Sale.
New badge product tag: Products with this tag show a new badge. The default tag is new. Leave the field empty to hide the badge.
Low stock badge threshold 0 to 20: Shows "Only 3 left" from real inventory when the stock of a tracked product is at or below this number. 0 turns it off. The badge shows only when Shopify tracks the inventory of every variant and the product stops selling at zero. It counts all variants together.
Show free shipping badge: On products priced at or above the Free shipping threshold set in the Cart group. Match the threshold to a real shipping rate.
Show subscription badge: On products sold with a subscription (selling plans). See Subscriptions.
Show number of colors: Shows the number of colors next to the swatches, for example "4 colors".

Cart

Theme settings > Cart

Cart type Drawer, Page: Opens the cart in a panel on the side of the screen, or on the cart page.
Show order note: Lets customers add a note to their order.
Show free shipping bar and Free shipping threshold: Shows how much is left to spend to reach free shipping. Enter the amount in your store currency and match it to a real shipping rate.
Show complementary products: Uses the complementary products set in the Search and Discovery app.

Details on each option: Cart.

Animations

Theme settings > Animations

All Nappa animations are fades. Visitors who turn on "reduce motion" in their device settings see no animation, whatever you choose here.

Animate between pages: Pages fade into each other. From a product card to its product page, the card image moves to its place in the product gallery, and back when the customer returns. These transitions work in recent versions of Chrome, Edge and Safari. Other browsers open the page without a transition. Turns off automatically when a visitor prefers reduced motion.
Preload pages on hover or touch: Starts loading a page when the pointer rests on a link or a finger touches it, so the next page opens faster. Browsers that don't support preloading ignore it.
Reveal sections on scroll: Sections fade in as they enter the screen. Uses CSS only. Turns off when a visitor prefers reduced motion.
Stagger product cards: In product grids, cards appear one after another.
Show back-to-top button: Shows a button to return to the top of long pages. It hides when the footer is visible.

Brand

Theme settings > Brand

Logo: Shown in the header. Without a logo, the header shows your store name.
Logo width 60 to 240 px: The display width of the logo.
Favicon: The small icon in browser tabs. Recommended: 96 x 96 px. Without a favicon, Nappa shows the first letter of your store name in your colors.
Social sharing image: Shown when a page without its own image is shared on social media or in messages. Recommended: 1200 x 628 px.

Theme settings > Social media

Enter the full link to each account: Instagram, Facebook, TikTok, Pinterest, YouTube, X and Threads. Icons appear in the footer for the accounts you fill in, when Show social media icons is on in the footer's Brand block.

Age verification

Theme settings > Age verification

For stores that sell age-restricted products. Visitors confirm their age once; the answer is remembered on their device.

Ask visitors to confirm their age: Turns the age check on for your live store.
Show in the theme editor: Shows the age check in the editor preview so you can style it. It doesn't affect your live store.
Heading, Text: The message. The default text mentions the legal drinking age: change it to match what you sell.
Confirm button label, Decline link label, Decline link: The two choices. The decline link sends visitors to the page you choose.

This check is a notice, not an identity verification. Follow the laws that apply to your products and your markets.

Custom CSS

The theme editor has Custom CSS fields provided by Shopify, for the whole theme and for each section. Use them for small visual changes. Shopify keeps them when you update the theme, but class names can change between versions, so check them after each update.