Theme settings change the whole store at once. Open the theme editor and select the gear icon (Theme settings) in the left bar. The groups below are in the same order as in the editor. Colors and motion have their own pages: Colors and Motion.
Many groups keep their finer controls behind a checkbox such as Show more settings or Customize spacing and accent font. Leave it off and Kyoto uses balanced defaults; turn it on when you want full control.
Logo and favicon
Setting
Range or choices
What it does
Logo
Image
Your logo in the header. Without a logo, the shop name is set in type (see the Shop name and tagline block in Header and footer).
Inverse logo
Image
A light version for the transparent header over images and for the footer's inverse logo option. Leave empty to use the main logo.
Logo height
16 to 120 px (default 40)
Height of the logo on computers.
Logo height on mobile
16 to 80 px (default 32)
Height of the logo on phones.
Favicon
Image
The small icon in the browser tab. Use a square image, 32 x 32px or larger.
Typography
Kyoto uses three font roles: Heading font, Body font and Accent font (labels, buttons and small capitals). Every font can be chosen from Shopify's font library.
Fonts
Setting
Choices
What it does
Heading font, Body font, Accent font
Shopify font library
The Latin fonts for each role.
Japanese font source
System fonts, Font library
Font library loads the Japanese fonts below from Shopify. System fonts uses the fonts on the shopper's device, which is faster.
Japanese heading font, Japanese body font
Shopify font library
Shown with Font library. The Kyoto preset uses Shippori Mincho for headings and Zen Kaku Gothic New for body text.
The device font for headings. Chinese pages always use the device fonts; Japanese pages use them with System fonts and while library fonts load.
Body system font (Japanese, Chinese)
Gothic (sans serif), Mincho (serif)
The same for body text.
Sizes
Setting
Range or choices
What it does
Body text size
12 to 20 px (default 17)
Size of body text on computers.
Body text size on mobile
12 to 18 px (default 16)
Size of body text on phones.
Heading size scale
1.125, 1.2, 1.25, 1.333, 1.414
How much larger each heading level is than the one below it. A higher number gives more contrast.
Heading size scale on mobile
1.125, 1.2, 1.25
The same on phones.
Line and letter spacing
Setting
Range or choices
What it does
Heading line height, Body line height
Tight, Normal, Loose
Space between lines.
Heading text case
None, Uppercase, Lowercase
Changes the case of Latin headings.
Customize spacing and accent font
On or off
Shows the four settings below.
Heading letter spacing, Body letter spacing
−5 to 20 %
Space between letters.
Accent text case
None, Uppercase, Lowercase
Case of accent text such as labels.
Accent letter spacing
−5 to 20 %
Space between letters of accent text.
Japanese and Chinese type
Setting
Range or choices
What it does
Line height (Japanese, Chinese)
1.4 to 2.2 (default 1.8)
Line height of Japanese and Chinese text, which reads best with more space than Latin text.
Letter spacing (Japanese, Chinese)
0 to 10, in 1/100 em (default 4)
Adds a little air between characters.
Heading spacing (Japanese, Chinese)
0 to 20, in 1/100 em
Shown with Customize spacing and accent font.
Tighten punctuation (palt)
On or off
Uses the font's proportional punctuation, so brackets and periods take less space.
Break lines between phrases
On or off
Japanese headings wrap between phrases instead of in the middle of a word. Browsers without support wrap as usual.
Space around English words and numbers
On or off
Adds a small space where Japanese text meets English words or numbers, in browsers that support it.
Heading levels
Turn on Set H1 to H6 individually to choose the size of each heading level yourself. Each level (H1 to H6) then has a size (Auto or 14, 16, 18, 20, 24, 28, 32, 40, 48, 56, 64, 72, 88, 104 or 120 px) and a font (Heading, Body or Accent). With the checkbox off, the sizes follow Heading size scale. The Kyoto preset turns it on with large display headings (H1 88 px, H2 72 px).
Heading sizes change smoothly with the screen width: the size you choose is reached on large screens, and phones get a proportionally smaller size.
Layout
Setting
Range or choices
What it does
Page width
1000 to 1920 px, in steps of 20 (default 1360)
The widest the content gets on large screens. Sections set to Wide or Full width go beyond it.
Page side margin
16 to 80 px, in steps of 4 (default 48)
Space at the left and right of the page on computers.
Page side margin on mobile
12 to 32 px, in steps of 2 (default 20)
The same on phones.
Spacing density
Compact, Regular, Spacious
Scales every spacing step in the theme at once.
Section spacing
None, Extra small, Small, Medium, Large, Extra large
Space above and below each section. Each section can override it.
Section spacing on mobile
50, 66, 75, 100
Percentage of the desktop spacing used on phones.
Product grid spacing
8 to 48 px, in steps of 4 (default 24)
Gap between product cards on computers.
Product grid spacing on mobile
4 to 24 px, in steps of 2 (default 12)
Gap between product cards on phones.
Shape
Setting
Range or choices
What it does
Corner radius
0 to 32 px, in steps of 2 (default 4)
Rounds the corners of cards, images, inputs, badges and pop-ups.
Set radius per component
On or off
Sets the corner radius for each part separately: Card corner radius (0 to 40 px), Image and video corner radius (0 to 40 px), Input corner radius (0 to 32 px), Badge corner radius (0 to 40 px), Drawer and pop-up corner radius (0 to 24 px).
Border width
0 to 4 px (default 1)
Width of rules and borders across the theme.
Shadow style
None, Soft, Hard
Adds a shadow. With a style chosen, set Shadow strength (0 to 100 %) and where shadows appear: Shadow on cards, Shadow on buttons, Shadow on drawers and pop-ups.
Buttons
Setting
Range or choices
What it does
Button shape
Square, Rounded, Pill
With Rounded, set Button corner radius (2 to 24 px).
Primary button style
Filled, Outline
The main action, such as Add to cart.
Secondary button style
Outline, Filled, Text
Other actions. Text shows an underlined link.
Button font
Body, Heading, Accent
Which font role buttons use.
Button text case
None, Uppercase, Lowercase
Show more settings
On or off
Shows the size controls below.
Button height
36 to 64 px, in steps of 2 (default 48)
Button side padding
12 to 48 px, in steps of 4 (default 24)
Button border width
0 to 4 px (default 1)
Button letter spacing
−5 to 20 %
Button icon
None, Arrow, Plus
A small icon after the label.
Inputs and variants
Setting
Range or choices
What it does
Input style
Boxed, Underline
The look of form fields.
Input height
36 to 64 px, in steps of 2 (default 48)
Input border width
0 to 3 px (default 1)
Input label position
Above, Floating
Where field labels sit.
Required field marker
Asterisk, Text label
How required fields are marked.
Variant button style
Outline, Filled
The look of option buttons on product pages.
Sold out variant style
Strikethrough, Fade, Hide
How unavailable options look.
Swatch shape
Circle, Square, Rounded
Shape of color swatches.
Swatch size
20 to 48 px, in steps of 2 (default 28)
Use variant images for swatches
On or off
For options without color swatches, each variant's image is used as its swatch.
Swatch colors and images come from your product options in the Shopify admin (the color or pattern you set for each option value).
Product cards
These settings shape every product card in the store. Sections that show cards can override the image ratio and hover effect.
Setting
Range or choices
What it does
Card style
No border, Boxed, No border, name column, Color field, label plate beside the object
No border, name column (the default) places the product name in a slim column beside the picture (set vertically on Japanese and Chinese pages). Names are never shortened: a name that does not fit moves under the picture. Color field, label plate beside the object turns the whole card into a pale craft color field: the object stands on a thin floor line, and a small white label plate beside it holds the name, the maker line (vendor and the custom.made_in metafield) and the price. The plate stays horizontal in every language; on narrow cards it moves under the object. Its sizes are set in the Grid look block of a collection and the Search look block of the search page.
Card color scheme
Color scheme
Shown with Boxed.
Card image ratio
Adapt to image, Portrait, Tall, Square, Landscape, Wide
Shape of card pictures.
Card image fit
Cover, Contain
Cover fills the frame and may crop; Contain shows the whole picture.
Text alignment
Start, Center
Card hover effect
None, Second image, Zoom, Second image and zoom, Wipe, Lift, Gray to color, Slideshow, Tilt
What happens when a pointer rests on a card.
Product name lines
1, 2, 3, No limit
Limits names under the picture to a number of lines.
Show vendor, Show subtitle, Show rating, Show swatches, Show badges
On or off
Show subtitle reads the standard product subtitle metafield. Show rating reads the rating a reviews app saves.
Swatches to show
2 to 10 (default 5)
Quick add
None, Button, Icon
Adds a quick add control to cards.
Show quick add on mobile
On or off
Show quick view button
On or off
Adds a quick view link. Without JavaScript it opens the product page.
Quick buy display
Drawer, Modal
How quick add and quick view open.
Under Advanced > Show more settings:
Setting
Range or choices
What it does
Low stock threshold
0 to 20 (default 0)
Shows "Low stock" when tracked inventory is at or below this number. The number itself is never shown. 0 turns it off.
Swipe images on mobile
On or off
Shoppers can swipe through up to 5 images on each card.
Size option names
Text
For example Size, サイズ. The first matching option is listed under the swatches.
Show product type
On or off
Show compare checkbox
On or off
Adds a compare button to each card. Add a Product comparison section to show the chosen products.
Product name case
None, Uppercase
Product name size
Small, Medium, Large
Countdown metafield
Text
A product metafield (namespace.key) with an end date and time. The countdown shows only for a future date.
Description lines
None, 1, 2, 3
Shows the start of the description.
Info order
Standard, Price first, Compact, Editorial
Editorial adds a running number and the collection label.
Collection and article cards
Setting
Choices
What it does
Collection card style
Below, Overlay
Collection name under the picture or on it.
Collection card image ratio
Adapt to image, Portrait, Tall, Square, Landscape, Wide
Collection card color scheme
Color scheme
Article image ratio
Adapt to image, Portrait, Tall, Square, Landscape, Wide
Show date, Show author, Show excerpt
On or off
What article cards show.
Badges and prices
Setting
Range or choices
What it does
Badge position
Top left, Top right, Bottom left, Bottom right
Badge shape
Square, Rounded, Pill
Sale badge wording
Sale, Percent off, Amount off
Days a product counts as new
0 to 60 (default 0)
Products published within this many days get a New badge. 0 turns it off.
Tag prefix for custom badges
Text (default badge:)
Tag a product badge:Limited to show a Limited badge. Leave empty to turn off tag badges.
Badges per product
1 to 4 (default 2)
Custom badge colors
On or off
Background and text colors for sale, sold out, new and tag badges.
Compare-at price position
Before, After
Color sale prices
On or off
Uses Sale price color from the Colors group.
Price range display
From lowest price, Price range
How prices show in lists when variants have different prices.
Enter the full address of each profile: Facebook, Instagram, X, TikTok, YouTube, Pinterest, Threads, LinkedIn, Snapchat, LINE, Weibo, Xiaohongshu, Bilibili and Douyin. WeChat has no profile link, so add a WeChat QR code image and your WeChat ID instead. Icons appear wherever a section has Show social media icons turned on.
Default share image is used when a shared page has no image of its own and none is set in Online Store > Preferences.
Region and language
Setting
Choices
What it does
Show currency codes
Off, Product and cart, Everywhere
Shows codes such as USD next to prices. Useful when you sell in currencies that share a symbol.
Country and language label
Short, Full
How the pickers name countries and languages.
Show country flags
On or off
Show tax-included label
On or off
Shows "Tax included" after prices on Japanese pages, only when your prices include tax.
Enable noshi
On or off
Adds noshi choices to the cart's Noshi (Japan) block. Set the choices in Noshi inscriptions. See Cart.
Enable delivery date and time
On or off
Adds a requested delivery date and time to the cart. Set Earliest delivery (days) (1 to 14), Selectable range (days) (7 to 60) and Delivery time slots.
Chinese script priority
Auto, Simplified Chinese, Traditional Chinese
Which Chinese device fonts come first on Chinese pages.
Show price after coupon
On or off
Shows a price after coupon from a product metafield. Only for products with one price.
Lightweight mode
On or off
YouTube and Vimeo videos and embedded maps show as links instead of loading, for regions where they are blocked.
Accessibility and more
Setting
Range or choices
What it does
Focus outline width
2 to 4 px (default 2)
The outline that shows where keyboard focus is.
Focus outline offset
0 to 6 px (default 2)
Space between the outline and the element.
Underline links in text
Always, Hover
Keep Always so links are recognizable without color.
Show reduce motion button in footer
On or off
Lets shoppers stop animations on your store. The choice is saved in their browser.
Overlay opacity
0 to 80 %, in steps of 5 (default 40)
The dark layer behind drawers and pop-ups.
Drawer width
320 to 560 px, in steps of 20 (default 420)
Width of the cart drawer and other side drawers on computers.
Placeholder style
Line, Solid
The drawing shown where an image is missing.
Placeholder image
Image
Your own picture for missing images.
Preload pages on hover
On or off
Loads the next page when a shopper points at or touches a link, so it opens faster. Cart, checkout and account links are never preloaded.
Show breadcrumbs
On or off
Shown above product, collection, blog, article, page and search pages, with breadcrumb data for search engines.
