Skip to content
Nook, home

Docs for Nook 1.0.0

Theme settings

Open Online Store › Themes › Customize, then the Theme settings gear. These settings apply to every page.

The defaults below are the theme's own (the Nook style). The Umber and Shore styles start with different values for colors, fonts, layout, buttons, product cards and cart; whichever style you added, every setting can be changed.

Logo and favicon

SettingTypeDefaultNotes
LogoImageLeave empty to show the store name as a wordmark.
Logo textTextShown in the header and footer when there's no logo image. Leave empty to use the store name.
Logo width on desktopSlider: 60–320px120px
Logo width on mobileSlider: 40–200px88px
FaviconImage32 x 32px (recommended)

Colors

SettingTypeDefaultNotes
Color schemesColor schemesEach scheme sets background, text, secondary text, border and button colors. Sections pick a scheme with their Color scheme setting.

Typography

SettingTypeDefaultNotes
Body
FontFontInter
Body size scaleSlider: 90–120%100%
Headings
FontFontInter
Heading size scaleSlider: 80–120%100%

Layout

SettingTypeDefaultNotes
Page widthSlider: 1200–1680px1680px
Space between sectionsSlider: 64–160px120pxOn mobile, sections use about half this space.
Grid spacingSlider: 8–40px24px

Buttons

SettingTypeDefaultNotes
Corner styleChoice: Pill · Rounded · SquarePill
Border thicknessSlider: 1–3px1px

Product cards

SettingTypeDefaultNotes
Image ratioChoice: Portrait (4:5) · Adapt to image · SquarePortrait (4:5)
Show second image on hoverCheckboxOn
Show fabric lineCheckboxOnShows the selected fabric and how many fabrics are offered, from the product's fabric or color option.
Show swatchesCheckboxOn
Maximum swatchesSlider: 2–104
Show quick view buttonCheckboxOnOpens the product's images, options and add to cart in a side panel without leaving the page.
Show dimension lineCheckboxOnShows the width, depth and height from the product's dimension metafields (custom.width, custom.depth, custom.height).
Width metafieldTextcustom.width
Depth metafieldTextcustom.depth
Height metafieldTextcustom.heightEnter each product metafield's namespace and key, such as specs.width. Dimension, number and text metafields work; number metafields show without a unit.

Badges

SettingTypeDefaultNotes
Position on cardsChoice: Top left · Top right · Bottom leftTop left
Sale badge color schemeColor schemeParchment
Sold out badge color schemeColor schemeMidnight

Swatches

SettingTypeDefaultNotes
ShapeChoice: Square image · CircleSquare image
Size on product pagesSlider: 56–120px104pxProduct cards always show small dots.

Media

SettingTypeDefaultNotes
Image corner radiusSlider: 0–16px2px

Cart

SettingTypeDefaultNotes
Cart typeChoice: Drawer · Page · Popup notificationDrawer
Show vendorCheckboxOff
Enable cart noteCheckboxOn
Lead time metafieldTextcustom.lead_timeShown under each item. Enter the product metafield's namespace and key, such as custom.lead_time. Leave empty to hide it.
SettingTypeDefaultNotes
Enable search suggestionsCheckboxOn

Currency format

SettingTypeDefaultNotes
Show currency codesCheckboxOff

Social media

SettingTypeDefaultNotes
InstagramText
PinterestText
TikTokText
FacebookText
YouTubeText

Animations

SettingTypeDefaultNotes
Reveal sections on scrollCheckboxOn
Move scrolling textCheckboxOn

Something here unclear or out of date? Contact support.