> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/theme-settings/theme-settings-1.md).

# Theme settings

## Global Theme Settings

Global theme settings control the visual foundation of your entire storefront. Changes you make here apply everywhere — every page, every section, every element. Getting these settings right means your store looks polished and consistent without you having to tweak each section individually.

***

### What you can control

* **Layout** — container widths, section spacing, global corner radius
* **Typography** — font families, sizes, weights, and spacing for every text element
* **Colors** — your color palette and how it's applied across the store
* **Buttons & Inputs** — shape, corner radius, and hover effects
* **Product display** — card layout, image ratios, swatches, and quick actions
* **Cart & Checkout** — cart type, upsells, free shipping bar, order notes
* **Social media** — profile links, share buttons, and sharing options
* **Drawers & Overlays** — slide-out menus, modals, and popup styling
* **Search** — search type, drawer vs. page, and empty-state recommendations

***

### How to access

1. In the **Theme Editor (Customize)**, click the **⚙️ Theme settings** icon (gear icon at the bottom of the sidebar).
2. Select any setting category from the list.

***

### General

Global defaults that apply to your entire store — corner rounding, container widths, and scroll/interaction effects.

#### Global style

**Main corner**

Sets the default corner radius (roundness) for buttons, cards, inputs, and other elements across your store. Smaller values give a sharper, more modern look; larger values create a softer, friendlier feel.

This is the base value. Other size options — Small, Extra Small, None — are automatically derived from this setting.

**Options:** *30 / 20 / 10 / 0*

**Default:** *20*

> **💡 Tip:** Match this to your brand feel. A value of 20–30 works well for friendly, approachable brands. A value of 0–10 suits clean, minimal, or luxury brands.

#### Container width

These settings define the maximum widths of your content containers — the invisible boxes that hold your content. Different container widths let you control how much space content takes up on the page.

**Standard**

The width of your standard content container. This is the default width used across most pages and sections.

**Range:** *1200px* to *2160px*

**Default:** *1440px*

**Wide**

The width of the "Wide" container option, expressed as a percentage of the viewport width. A wider container gives content more room on large screens.

**Range:** *80%* to *90%*

**Default:** *85%*

**Narrow**

The width of the "Narrow" container option. Use this for focused content areas like article text, testimonials, or forms — anywhere you want text to be comfortable to read.

**Range:** *600px* to *800px*

**Default:** *750px*

> **💡 Tip:** The Narrow container (750px) is ideal for article body text. Long-form content reads best when lines are 60–75 characters wide — much wider than that and the eye struggles to track back to the next line.

**Container width (default)**

The default container width applied to all new sections when you add them to a page. You can override this per-section in the Theme Editor.

**Options:** *Full width / Standard / Wide / Narrow*

**Default:** *Standard*

#### Effect

**Custom cursor**

When enabled, the cursor changes shape depending on what it's hovering over — a pointer for links, a grabbing hand for draggable elements. This adds a polished, app-like feel.

**Default:** *Enabled*

**Smooth scroll**

When enabled, clicking internal page links causes the page to scroll smoothly to the target rather than jumping instantly. This improves the feeling of navigation.

**Default:** *Enabled*

**Page transition (fade)**

When enabled, pages fade in when navigating between them. This creates a smoother, more app-like experience — especially noticeable on slower connections.

**Default:** *Disabled*

> **💡 Tip:** Enable Page transition only if you have fast page loads. On slower stores, the fade can feel like the page is stuck loading.

**Bottom blur overlay**

When enabled, a subtle blur effect appears at the bottom of the viewport — often used to create a soft fade where content meets the footer or bottom of the page.

**Default:** *Enabled*

**Parallax strength**

Controls the depth of the parallax scroll effect used on background images. Higher values create a stronger sense of depth; lower values create a subtler effect.

**Range:** *20%* to *40%*

**Default:** *20%*

> **⚠️ Warning:** Higher parallax values crop more of the background image. If you use parallax, make sure your background images have enough padding (extra space) around the edges so important content isn't cut off.

***

### Logo and favicon

**Logo**

Upload your store's logo image. This appears in the Header section of your store. The recommended size is at least 200px wide with a transparent background (PNG).

**Supported formats:** PNG, JPG, SVG

**Default:** *None*

**Logo inverse**

Upload an alternative logo for use on dark or image backgrounds. When the Header uses a transparent background, it can switch to this inverse logo for better contrast.

**Default:** *None*

> **💡 Tip:** If your header has transparent backgrounds over dark images, use the Logo inverse setting to ensure your logo always remains legible.

**Favicon**

Upload a small icon (favicon) that appears in the browser tab and address bar. This should be a square image — 32×32px or 48×48px recommended.

**Default:** *None*

***

### Typography

Typography settings control the fonts and text styling for every text element across your store — from body paragraphs to display headings. These settings apply globally, so changes you make here affect every page at once.

#### Font family

**Heading**

The typeface used for all headings across your store — H1 through H6 and display text. Choose a font that matches your brand personality. Shopify provides a curated list of Google Fonts optimized for performance.

**Default:** *Inter Semi-bold*

**Body**

The typeface used for body text, paragraphs, and descriptions.

**Default:** *Inter Regular*

**Highlight**

A secondary typeface used for highlighted text elements — callout numbers, featured stats, or accent text. Can be the same as your Heading or Body font for consistency.

**Default:** *Inter Regular*

> **💡 Tip:** Use contrast strategically. If your Heading and Body fonts are the same family, use different weights (e.g., Bold for headings, Regular for body) to create clear hierarchy. If you want a more distinctive look, choose different font families for each.

#### Paragraph

Controls the default styling for body text across your store.

**Font base**

The base font size for paragraphs and body text.

**Options:** *14px / 16px / 18px*

**Default:** *16px*

**Line height**

The vertical spacing between lines of text, expressed as a percentage of the font size. Higher values create more breathing room; lower values make text feel denser.

**Range:** *100%* to *160%*

**Default:** *140%*

> **💡 Tip:** 140–150% line height is ideal for body text. Lower than 120% makes text feel cramped; higher than 160% makes it hard for the eye to follow the line.

**Letter spacing**

The space between individual characters. Default (0) is optimized for readability. Negative values tighten the text; positive values open it up.

**Range:** *-20%* to *+20%*

**Default:** *0*

**Paragraph spacing**

The space added between paragraphs. This controls how much vertical breathing room sits between blocks of text.

**Range:** *0px* to *100px*

**Default:** *30px*

**Font weight**

The thickness of body text.

**Options:** *Regular / Medium / Semi-bold*

**Default:** *Regular*

**Custom on mobile**

Enable to set different font values specifically for mobile devices. Since phones are held closer to the eye, you may want smaller base sizes and tighter spacing on mobile.

**Default:** *Disabled*

**Mobile Font base** — *12px / 14px / 16px* | **Default:** *16px*

**Mobile Line height** — *100%–160%* | **Default:** *140%*

**Mobile Paragraph spacing** — *0px–100px* | **Default:** *20px*

#### Highlight

**Font style**

Whether highlighted text appears in italic or normal style.

**Options:** *Italic / Normal*

**Default:** *Normal*

**Letter spacing**

**Range:** *-20%* to *+20%* | **Default:** *0*

**Font weight**

**Options:** *Light / Regular / Medium / Semi-bold / Bold / Extra-bold*

**Default:** *Semi-bold*

**Case**

Text capitalization style for highlighted text.

**Options:** *Normal / Uppercase / Lowercase / Capitalize*

**Default:** *Normal*

#### Display heading

Controls the style of your largest, most prominent headings — often used for hero banners and full-screen sections.

**Font size**

**Range:** *80px* to *200px* | **Default:** *100px*

**Line height**

**Range:** *100%* to *160%* | **Default:** *100%*

> **💡 Tip:** Display headings look best with a tight line height (100–110%) because they're short — there's no need for extra vertical space between big lines of text.

**Letter spacing**

**Range:** *-20%* to *+20%* | **Default:** *0*

**Font weight**

**Options:** *Light / Regular / Medium / Semi-bold / Bold / Extra-bold*

**Default:** *Semi-bold*

**Case**

**Options:** *Normal / Uppercase / Lowercase / Capitalize*

**Default:** *Normal*

**Custom on mobile**

Enable different size values for mobile devices. Display text is typically scaled down significantly on mobile since screens are much narrower.

**Default:** *Disabled*

**Mobile Font size** — *56px–100px* | **Default:** *56px*

#### Heading 1–6

Each heading level (H1 through H6) has its own independent controls:

| Heading | Font size range | Default size | Default line height |
| ------- | --------------- | ------------ | ------------------- |
| **H1**  | 32–80px         | 80px         | 100%                |
| **H2**  | 32–80px         | 64px         | 100%                |
| **H3**  | 32–80px         | 56px         | 100%                |
| **H4**  | 32–80px         | 40px         | 110%                |
| **H5**  | 18–32px         | 32px         | 120%                |
| **H6**  | 18–32px         | 24px         | 130%                |

All headings share the same set of controls:

* **Line height** — 100–160%
* **Letter spacing** — -20% to +20%
* **Font weight** — Light / Regular / Medium / Semi-bold / Bold / Extra-bold
* **Case** — Normal / Uppercase / Lowercase / Capitalize
* **Custom on mobile** — enables separate mobile values

> **💡 Tip:** The mobile font sizes are automatically reduced from desktop sizes. Enable **Custom on mobile** to fine-tune mobile sizes independently — e.g., reducing H1 from 80px to 48px prevents large headings from overflowing on narrow screens.

#### Subheading

Used for smaller sub-labels above body text — category tags, eyebrow text, section labels.

**Font size** — *12px–32px*, default *14px* **Line height** — *100%–160%*, default *100%* **Letter spacing** — *-20%–+20%*, default *0* **Font weight** — Light / Regular / Medium / Semi-bold / Bold / Extra-bold **Case** — Normal / Uppercase / Lowercase / Capitalize **Custom on mobile** — enables separate mobile values

#### Description

Used for product descriptions, collection descriptions, and similar secondary text content.

**Font size** — *14px / 16px / 18px*, default *14px* **Line height** — *100%–160%*, default *140%* **Letter spacing** — *-20%–+20%*, default *0* **Font weight** — Light / Regular / Medium / Semi-bold / Bold / Extra-bold

#### Label

Used for small labels — button labels, badge text, tag labels, navigation items.

**Font size** — *12px / 14px / 16px*, default *12px* **Line height** — *100%–160%*, default *100%* **Letter spacing** — *-20%–+20%*, default *0* **Font weight** — Light / Regular / Medium / Semi-bold / Bold / Extra-bold **Case** — Normal / Uppercase / Lowercase / Capitalize

***

### Colors

Colors settings define your store's color palette — the combination of background, text, button, and accent colors that appear throughout your store.

**Default color scheme**

The color scheme applied by default across your store when a section doesn't specify its own. This forms the visual foundation of your brand.

**Default:** *Scheme 1*

> **💡 Tip:** Create 2–3 color schemes: one for light backgrounds, one for dark, and one for accents. Then use section-level color scheme settings to apply them where appropriate across your store.

**Page background**

The default background color applied to your store's page background. This is the canvas on which all sections sit.

**Default:** varies (theme-defined)

**Color schemes**

Opens the color scheme editor where you can create, edit, and reorder color schemes. Each scheme defines:

* Background color
* Text color
* Button/Link color
* Accent color
* Accent gradient (optional)

> **📌 Note:** To apply a color scheme to a specific section, open that section in the Theme Editor and look for the **Color scheme** setting.

***

### Section

These are the default settings applied to every Custom Section you add — layout, corner radius, and spacing. Individual sections can override these defaults.

#### Layout

**Section layout**

The default layout style for new sections.

**Options:**

* *Classic* — Traditional layout with straightforward stacking
* *Bento* — Bento grid system with more flexible grid-based placement

**Default:** *Classic*

> **💡 Tip:** Bento layout enables more complex, magazine-style grid arrangements within sections. Classic layout is simpler and works well for straightforward content stacks.

**Content gutter**

The space between content blocks within sections. Higher values create more breathing room between elements.

**Range:** *0px* to *40px* | **Default:** *4px*

**Section gap**

The space between sections on the page. Controls the visual separation between one section and the next.

**Range:** *0px* to *200px* | **Default:** *4px*

> **💡 Tip:** Increase Section gap to 60–80px for a clean, spacious look. Decrease it to 4–8px for a compact, content-dense layout.

#### Style

**Default corner radius**

The default corner radius applied to section containers.

**Options:** *Main corner / Small / Extra small / None / Custom*

**Default:** *Main corner*

> **📌 Note:** "Main corner" means it uses whatever you set in **General → Main corner**. Choosing Small, Extra small, or None overrides that for sections.

**Custom corner radius**

When Default corner radius is set to Custom, enter a specific pixel value.

**Range:** *0px* to *50px* | **Default:** *30px*

#### Padding

The default padding (inner spacing) applied to all new sections — the space between the section edges and the content inside.

**Top / Bottom** — *0px to 200px* | **Defaults:** *32px*

**Left / Right** — *0px to 200px* | **Defaults:** *32px*

**Custom on mobile**

Enable to set different padding values specifically for mobile devices.

**Defaults:** *Top 16px, Bottom 16px, Left 16px, Right 16px*

> **💡 Tip:** Reduce padding on mobile (Top/Bottom: 16px instead of 32px) to prevent sections from feeling too "tall" on narrow screens.

***

### Page header

Controls the default appearance of page headers across your store — the title area at the top of collection, product, blog, and other pages.

#### Layout

**Container width**

**Options:** *Full width / Standard / Wide / Narrow*

**Default:** *Full width*

**Width mode**

Controls how wide the header content area is within the container.

**Options:**

* *Fit* — Content width is determined by the content itself
* *Fill* — Content fills the full container width
* *Custom* — Set a specific width (in percent or pixels)

**Default:** *Fit*

**Direction**

Controls how elements are arranged inside the header.

**Options:** *Vertical / Horizontal*

**Default:** *Vertical*

**Alignment**

Controls the alignment of header content — horizontal position for rows, vertical position for columns.

**Options:** *Left / Center / Right / Space between*

**Default:** *Left*

**Gap**

The space between elements within the header.

**Options:** *Default / 4 / 8 / 12 / 16 / 20 / 24 / 28 / 32 / Custom*

**Default:** *Default*

**Custom gap** — *0px–200px* | **Default:** *4px*

**Custom on mobile**

Enable different alignment and gap values for mobile.

**Default:** *Disabled*

#### Content style

**Title typography preset**

Choose a predefined text style for page headings. Each preset combines font family, size, weight, and spacing.

**Options:** *Display / Heading 1 / Heading 2 / Heading 3 / Heading 4 / Heading 5 / Heading 6 / Subheading*

**Default:** *Heading 1*

**Custom override** — When set to Custom, independently adjust font family, size, line height, letter spacing, weight, and text transform.

**Description typography preset**

Choose a predefined style for the page description text.

**Options:** *Paragraph / Custom*

**Default:** *Paragraph*

**Custom on mobile**

Enable different typography values for mobile.

**Default:** *Disabled*

***

### Button and input

Controls the default appearance of buttons and form inputs across your store.

#### General style

**Shape**

**Options:**

* *Square* — Sharp corners, modern and minimal
* *Rounded* — Slightly rounded corners
* *Pill* — Fully rounded ends — buttons appear as capsules

**Default:** *Rounded*

**Base corner radius**

The corner radius for Rounded buttons.

**Range:** *1px* to *16px* | **Default:** *8px*

#### Button

**Main button hover effect**

Controls what happens when a customer hovers over a primary call-to-action button.

**Default:** varies by theme version

**Link button hover effect**

Controls the hover effect for secondary/text-style buttons.

**Options:** *Classic / Modern*

**Default:** *Modern*

> **💡 Tip:** Use "Modern" hover effects for a premium feel — they typically involve a smooth color fill transition rather than a simple color change.

**Advanced styling**

Enable to access additional button typography controls — weight, letter spacing, and case.

**Default:** *Disabled*

#### Input

**Style**

**Options:**

* *Underline* — A simple line beneath the input field — minimal and modern
* *Boxed* — The input field has a visible border and background

**Default:** *Underline*

**Fill style**

Controls the background fill of input fields.

**Options:** *Fill (solid background) / Outline (border only)*

**Default:** *Fill*

**Hide label**

When enabled, the form field label is hidden (placeholder text takes its place instead).

**Default:** *Enabled*

***

### Drawers

Drawers are slide-in panels that appear from the left or right edge of the screen — used for mini carts, mobile menus, search overlays, and other contextual panels.

#### Heading typography

Controls the text style of headings inside drawers — e.g., "Your Cart", "Search", "Menu".

**Preset options:** *Default / Display / Heading 1–6 / Subheading*

**Custom overrides:** Font family, size, line height, letter spacing, weight, text transform

**Custom on mobile** — Enable separate mobile typography values.

**Default:** *Default*

#### Layout

**Position**

Which side of the screen drawers slide in from.

**Options:** *Left / Right*

**Default:** *Right*

#### Style

**Color scheme**

The color scheme applied to drawer backgrounds and text.

**Default:** theme-defined

**Corner radius**

**Options:** *Main corner / Small / Extra small / None / Custom*

**Default:** *Main corner*

**Effect**

How the drawer appears and disappears.

**Options:** *Slide (moves in from the side) / Fade (fades in and out)*

**Default:** *Slide*

#### Backdrop

The dimmed overlay behind the drawer.

**Backdrop style**

**Options:** *Solid (flat dimmed overlay) / Gradient (directional fade)*

**Default:** *Solid*

**Backdrop color**

For solid style: enter a hex color with alpha transparency (e.g., `#00000033` for 20% black).

**Default:** `#00000033`

**Backdrop blur**

Adds a blur effect to the backdrop, creating a frosted-glass look behind the drawer.

**Range:** *0px* to *20px* | **Default:** *5px*

> **💡 Tip:** A backdrop blur of 5–10px with a subtle overlay creates an elegant, modern feel without obscuring the content behind the drawer.

#### Close button

**Style**

**Options:** *Classic (× icon only) / Boxed (icon in a small container)*

**Default:** *Classic*

#### Spacing

**Margin**

The space between the drawer panel and the screen edge.

**Range:** *0px* to *60px* | **Default:** *20px*

**Padding**

The inner padding inside the drawer — the space between the drawer edges and its content.

**Range:** *0px* to *40px* | **Default:** *20px*

**Custom on mobile**

Enable different margin and padding values for mobile.

**Defaults:** *Margin 10px, Padding 10px*

***

### Social media

Controls the appearance of social media icons and links across your store, plus sharing options for blog articles and product pages.

#### Style

**Display type**

**Options:** *Icon (colored icon only) / Text (platform name)*

**Default:** *Icon*

**Style**

**Options:** *Classic (colored icon or text) / Boxed (icon/text inside a container)*

**Default:** *Classic*

**Boxed style**

When Style is Boxed: *Fill (filled background) / Outline (border only)*

**Default:** *Fill*

**Shape**

Icon type: *Square / Rounded / Circle* | Text type: *Square / Rounded / Pill*

**Default:** *Rounded*

**Size**

**Options:** *Small / Medium / Large*

**Default:** *Medium*

**Custom on mobile** — Enable different size on mobile.

#### Social accounts

Enter the full URL to your social media profiles. Leave a field blank to hide that platform.

* Facebook
* Instagram
* TikTok
* X (Twitter)
* Snapchat
* Pinterest
* Tumblr
* YouTube
* Vimeo

#### Sharing options

Controls which share buttons appear on article and product pages. Each can be individually toggled on or off:

* Facebook
* LinkedIn
* X (Twitter)
* Pinterest
* Telegram
* WhatsApp
* LINE
* Email

**Default:** *All enabled*

***

### Product card

Controls the appearance of product cards across your store — in collection grids, related product sections, and search results.

#### Product image

**Image ratio**

Controls the aspect ratio (width-to-height ratio) of product card images.

**Options:** *4:5 (portrait) / 5:7 (landscape) / 1:1 (square)*

**Default:** *4:5*

> **💡 Tip:** Portrait (4:5) ratios work best for fashion, beauty, and lifestyle products. Square (1:1) works well for catalogs with mixed product orientations.

**Corner radius**

**Options:** *Main corner / Small / Extra small / None / Custom*

**Default:** *Main corner*

**Hover interaction**

Controls what happens when a customer hovers over a product card.

**Options:**

* *None* — No special interaction
* *Reveal second image* — The second product image fades in on hover
* *Image carousel* — Additional product images cycle through automatically
* *Zoom-in* — The image subtly zooms in

**Default:** *Reveal second image*

> **💡 Tip:** "Reveal second image" is the most effective hover interaction — it shows customers an alternative view without requiring any action from them.

**Transition effect**

How the hover interaction transitions in.

**Options:** *Fade / Slide*

**Default:** *Fade*

**Direction from**

When using Slide transition: which direction the new image slides in from.

**Options:** *Left / Right / Bottom*

**Default:** *Left*

**Custom on mobile**

Enable different image settings for mobile.

**Default:** *Disabled*

#### Product information

**Position**

Where the product information (title, price) appears relative to the image.

**Options:** *Outside (below image) / Inside (overlaid on image)*

**Default:** *Outside*

**Style**

**Options:** *Classic (minimal styling) / Boxed (contained in a background)*

**Default:** *Classic*

**Alignment**

**Options:** *Left / Center / Right*

**Default:** *Left*

> **💡 Tip:** Center-aligned product information creates a more editorial feel. Left-aligned is more traditional and easier to scan quickly.

**Show vendor — show/hide the product vendor/brand name**

**Default:** *Disabled*

**Show category — show/hide the product category tag**

**Default:** *Disabled*

**Show unit price — show the price per unit (e.g., "per ml")**

**Default:** *Disabled*

**Show price range label — for products with variants at different prices**

**Default:** *Disabled*

**Typography presets**

Customize the text styles for the product title and price.

**Title preset options:** *Heading 6 / Subheading / Paragraph*

**Price preset options:** *Description / Paragraph / Label*

**Custom on mobile** — Enable separate mobile typography values.

#### Product badges

**Show sold out badge**

Displays a "Sold out" or "Out of stock" label on unavailable products.

**Default:** *Disabled*

**Show sale badge**

Displays a sale label on discounted products.

**Default:** *Disabled*

**Badge type** — *Text ("Sale") / Percentage (e.g., "-20%") / Fixed amount*

#### Quick actions

Quick action buttons appear on product card hover — "Add to Cart" and "Quick View".

**Enable quick add**

Shows an Add to Cart button when customers hover over a product card.

**Default:** *Enabled*

**Enable quick view**

Shows a Quick View button that opens the product in a drawer without leaving the page.

**Default:** *Enabled*

**Actions display type**

**Options:** *Icon / Text / Mix (icon + text)*

**Default:** *Icon*

**Direction**

**Options:** *Vertical (stacked) / Horizontal (side by side)*

**Default:** *Vertical*

**Icon vertical alignment**

When Direction is Horizontal: *Left / Right*

**Default:** *Right*

**Icon row alignment**

When Direction is Horizontal: *Left / Center / Right*

**Default:** *Right*

***

### Product swatches

Controls how color and variant swatches appear on product pages and product cards.

#### General

**Swatches type**

**Options:**

* *Shopify swatches* — Uses Shopify's native variant option display
* *Custom color* — Uses your own color definitions for variant names

**Default:** *Custom color*

**Trigger**

When using custom color swatches: the product option name that triggers the custom color display.

**Default:** *Color*

**Swatches list**

When using custom color swatches: a list of color names and their corresponding hex codes, one per line (e.g., `Navy Blue: #1a1a2e`).

#### Variant picker

**Picker style**

**Options:** *Color swatch / Variant image*

**Default:** *Color swatch*

#### Product card

**Enable color swatches on cards**

Shows variant color swatches directly on product cards in grids.

**Default:** *Enabled*

**Swatches style on cards**

**Options:** *Color swatch / Variant image*

**Default:** *Color swatch*

**Swatches shown by default**

How many swatch options to show on the card before "+N more" appears.

**Range:** *0* to *6* | **Default:** *4*

***

### Variant picker

Controls the appearance of variant selection buttons on product pages.

**Button shape**

**Options:** *Square / Rounded / Pill*

**Default:** *Rounded*

**Button corner radius**

**Range:** *4px* to *16px* | **Default:** *4px*

***

### Prices

**Show currency code**

Displays the currency code next to prices (e.g., "$29.00 USD" instead of "$29.00"). Useful for international stores.

**Options (each toggleable):**

* Product pages
* Product cards
* Cart items
* Cart total

**Default:** *Cart total only enabled*

***

### Cart

Controls the shopping cart experience — how the cart appears, what information is shown, and how upsells are displayed.

#### General

**Cart type**

**Options:**

* *Drawers* — A slide-in cart drawer appears when items are added
* *Page* — Customers go to a dedicated cart page (`/cart`)

**Default:** *Drawers*

> **💡 Tip:** Drawers keep customers on the page and reduce friction — they can add items and checkout without leaving what they're browsing. Pages work better for stores with complex carts or custom checkout flows.

**Auto-open drawer**

When Cart type is Drawers: automatically opens the cart drawer when a customer adds an item.

**Default:** *Enabled*

> **💡 Tip:** Disable auto-open if you have a very fast checkout flow and don't want the drawer interrupting the customer's browsing experience.

#### Cart features

Toggle these features on or off:

* **Order notes** — Allow customers to add special instructions to their order
* **Discount field** — Show a discount code input field
* **Shipping rates calculator** — Show estimated shipping rates
* **Terms checkbox** — Require customers to accept terms before checkout
* **Accelerated checkout buttons** — Show Shopify Pay, Google Pay, Apple Pay buttons
* **Tax info** — Display tax-related information
* **Shop Pay Installments** — Show installment payment options (e.g., "Pay in 4")

**Defaults:** *Order notes, Discount, Shipping rates, Accelerated buttons, Tax info enabled. Terms and Installments disabled.*

#### Empty cart recommendations

**Empty cart text**

Custom rich text displayed in the empty cart area.

**Empty cart button link**

URL that the "Continue Shopping" button links to.

**Default:** `/collections/all`

**Collection**

Choose which collection's products are shown in the empty cart.

#### Free shipping bar

**Show free shipping bar**

Displays a progress bar toward a free shipping threshold.

**Default:** *Disabled*

> **💡 Tip:** The free shipping bar is one of the most effective upsell tools. Showing customers how close they are to free shipping encourages larger cart values.

**Free shipping goal**

The order value (in your store's currency) required to unlock free shipping.

**Default:** theme-defined

#### Recommended products

**Additional products**

Manually select products to show as recommendations in the cart.

**Default:** *None*

**Maximum products**

How many recommended products to show in the cart.

**Range:** *1* to *20* | **Default:** *20*

***

### Search

Controls the search experience — how the search feature appears and what happens when customers search.

#### General

**Search type**

**Options:** *Drawers / Page*

**Default:** *Drawers*

> **📌 Note:** When set to Drawers, search opens in a slide-in panel. When set to Page, customers are taken to the dedicated search page.

**Search style**

How the search icon/button appears.

**Default:** *Icon*

#### Empty search recommendations

Shown when a customer searches but no results are found — helps them discover content even with no exact match.

**Show suggested keywords**

Display clickable keyword suggestions below the search field.

**Default:** *Disabled*

**Suggested keywords title** — Heading above the keyword list

**Suggested keywords** — Comma-separated list of suggested keywords

**Show suggested products**

Display a row of product cards below the search field.

**Default:** *Disabled*

**Suggested products title** — Heading above the product row

**Suggested products** — Select products to display

***

### Customer accounts

**Account menu**

Select which navigation menu to display in the customer account area.

**Default:** *None*

***

### How it all works together

Your global theme settings form a layered system:

1. **Typography settings** set your font choices and base sizes globally
2. **Color settings** define your palette — applied through color schemes
3. **Section settings** apply those colors and spacing defaults to every section
4. **Section-level overrides** let any individual section break from the global defaults
5. **Block-level settings** fine-tune individual content elements

When you change a global setting (e.g., Heading font size), it cascades everywhere that heading style is used. When you override at the section level, only that section is affected.

> **📌 Note:** Changes to global theme settings take effect immediately across your entire storefront. Always preview changes before saving if you're adjusting typography or colors — those changes are visible everywhere.

***

### Tips & best practices

> **💡 Tip:** Set your typography once and trust it. If you've chosen a good base font size (16px for body), line height (140%), and heading sizes, resist the urge to tweak them frequently. Consistency in typography is what makes a store feel polished.

> **💡 Tip:** Use 2–3 well-defined color schemes rather than one catch-all. A light scheme for most pages, a dark scheme for dramatic sections, and an accent scheme for calls-to-action keeps things organized.

> **💡 Tip:** For product-heavy stores, invest time in the **Product card** settings — this is the element customers see most often. The right image ratio, hover interaction, and quick action buttons can significantly impact click-through rates.

> **⚠️ Warning:** Reducing body text below 14px or line height below 120% may cause accessibility issues and make your store harder to read for some customers. Test on real devices before publishing.

***

### Related pages

* Custom Section guide — understand how section-level settings override these global defaults
* Custom Section guide — section-level color scheme overrides
* Collection Template — how color schemes apply to collection pages
* Product Template — how product card settings work
* Shopping Cart page — cart drawer vs. page configuration