Kroma

What's new in 2.0#

Kroma 2.0.0 is a redesign. The store is presented as a showroom: products stand on a floor, each in its own frame, in front of a lit backdrop. The size, fit, and delivery features are the same as before.

• The showroom on every page. Product photos stand on a floor line, with a shadow where they touch it. Product cards carry a catalog tag such as "N° 012 · Sneakers". The new Light behind products setting lights the backdrop behind the products that matter.
• One image shape for the whole store. Portrait, square, or landscape, chosen once in Product cards. Photos always fill their frame.
• A new header. A floating bar with the menu in line on large screens, a full-page index when the menu doesn't fit, and a bar at the bottom of the screen on tablets and phones.
• New sections. Slideshow in depth, Video banner, and Product spotlight. Collection list has three layouts.
• The product stage. The product page is arranged around the photos, with a buy bar on phones. See The product stage.
• Collection, cart, and search. Filters in a pill at the bottom of the screen, the cart drawer as a tray, and search on a full page.
• EU blocks. Product safety (EU) and Lowest price in 30 days (EU) for the product page.
• Motion. Page transitions in browsers that support them, and the product photo flies into the cart drawer.

Removed in 2.0: the Product image fit setting (photos now always fill their frame), Media width in Product information, and the Customer account menu setting of the Header.

Getting started#

Install the theme#

1. On the Kroma page of the Shopify Theme Store, pick one of the two styles (see Theme styles).
2. Select Try theme to preview it in your own store for free, or buy it. Either way, the theme is added to the theme library in Online Store > Themes. It is not published yet, so your customers don't see it.
3. Select Customize to open the theme editor. Set up your logo, colors, and menus (see Where to start).
4. When you're happy with it, select Publish.

A theme license is valid for one store. If you buy the theme again in the same store, for example to get a fresh copy, you aren't charged again.

Theme styles#

Kroma comes with two styles. A style is a set of theme settings: colors, fonts, image shape, and light. Both styles have the same sections, blocks, and features.

Both styles use rounded buttons (Button corner radius 40 px), an Input corner radius of 12 px, and text As written in headings, buttons, and navigation.

Every value in the table is a regular theme setting, so you can start from either style and change any of them later. Shopify also lets you switch a theme to its other style from the theme editor: open Theme settings and look for the theme style option. Switching style replaces your theme settings (colors, fonts, image shape, light) with the style's values, but keeps your sections and content. Duplicate the theme first if you want to keep your current settings.

What the demo store content includes#

Installing the theme gives you the theme's design and features, and a home page and product page set up like the demo store of the style you chose. Products, photos, and other store content stay in the demo store.

Sections that don't have content yet show placeholders in the theme editor, so you can see where your images and products will go.

Where to start#

In the theme editor, these steps change the most with the least effort:

1. Logo. In Theme settings > Logo and favicon, upload your Logo and Favicon. Without a logo, the header shows your store name as text.
2. Colors. In Theme settings > Colors, change your brand colors at the top. Every color scheme uses them, so the whole store updates at once (see Colors).
3. Image shape and light. In Theme settings > Product cards, choose the Image shape closest to your product photos. In Theme settings > Showroom, choose the Light behind products (see Showroom).
4. Menus. In your Shopify admin, open the menu editor (Content > Menus, or Online Store > Navigation in some admins) and edit Main menu and Footer menu. Nest links up to three levels for a wide dropdown with columns (see Menus and dropdowns).
5. Home page. Add your images to the slides, and choose the collections for Product spotlight and Collection list.
6. Size charts. Paste your own charts in Size guides (see Size guides).
7. Filters. Set up size and color filters in the Search & Discovery app (see Filters and sorting).

Theme settings#

Theme settings apply to the whole store. In the theme editor, open Theme settings in the sidebar. The groups below are listed in the order you see them.

Logo and favicon#

Logo

Landscape, portrait, and square logos all work. A 600 x 200 px .png is recommended. The logo is also used on the gift card page and the password page.

Logo width on large screens and Logo width on small screens

Appear once a logo is uploaded. Large screens are 990 px wide or more, such as laptops and desktops.

Favicon

The small icon in the browser tab. A 32 x 32 px .png is recommended.

Colors#

Colors work in three layers, so you set each color once:

1. Brand colors (the palette at the top of the group). Kroma has five: a text color, a background color, a tint, an accent, and a sale color.
2. Color schemes combine the brand colors into a background, text, and buttons. Each scheme uses the brand colors by default, so changing a brand color updates every scheme that uses it.
3. Sections each pick one scheme with their Color scheme setting.

Each color scheme has these settings:

The theme starts with five schemes. Scheme 1 uses the background color, scheme 2 the tint, scheme 3 swaps text and background (used by the announcement bar and the text on images), scheme 4 uses the accent as background, and scheme 5 uses the background color with accent-colored buttons. In the Stride style the text color is light and the background color is dark, so scheme 1 is dark and scheme 3 is light. You can edit the schemes and add more.

Under Badges, Sale badge background and Sale badge text color the sale badge on product cards and the discount lines in the cart. Sale prices use the badge background color too, on every scheme where it stays readable; on other schemes they use the text color.

Under Stock status, In stock and Low stock color the dots next to the stock message on product pages; In stock also colors the store pickup icon.

Typography#

Fonts come from the Shopify font library. Choose them with the font picker.

Headings: Font, Size, Letter case

Size scales every heading from 80% to 150%. Letter case is As written or Uppercase.

Body text: Font, Size

The size of regular text, from 14 px to 20 px. 16 px is the most readable on phones.

Navigation and labels: Letter case

Applies to the main menu, footer headings, and small labels.

Layout#

Page width

Narrow (1200 px), Standard (1440 px), or Wide (1720 px). Full-width sections, like Slideshow in depth, Video banner, and Image banner, always fill the screen, and the stage of Product spotlight runs from edge to edge.

Page margin

Space between the content and the edge of large screens. Small screens always use 16 px.

Space between grid items

The gap between product cards, collection cards, and photos in the product gallery.

Buttons and inputs#

Button corner radius (0 px is square, 40 px is fully rounded), Button letter case, and Input corner radius for text fields and size buttons.

Showroom#

Kroma presents products the way a showroom does. Four things come back on every page:

• The floor. A thin line that products stand on: under product cards, under the photos of the product page, in the cart, and in the home page sections.
• The frame. Every product photo fills a frame of the same shape (see Image shape), with nearly square corners and a soft shadow where it touches the floor.
• The tag. A small label above the product name, such as "N° 012 · Sneakers". Collections show their number of products in the same place.
• The light. A backdrop lit from above, behind the products that matter.

Light behind products

Soft is a soft light from above, for light color schemes. Spotlight is a narrower pool of light that fades into the background, made for dark color schemes like the Stride style. None leaves the plain background color. The light is used behind the product page photos, Product spotlight, Collection list with the Spotlight layout, Featured product, Image with text, Shop the look, Email signup, the photo in the full-page index, and the page not found.

Motion and page transitions#

In Kroma, things move only where an object moves through space. There are no settings for it, and the store works the same without it.

• Page transitions. In browsers that support view transitions, the page you leave moves back and fades while the next one arrives, and the header stays in place. When a customer opens a product from a product card or from Product spotlight, its photo moves from the card to its place on the product page, and back.
• Added to cart. When the cart is a drawer, the product photo flies into its new line in the drawer.
• In depth. Slideshow in depth and the Carousel in depth gallery of the product page.

When a customer has turned on reduced motion in their device settings, none of these move.

Product cards#

Product cards are the product tiles in collections, search results, and product sections. Each card stands on the floor, with its tag, name, and price under the photo.

Image shape

Portrait (3:4), Portrait (4:5), Square (1:1), or Landscape (4:3). This is the shape of every product photo in the store: product cards, the product page gallery, Product spotlight, and the photos in the full-page index. Photos always fill the frame, and the edges that don't fit are trimmed, so choose the shape closest to your photos. On product cards, the focal point you set on an image in your admin stays in view.

Show catalog number and category

Shows the tag above the product name, for example "N° 012 · Sneakers". The number is the product's place in the list, like a label in a gallery: on collection and search pages it continues from page to page. It appears on collection pages, search results, Featured collection, and Related products. The category is the product type from your admin; products without a type show the number only. Turn it off for a plainer card.

Show second image on hover

With a mouse, the card shows the product's second photo when the pointer is over it.

Show color swatches

Shows up to five color swatches under the price, then "+3" for the rest. Pointing at a swatch shows that color's photo on the card, and selecting it opens the product in that color. The photo only changes if the variant has its own image (see How do I assign a photo to each color?).

Show quick add

Customers pick a size and add to cart without leaving the page. See Quick add.

Show discount percentage on sale badge

Shows "-30%" instead of "Sale" on products with a compare-at price. The percentage is calculated on the lowest price of the product.

Quick add#

When Show quick add is on, each card has a Quick add button. It opens a panel on the card with one button per size. One tap adds that size to the cart. Sold-out sizes are shown but can't be selected.

• The sizes are those of the color shown on the card (the first color in stock).
• Products without sizes, or with a single size, show an Add to cart button instead.
• Sold-out products and gift cards don't show quick add.
• After adding, the cart drawer opens, or the cart page if Cart type is Page.

Color swatches#

This group holds the Color list: one color per line, with the name as written in your products, a colon, and a hex code. For example:

Sand: #D8C6A6
Navy: #1F2A44
Cognac: #9A4F22

See Where swatch colors come from for how the theme uses the list.

Cart#

Cart type

Drawer opens the cart as a panel on the side of the page after a product is added, and when customers select the cart icon. Page takes customers to the cart page.

Show order note

Adds an Add an order note field to the cart, for gift messages or delivery instructions. The note appears on the order in your admin.

Free shipping from

Shows a progress bar in the cart. See Free shipping bar.

Social media#

Add the full link to each account, for example https://www.instagram.com/yourstore. Available: Instagram, TikTok, Facebook, Pinterest, YouTube, X (formerly Twitter), Threads, Snapchat, Vimeo, and Tumblr. Empty fields stay hidden. The icons appear in the footer (when Show social media icons is on) and at the bottom of the full-page index.

Currency format#

Show currency codes shows prices like €25.00 EUR. It's useful when you sell in more than one currency. The cart and checkout always show currency codes.

Header and navigation#

The header area has two sections: Announcement bar and Header. They appear on every page, so you edit them once.

Announcement bar#

Add one Announcement block per message, up to six. Each has a Text and an optional Link. When there's more than one message, customers switch between them with arrows. Messages don't rotate on their own: moving text is hard to read and distracts from shopping. Choose the colors with Color scheme.

To hide the bar, hide or delete the section. With no announcements, it doesn't show.

Header layout#

The header is a floating bar, slightly see-through, set a little away from the edges of the screen, with a soft shadow. It holds the logo, the main menu, and three icons: search, account, and the cart with the number of items. The account icon (a person) links to the customer account page. It appears when customer accounts are turned on in Settings > Customer accounts.

Color scheme and Dropdown color scheme

The colors of the header bar, and of the dropdowns and the full-page index that open from it.

Layout on large screens

Logo on the left, menu next to it: the logo, then the menu, then the icons on the right. Logo in the middle: the menu on the left, the logo in the middle, the icons on the right. Large screens are 990 px wide or more. On smaller screens, the header shows only the logo, in the middle, and the menu and icons move to the bottom bar.

When the first section of a page is a Slideshow in depth or a Video banner, the section starts at the very top of the screen and runs under the header bar. Its text stays clear of the bar.

Sticky header#

Sticky header has three options:

• Off: the header scrolls away with the page.
• On scroll up: the header slides away while customers scroll down, and comes back as soon as they scroll up. It keeps the screen free for product photos. The Stride style starts with this option.
• Always: the header stays at the top of the screen. The Kroma style starts with this option. Parts of the page that stay in place while customers scroll, like the slides of Slideshow in depth, stop right under the header.

Menus and dropdowns#

Main menu is the menu shown in the header, Main menu by default. On large screens, it's shown in line in the header. Dropdowns open on hover and click, and work with the keyboard.

• A menu item with links nested under it opens a dropdown.
• A menu with three levels (for example Women > Shoes > Sneakers) shows as a wide dropdown with one column per second-level link. It can also show photos (see Menu images).
• If a top-level item has its own link (for example to the Women collection), the dropdown ends with a "Shop all Women" link.
• When the menu doesn't fit on one line, for example with many menu items, long translations, or a laptop screen, the header shows a menu icon instead. It opens the full-page index.

Full-page index#

The index shows the whole main menu on one page. It opens from the menu icon of the bottom bar on tablets and phones, and from the menu icon in the header on large screens when the menu doesn't fit on one line.

• Top-level menu items are listed in large type. An item with links under it opens to show them, with a "Shop all" link when the item has its own link.
• On large screens, a photo stands on the floor at the right, under the light. When customers point at or move the keyboard focus to a menu item, it shows that item's photo: the image of the collection it links to, with the number of products, or the image of the product. For other links, it uses the image of a Menu image block for that menu item.
• The bottom of the index holds the country/region and language selectors and your social media icons.
• Customers close it with the close button or the Esc key.

Bottom bar on tablets and phones#

On screens narrower than 990 px, a bar at the bottom of the screen holds four icons, within reach of the thumb: the menu (it opens the full-page index), search, account (when customer accounts are turned on), and the cart with the number of items. There's nothing to set up. On product pages, the buy bar sits right above it, and on collection and search pages, the filter pill.

Menu images#

Add a Menu image block to the Header to show a photo in the wide dropdown of a main menu item. It's a good place for a new collection or a campaign.

1. In the Header section, select Add block > Menu image.
2. In Main menu item, write the menu item exactly as it appears in the menu, for example Women. Capital letters don't matter, but spelling and spaces do.
3. Choose the Image, and optionally a Heading, a Text, and a Link.

In dropdowns, menu images appear only on menu items with three levels, because only those have a wide dropdown, and only on large screens. In the full-page index, the block's image is used as the photo of its menu item when the item doesn't link to a collection or product with an image. You can add up to eight blocks, and more than one per menu item.

Country/region and language selectors#

Show country/region selector and Show language selector are in both the Header and the Footer. The header's selectors appear at the bottom of the full-page index. On large screens, while the menu fits in the header, customers find them in the footer, so keep them on in the Footer too.

The selectors show only when you sell in more than one country/region or language. Manage them in Settings > Markets and Settings > Languages. The country selector shows each country with its currency, for example "Canada (CAD $)", and has a search field for long lists.

Search#

The search icon opens search on a whole page. What customers type appears in large type. As they type, predictive search suggests search terms, collections, pages, and blog posts, with the matching products standing on the floor below, up to four of each. Products that are sold out appear last. Pressing Enter opens the search results page. There's nothing to set up: results come from your store's content.

Footer#

The Footer section has up to six blocks:

• Menu: a Heading and a Menu. Shows top-level links only, so create a separate menu for each footer column.
• Text: a Heading and a Text, for contact details or opening hours.
• Email signup: a newsletter form. Subscribers are added to your customer list with email marketing consent. One per footer.

The section settings control Show social media icons, the country/region and language selectors, and the Bottom bar:

• Show payment icons: the payment methods you accept, from your payment settings.
• Show policy links: links to the policies you wrote in Settings > Policies.
• Show Follow on Shop: a button to follow your store in the Shop app. Shop Pay must be turned on.

Home page sections#

To add a section, select Add section in the theme editor sidebar. Most sections can also be added to other pages, such as product pages, collection pages, and pages with a custom template. Every section has a Color scheme, and most have a Top padding and a Bottom padding under Spacing.

The Image banner, Image with text, and Rich text sections are built from blocks, so you choose what they show and in which order. Select Add block under the section, and drag blocks to reorder them:

• Caption: short text above the heading, for example "New season" (one per section).
• Heading, with a Heading size of Small, Medium, or Large.
• Text: paragraphs, links, and lists.
• Button, with a Button label, a Button link, and a Button style (Solid or Outline). Buttons that follow each other sit side by side. When the link is empty, the button opens all products.

The Email signup section has Heading, Text, and Email signup form blocks.

Slideshow in depth#

Full-screen slides for the top of the home page, each with a photo, a caption, a heading, a text, and a button. Add one Slide block per slide, up to five.

Motion

In depth: customers scroll through the slides. The slide in front comes toward them and fades, and the next one arrives from the depth, where the others wait as smaller pictures. The scroll settles with one slide in front. Static: a slideshow customers swipe or browse with the arrows.

Text position

Bottom left, Bottom center, or Middle center.

Image darkening

Darkens the photos from 0% to 80% so light text stays readable.

Color scheme

The colors of the text and buttons on the slides.

Slide blocks

Image, Image on small screens (optional: a vertical photo usually works better on phones), Caption, Heading, Text, Button label, and Button link. To keep a face or a product in view when the photo is cropped, set a focal point on the image in the image picker.

The slides also show as the static slideshow when there's only one slide, on devices without 3D graphics support (WebGL 2), and when the customer has turned on reduced motion. Until the 3D view is ready, the first slide shows as a regular image, so the page looks the same while it loads. The text, buttons, and links are always regular page content, so they work with the keyboard and screen readers.

Video banner#

A video that plays muted and on a loop, with a caption, a heading, a text, and a button on top.

Video

A video uploaded to your store. A pause button is always shown. When the customer has turned on reduced motion, the video starts paused.

Image

Shown when there's no video.

Caption, Heading, Text, Button label, and Button link

The words and the button on the video. Empty fields are hidden.

Height

Small, Medium, Large, or Full screen.

Text position, Image darkening, and Color scheme

As in Slideshow in depth.

Product spotlight#

Products from one Collection, on a lit stage that runs the full width of the screen. One product stands large in front, with its name and price. The others stand behind it, spread out to the edges of the screen, smaller, blurred, and veiled the further they are from the front. The product in the middle of the list starts in front.

• Selecting a product behind brings it to the front. Selecting the product in front opens it.
• Customers can also use the arrows, the left and right arrow keys, the Tab key, or swipe on touch screens.
• The photos use the store's Image shape, and the stage uses the Light behind products.

Settings: Caption, Heading, Collection, Products to show (3 to 12), and Show link to the collection, which adds a "View all" link. Use it for new arrivals or best sellers; you can add it more than once.

Collection list#

Your collections, such as "Shop by category". Add one Collection block per collection, up to 12. Each shows the collection image, or the image of its first product if the collection has none, and its number of products, like "24 products". The block's Image replaces the collection image here only.

Layout

Spotlight: the same stage as Product spotlight, with one collection large in front and the others behind it. Row: one row of collections starting at the left, that customers swipe, scroll, or move with the arrows. Grid: rows of tiles. With a single collection, Spotlight and Row show as a grid.

Image shape

Portrait (3:4), Square (1:1), or Landscape (4:3), for this section only. Photos fill the frame.

Columns on large screens

From 2 to 6, for the Grid layout.

Image with text#

A photo next to text blocks: by default a heading, text, and a button. Good for your brand story, materials, or where your products are made. The photo stands on a lit backdrop, on a floor line with a shadow where it touches it. A caption starts with a fine line. Image position on large screens puts the image on the Left or Right. On small screens, the image is above the text.

Shop the look#

An outfit photo, on a lit backdrop, with a numbered point on each product. Next to the photo are a Caption, a Heading, a Text, and the same products as a numbered list ("N° 01", "N° 02"...), so each number on the photo matches a product in the list. Customers select a point to see the product's photo, name, and price, with a link to the product. The list makes the products easy to reach on phones and with a keyboard.

1. Choose the Image.
2. Add one Product point block per product, up to six, and choose the Product. Points are numbered in the order of the blocks.
3. Move the point with Horizontal position (0% is the left edge, 100% the right edge) and Vertical position (0% is the top, 100% the bottom). The preview updates as you drag the slider.

Featured product#

One Product on the product stage, so customers can buy it from the home page. Its photos stand on a lit backdrop, one at a time with arrows, next to the buy buttons. Its blocks are Title, Vendor, Price, Variant picker, Quantity selector, Buy buttons, Text, Custom Liquid, View details link (a link to the full product page), and app blocks. Media width (Small, Medium, or Large) sets how much room the photos take. Zoom, size guides, and the other product page blocks are on the product page only.

Email signup#

A newsletter form with a heading and text, on a lit backdrop, built from Heading, Text, and Email signup form blocks; the Email signup form block is the field and the Subscribe button. Alignment is Left or Center. Subscribers are added to your customer list with email marketing consent. You can find them in Customers and email them with Shopify Messaging or your email app.

Image banner#

A full-width photo with text blocks on top: a caption, a heading, text, and buttons. Use it for a campaign, when you prefer a single photo to a slideshow.

Image and Image on small screens

A 2400 x 1400 px .jpg is recommended for the main image. The small screen image is optional: a vertical photo (1200 x 1600 px) usually works better on phones. To keep a face or a product in view when the photo is cropped, set a focal point on the image in the image picker.

Image darkening

Darkens the photo from 0% to 80% so light text stays readable.

Height

Small, Medium, Large, or Full screen.

Text position

Bottom left, Bottom center, or Middle center.

Show text below the image on small screens

Keeps the heading readable on busy photos. On by default.

Text and button colors

The color scheme of the text and buttons. Pick a scheme with light text on dark images, and dark text on light images.

Featured collection#

Product cards from one Collection, standing on the floor with their tags. Add a Caption and a Heading, and choose Products to show (2 to 16), Columns on large screens, and Layout on small screens: Swipe (a row customers swipe through) or Grid. Show link to the collection adds a "View all" link. The cards follow the Product cards theme settings.

Rich text#

Text blocks without an image: a caption, a heading, text, and buttons. Set the Alignment to Left or Center.

Custom section#

Build your own layout from blocks. Add Text blocks (with a Text style of Heading, Subheading, or Body text, and an Alignment), and group them in Column or Row blocks. Groups have a Layout direction, an Alignment, and a Padding, and can contain other blocks. The section can also have a Background image.

Custom Liquid#

A section, and a block in Product information, Featured product, and Custom section, where you can paste app snippets or other code. The code isn't checked by the theme. See Custom code before using it.

Product pages#

The product page has two sections: Product information (the product stage, with everything customers need to buy) and Related products. Every element of Product information is a block, so you can reorder, hide, or remove it. To edit the product page in the theme editor, choose Products > Default product from the page menu at the top.

The product stage#

The product page is arranged around the photos. On large screens, it has four zones:

• The stage, in the middle: the product photos on the floor, in front of the light.
• The label, at the left: who the product is and what it costs.
• The buy zone, at the right: options, sizes, and the buy buttons.
• The details, across the page under the stage.

The label and the buy zone stay in view while customers scroll the photos. On small screens, the zones are stacked: the stage, then the label, the buy zone, and the details.

Each block goes to its zone by type. Inside a zone, blocks keep the order you give them in the theme editor.

Buy bar. On screens narrower than 990 px, when the buy zone scrolls out of view, a bar above the bottom bar shows the product name, the price, and the Add to cart button (or Pre-order, or Sold out). It adds the variant the customer selected. The bar appears only when the page has a Buy buttons block.

Product information settings#

Media layout on large screens

Carousel in depth (the default) shows one photo at a time in the middle of the stage, with arrows and a counter. The photos next to it show at the sides; in browsers that support it, they turn away in depth. Two columns shows the photos in a grid, two per row. One column stacks them. On small screens, photos are always in a row customers swipe through, with a counter.

Show only the selected color's media

See Photos by color.

Enable image zoom

See Image zoom.

The shape of the photos comes from Theme settings > Product cards > Image shape. Photos fill the frame, so every photo of the gallery has the same size.

Photo gallery and video#

The gallery shows all the product's media: photos, videos, YouTube and Vimeo videos, and 3D models. When a customer selects a variant that has its own image, that image moves to the first position.

Image zoom#

With Enable image zoom on, each photo has a zoom button. It opens the photos full screen, starting from the one selected. Customers select a photo to magnify it, then move the mouse to look around. On phones, they can scroll through the photos. Zoom works with photos, not with videos or 3D models. When Show only the selected color's media is on, the zoom window shows the same photos as the gallery.

Photos by color#

With Show only the selected color's media on, the gallery shows only the photos of the color the customer selected. The theme reads the alt text of each photo. Write the color name in it, the way it's written in the product's color option, for example "Linen shirt in olive".

• Photos that name the selected color are shown.
• Photos that name another color of the product are hidden.
• Photos that name no color, such as a detail of the fabric or a size chart, are shown for every color.
• If no photo names the selected color, all photos are shown, so the gallery is never empty.

The color name must appear as whole words: "olive" matches "Linen shirt in olive" but not "olives". It works on products with at least two colors, and only on the product page.

To edit alt text, open the product in your admin, select a photo, and choose Add alt text. Alt text also describes the photo to customers who use screen readers, so a short description with the color is useful either way.

Where swatch colors come from#

The theme shows color swatches on product pages (Variant picker block, Show color swatches), on product cards (Theme settings > Product cards), and in filters. For each color, it looks in this order:

1. Swatches set in Shopify. If the product's color option is linked to the standard Color category metafield in your admin, each value can have a swatch color or image. These always come first. Image swatches are useful for patterns like stripes or leopard print.
2. The theme's color list in Theme settings > Color swatches > Color list. The theme looks for the full color name first, then its first word: "Navy stripe" uses the color of "Navy" if there's no line for "Navy stripe". Capital letters don't matter.
3. Neither. The swatch shows a neutral circle with the first letter of the color. Add the color to the list to fix it.

An option is treated as a color when its values have Shopify swatches, or when its name starts with Color or Colour, in the singular or plural (Colors, Colore, Colori, Couleur, Farbe, Farben, Kleur, Färg, Farve, Farge, Väri), or is named Cor or Cores. Other names, like "Shade", show as text buttons unless their values have Shopify swatches.

Product blocks#

These are the blocks you can add to Product information. Blocks marked "once" can be added one time per page. See The product stage for the zone each block goes to.

The price, the lowest price, the variant picker, the stock message, the buy buttons, the buy bar, the SKU, and the pickup information update when a customer selects another variant, and the page address changes so the link opens the same variant.

Inventory status and pre-orders#

The Inventory status block shows one message for the selected variant. It uses your real inventory, and only for variants whose quantity is tracked by Shopify (the Track quantity option on the product). Variants that aren't tracked show no message.

Pre-orders. To take pre-orders for a variant, turn on Track quantity and Continue selling when out of stock in the product's inventory settings. When the quantity is 0 or less, the Add to cart button becomes Pre-order. The order goes through your normal checkout, like any other order. The pre-order note is the same for every product. To change it per product, connect Pre-order note to a product metafield.

The theme never makes up stock numbers or countdowns: every message comes from your inventory.

Fit#

The Fit block shows a scale from "Runs small" through "True to size" to "Runs large". For small and large fits, it adds advice: "We recommend one size up" or "We recommend one size down". You can give each product its fit in two ways:

• With a tag. Add the tag fit:small, fit:true, or fit:large to the product. This needs no setup and works well with bulk editing and CSV imports.
• With a metafield. Create a product metafield (single line text), then connect the block's Fit value setting to it with the connect dynamic source button. The metafield value must be small, true, or large.

If you type a value in Fit value without connecting it, every product shows that fit. Products with no fit value and no fit: tag don't show the block.

Delivery estimate#

The Delivery estimate block shows a date range, for example "Estimated delivery: Mon, Oct 5 - Thu, Oct 8". It adds up:

• Days to prepare the order (0 to 10), and
• Shortest shipping time in days and Longest shipping time in days.

Dates are counted in business days, Monday to Friday, from the day the customer visits. Saturdays and Sundays are skipped. Public holidays and order cutoff times aren't taken into account, so choose numbers that cover them. The estimate is the same for all countries: if delivery times differ a lot between your markets, use the longest times, or describe them in a Collapsible tab instead. There's no countdown timer. Dates are written in the customer's language.

EU price and safety information#

Two blocks help stores that sell in the European Union show the information EU rules ask for. They're not legal advice: check what applies to your products.

Lowest price in 30 days (EU)

Under a discounted price, shows "Lowest price in the last 30 days" followed by a price. Connect Lowest price in the last 30 days to a product metafield that holds that price, written the way customers should read it. If the field is empty, the block shows the compare-at price, so set the compare-at price to the lowest price of the 30 days before the discount. The line appears only on variants with a compare-at price higher than the price, and updates when customers select another variant.

Product safety (EU)

A collapsible tab, under the Heading "Product safety" by default, with the Manufacturer, the Responsible person in the EU, and Safety warnings. Connect each field to a product metafield so every product shows its own details. Empty fields are hidden, and the tab is hidden when all three are empty.

Complementary products#

The Complementary products block shows products that complete the outfit, such as a belt with trousers or socks with sneakers. You choose them for each product in the free Search & Discovery app by Shopify, under Product recommendations. Set how many to show with Products to show (1 to 6). Products without complementary products don't show the block.

Related products#

The Related products section, under the product information, shows similar products chosen automatically by Shopify. Recommendations update automatically over time as your store gets orders. You can also choose them yourself in the Search & Discovery app. Set the Heading, Products to show, and Columns on large screens. This section is available on product pages only.

Local pickup#

The Pickup availability block shows whether the selected variant can be picked up in store, for example "Pickup available at Main Street Store", with a link to see other stores. Set up local pickup in Settings > Shipping and delivery. Without local pickup locations, the block shows nothing.

Gift card products#

On gift card products, the Buy buttons block adds a "Send as a gift" option. Customers can enter the recipient's email, name, a message, and a date to send it on. Quick add isn't available for gift cards, so customers choose the amount on the product page.

Size guides#

All your size charts live in one place: the Size guides section. Each product page picks the right chart automatically, shows it in a window over the page, and can show the sizes in the customer's own system, like UK or US. You don't need an app, a page per chart, or metafields.

Where to find the charts#

In the theme editor sidebar, find the Store-wide content group and select Size guides. This section is loaded on every page, so you can edit it from any page. In the editor, it shows a preview of every chart. Customers don't see this section: they see the charts from the product page.

Add one Size chart block per kind of product, up to 20: for example Women's shoes, Men's shoes, Tops, Jeans. Each chart has:

Chart name

Shown as the title of the window, for example "Size guide: Women's shoes". It's also the name you use in size-guide: tags.

Use for

Product types or tags, separated by commas. See Which chart a product uses.

Table

The chart itself. See Paste a chart from a spreadsheet.

How to measure

Text shown under the chart, such as how to measure a foot or a chest.

Paste a chart from a spreadsheet#

1. In Excel, Google Sheets, or Numbers, select the cells of your chart, including the first row with the column names, and copy them.
2. Click in the Table field and paste. Each row goes on its own line.

The rules for the table:

• First row: the column names, like EU, UK, US, Foot length (cm).
• First column: the sizes exactly as they're written in your products' size option, like 38 or M. This is how the theme connects the chart to the size buttons.
• Measurements: write the unit in brackets in the column name, like Chest (cm) or Waist (in). These columns appear only in the chart.
• Missing values: write - in the cell, for example when a women's size has no men's equivalent.

You can also type a table by hand. Separate the columns with a tab, a semicolon (;), a vertical bar (|), or a comma. The theme uses the first of these it finds in the first row. If your decimal numbers use commas (like 22,9), separate the columns with semicolons. For example, this is the sample chart that comes with the theme, shortened:

EU;UK;US women;US men;Foot length (cm)
36;3;5.5;-;22.9
37;4;6.5;-;23.5
42;8;-;8.5;26.9
43;9;-;9.5;27.5

Which chart a product uses#

The Use for field lists the product types and tags a chart is for, separated by commas, for example Sneakers, Loafers, Boots. Capital letters don't matter, but each word must match the whole product type or tag. For each product, the theme picks the chart like this:

1. A forced chart. If the product has a tag size-guide: followed by a chart name, for example size-guide:Kids shoes, it uses that chart. Use it for the few products that don't follow the rule.
2. The best match. Otherwise, each chart gets 2 points if the product's type is in its Use for list, and 1 point for each of the product's tags in the list. The chart with the most points wins. The product type counts more than a tag, so a tag like "Sale" doesn't take a product to the wrong chart. If two charts have the same points, the one higher in the list wins.
3. No match. The link opens the page chosen in the block's Page setting, if there is one. Otherwise, the product shows no size guide link.

The Size guide block#

The link appears on product pages through the Size guide block in Product information. Place it right under the Variant picker so customers see it next to the sizes. Its settings:

Link label

The text of the link, "Size guide" by default.

Show size system switch

Lets customers see the size buttons in the other columns of the chart. See Size systems.

Remember the customer's size

See Remembered size.

Page

For products without a chart: the page opens in a window over the product. Useful if you already have a size page.

The link only appears on products that have an option other than color, such as a size. Products like bags, with color only, don't show it. When the window opens, the size the customer selected is highlighted in the chart.

Size systems (EU, UK, US)#

With Show size system switch on, a row of buttons appears above the size buttons, for example EU, UK, US women, US men. When a customer selects UK, the size buttons show the UK sizes from the chart, and the selected size reads like "38 · UK 5". The variant added to the cart is always the real one: only the labels change. The customer's choice is remembered for the next products that use the same chart.

A column becomes a size system when:

• its name has no unit in brackets (so Foot length (cm) is not a system), and
• at least half of its rows have a value (not empty and not -).

The first column is always a system. The switch appears when a chart has at least two systems. On products whose sizes aren't in the chart's first column, the switch doesn't appear.

Remembered size#

With Remember the customer's size on, the size a customer selects is saved in their browser. On the next product that uses the same chart, that size is highlighted with the note "Last time you chose size 39." Each chart remembers its own size, so a shoe size and a shirt size don't mix.

The theme doesn't select the size automatically: the customer still chooses. The size is saved only in the customer's browser (local storage). It's never sent to your store or to anyone else, and it isn't linked to their customer account, so it doesn't follow them to another device.

Collections, search, and filters#

Collection pages#

Collection pages use the Product grid section. The products stand in rows, like a wall: each row is a floor, with the tag, name, and price under every photo.

Show collection image and Image layout

The collection image, from your admin, at the top of the page. Image layout is Side by side (the title and description next to the image), Full width (the title on the image, from edge to edge of the screen), or Box (the title on the image, within the page width, with rounded corners). Collections without an image show the title and description on their own.

Vertical text position, Horizontal text position, Image darkening, and Colors on the image

For Full width and Box: where the title sits on the image (Top, Middle, or Bottom; Left, Center, or Right), how much the image is darkened, and the color scheme of the text.

Show collection description

The collection description from your admin, under the title.

Product grid

Products per page (8 to 48), Columns on large screens (2 to 5), Show filters, and Show sorting.

Above the products, customers can switch between larger images and more products per row. Their choice is saved in their browser.

Filters and sorting#

Filters come from the free Search & Discovery app by Shopify. The theme shows the filters you set up there, so you add, remove, and reorder them in the app, not in the theme editor. Common filters for fashion stores are Size, Color, Product type, Price, and Availability.

Customers open the filters with Filter and sort above the products, or with the pill that stays at the bottom of the screen while they scroll. The pill shows how many filters are active and how many products match. The results and both numbers update without reloading the page. Active filters appear above the products so they can be removed one by one. On tablets and phones, the pill sits above the bottom bar. When filters are off, the pill shows sorting only.

• Color filters show swatches when the filter is set to show swatches in the Search & Discovery app, or when the filter is a color option (see Where swatch colors come from). The colors come from the same places as the product swatches.
• Size filters show as buttons when the filter's label is Size (or Taglia, Taille, Größe, Talla, Tamanho, Maat, Storlek, Størrelse, Koko).
• Filter values with no products are shown but can't be selected.

Search results page#

The Search results section shows products, pages, and blog posts. Products stand on the floor like on collection pages, with the same filter pill. Its settings are Results per page, Columns on large screens, and Show filters.

Collections list page#

The page at /collections lists all your collections, using the Collections list page section. Each collection photo stands on the floor, with its number of products.

Cart#

Choose between a cart drawer and a cart page in Theme settings > Cart > Cart type. The cart page is always available at /cart, and uses the Cart section. The cart drawer has a View cart button that opens it.

The cart drawer is a tray: each product stands on its own short floor, next to its details. On the cart page, on screens 750 px wide or more, the products stand side by side like a small wall, with their details underneath. When a product is added and the cart is a drawer, its photo flies into its new line (see Motion).

Both show each product with its photo, options, quantity, unit price, discounts, and subscription details, plus the order total, discounts on the whole order, a note about taxes, the Shop Pay Installments banner when available, the checkout button, and the dynamic checkout buttons (like Shop Pay, Apple Pay, or PayPal) you've turned on. Quantity changes update the cart without reloading the page.

Discount codes are entered at checkout, which is the standard for Shopify stores.

Order note#

With Show order note on, the cart has an Add an order note field. Customers can use it for a gift message, for example. The note appears on the order in your admin.

Free shipping bar#

Enter an amount in Theme settings > Cart > Free shipping from to show a progress bar in the cart: "You're $21.00 away from free shipping", then "Your order ships for free".

• Enter the amount in your store's currency, without symbols, for example 100. Leave the field empty to hide the bar.
• The bar compares the amount with the cart total after discounts.
• For customers who shop in another currency, the amount is converted with Shopify's exchange rate.

Other pages#

Blog and articles#

The blog page uses the Blog posts section, with Articles per page. Each post shows its image, standing on the floor, then its date, title, and an excerpt. Articles use the Article section: Show author adds the author's name next to the date. Tags appear under the article. When comments are turned on for the blog in your admin, customers can post comments, and a message tells them if comments are approved first.

Contact page#

The contact form asks for a name, an email, a phone number, and a message. Messages are sent to your store's email address. To create a contact page:

1. In your admin, go to Online Store > Pages and create a page, for example "Contact".
2. In Theme template, choose contact, and save.

The page shows your page content, then the form. You can also add the Contact form section to any other page.

Gift card page#

When a customer buys a gift card, the recipient gets an email with a link to a gift card page. It shows your logo and the gift card standing on a lit floor, with its value, the expiry date if there is one, and the code with a Copy code button. Under the card are a QR code for use in your physical store, an Add to Apple Wallet button, a button back to your store, and a Print button. The page uses your theme's fonts and colors and needs no setup.

Password page#

While your store is password protected, visitors see the password page. It uses the Password page section: a Background image, a Heading ("Opening soon" by default), your logo, and an email form (Show email signup) so visitors can sign up before you open. The message under the heading and the password itself are set in Online Store > Preferences. To edit this page in the theme editor, choose the password page from the page menu at the top.

Page not found (404)#

When a link is broken, customers see the Page not found section: an empty showroom, with a floor and an empty frame under the light, a search field, and a link back to the home page.

Languages and translations#

The storefront text of the theme (buttons, messages, labels like "Add to cart" or "Only 2 left") is included in English, French, German, Italian, Spanish, and Portuguese (Brazil). The theme editor is also available in these languages.

Change the words on your storefront#

To change a text the theme shows, for example "Add to cart" to "Add to bag":

1. In Online Store > Themes, open the actions menu (...) of Kroma and select Edit default theme content.
2. Search for the text, change it, and save.

This doesn't need any code, and your changes are kept when you update the theme.

Sell in more languages#

1. Add the languages in Settings > Languages and assign them to your markets.
2. Translate your content (products, collections, pages, and the texts you typed in the theme editor, including size chart names and notes) with Shopify's free Translate & Adapt app.
3. Keep Show language selector on in the Header or Footer, so customers can switch.

For languages that aren't included, the Translate & Adapt app can translate the theme text too.

Theme updates#

When a new version of Kroma is available, Shopify shows it in Online Store > Themes. Adding the update creates a new copy of the theme with the new version. The settings and content you set in the theme editor are carried over. Changes made directly in the theme code are not, so they need to be added again. Preview the updated copy, then publish it when you're ready.

Frequently asked questions#

Why doesn't the size guide link appear on my product?#

Check these, in order:

1. The product page has a Size guide block in Product information.
2. The product has an option other than color, such as Size. Products with color only don't show the link.
3. A chart matches the product: its Use for list contains the product's exact type or one of its tags, or the product has a size-guide: tag with the exact chart name. See Which chart a product uses.
4. If no chart matches, the block's Page setting has a page. Otherwise there's nothing to link to.

How do I use a different size chart for one product?#

Add the tag size-guide: followed by the chart name to that product, for example size-guide:Kids shoes. The name must match the Chart name, but capital letters don't matter. This tag always wins over the Use for rules.

The UK and US buttons don't appear above the sizes. Why?#

The switch needs Show size system switch on in the Size guide block, and a chart with at least two size columns. A column counts as a size system only if its name has no unit in brackets and at least half of its rows have a value. Also check that the first column of the chart lists the sizes exactly as they're written in the product's size option: if the product's sizes are "EU 38" and the chart says "38", they don't match.

My color swatch shows a letter instead of a color. How do I fix it?#

The theme didn't find that color. Add a line with the color name and a hex code to Theme settings > Color swatches > Color list, for example Pistachio: #B8C99A, or set a swatch for that value in Shopify. The name must be written like the color in your product, but capital letters don't matter. See Where swatch colors come from.

How do I assign a photo to each color?#

In your admin, open the product and select a variant, then choose its image. Do this for one variant per color (for example, the first size of each color). The theme then shows that photo first on the product page when the color is selected, and on product cards when a customer points at the swatch. To show all the photos of a color and hide the others, use Photos by color.

I turned on "Show only the selected color's media", but all photos still show.#

The theme reads the color name in each photo's alt text. If no photo's alt text contains the selected color, all photos are shown so the gallery is never empty. Add alt text such as "Leather loafer in cognac" to each photo, using the same color name as the product's color option. The product also needs at least two colors, and its color option must be recognized as a color (see Where swatch colors come from).

My product photos are cropped. How do I show more of them?#

Kroma fills every frame with the photo, so a photo with a different shape from the frame is trimmed at the edges. In Theme settings > Product cards, choose the Image shape closest to your photos: for example, square photos of shoes look best with Square (1:1). The shape applies to product cards, product pages, and Product spotlight. On product cards, set a focal point on the photo in your admin to keep the important part in view. For the best result, shoot all photos in the same shape.

Where does the "N° 012" on product cards come from?#

It's the product's place in the list on that page, not the SKU: the first product of a collection is N° 001. The word after it is the product type from your admin. To hide the tag, turn off Show catalog number and category in Theme settings > Product cards. See Product cards.

My Slideshow in depth shows a regular slideshow. Why?#

The slides move in depth only when Motion is In depth and the section has at least two slides. Customers also see the regular slideshow on devices without 3D graphics support (WebGL 2), and when they've turned on reduced motion in their device settings. In every case, the slides, text, and buttons are the same. See Slideshow in depth.

How do I sell a product on pre-order?#

In the product's inventory settings, turn on Track quantity and Continue selling when out of stock. When the variant's quantity is 0 or less, the button becomes Pre-order and the Inventory status block shows "Available to pre-order" with your Pre-order note. When the stock is back above 0, the product goes back to Add to cart automatically. See Inventory status and pre-orders.

Why doesn't "Only 2 left" appear?#

The message appears only for variants whose quantity is tracked by Shopify, and only when the quantity is between 1 and the Low stock message from number of the Inventory status block.

How do I show that a shoe runs small?#

Add the tag fit:small to the product, and make sure the product page has a Fit block. Use fit:true for true to size and fit:large for products that run large. See Fit.

How do I add size and color filters?#

Install the free Search & Discovery app by Shopify, open Filters, and add filters for your Size and Color options. Name the size filter "Size" to show it as buttons, and set the color filter to show swatches. Make sure Show filters is on in the Product grid section. Customers then find the filters in the pill at the bottom of the screen. See Filters and sorting.

Does the free shipping bar give customers free shipping?#

No. It only shows how much is missing. Create the free shipping rate in Settings > Shipping and delivery, with a minimum order price equal to the amount in Free shipping from. See Free shipping bar.

Does the delivery estimate know about holidays?#

No. It skips Saturdays and Sundays, but not public holidays, and it doesn't use an order cutoff time. During holiday periods, increase Days to prepare the order, or hide the block.

The "Complete the look" block doesn't show anything.#

The block shows the complementary products you chose for that product in the Search & Discovery app. Open the app, go to Product recommendations, find the product, and add complementary products. Products without complementary products hide the block.

My menu image doesn't show.#

Check that Main menu item matches the menu item exactly (for example Women, not Woman), and that this menu item has three levels of links. In dropdowns, menu images only appear in the wide dropdown on large screens. In the full-page index, a menu item that links to a collection or a product shows that image instead. See Menu images.

The country selector doesn't appear.#

The country/region selector shows only when you sell in more than one country or region, and the language selector only when your store has more than one published language. Add them in Settings > Markets and Settings > Languages. Also check that the selectors are turned on in the Header or Footer. The header shows them at the bottom of the full-page index, so on large screens, while the menu fits in the header, they appear in the footer only (see Country/region and language selectors).

Does the remembered size collect personal data?#

The size is saved only in the customer's own browser (local storage), together with the size system they chose. It's never sent to your store, to us, or to anyone else. If you prefer not to use browser storage, turn off Remember the customer's size. The grid layout choice on collection pages is saved the same way.

Can customers enter a discount code in the cart?#

Customers enter discount codes at checkout. The cart shows automatic discounts and the discounts already applied, on each product and on the whole order.

Does Kroma work with apps like product reviews?#

Yes. Apps that use app blocks can be added to the Product information and Featured product sections from Add block, and app embeds are turned on under App embeds in the theme editor. If an app's content doesn't look right, contact the app developer first: they know how their app works. See also our support policy.

Custom code#

Almost everything in Kroma can be set up in the theme editor, without code. If you need more, the Custom Liquid section and block let you add small pieces of code or app snippets without editing the theme files.

Example: show a metafield on the product page#

This example shows a text from a product metafield, such as the model's height and size, under the price. Most of the time you can do this without code by connecting a Text block to the metafield: use the code only if you need something the block can't do. The steps are provided as an example and aren't supported.

1. In your admin, go to Settings > Custom data > Products and create a single line text metafield with the namespace and key custom.model_info. Fill it in on your products.
2. Duplicate your theme, and open the copy in the theme editor.
3. On the product page, add a Custom Liquid block to Product information and move it under Price.
4. In Liquid code, paste:

   {% if product.metafields.custom.model_info != blank %}
     <p>{{ product.metafields.custom.model_info | escape }}</p>
   {% endif %}

5. Save, check a few products, and publish the copy when you're happy with it.

Support policy#

Every Kroma license includes free support from the team that built the theme. To contact us, use the support form. Please include your store URL (for example yourstore.myshopify.com), a description of the problem, the page where it happens, and a screenshot if you can. You'll receive an automatic confirmation by email as soon as you send the form.

Response time#

We reply within 2 business days, Monday to Friday, excluding public holidays. Most questions are answered sooner. Problems that stop customers from buying are handled first.

What support includes#

• Answers to questions about the theme's features and settings.
• Help finding the right setting to get the result you want with the theme editor.
• Fixing bugs in the theme. Fixes are released in theme updates, available to every store that uses Kroma.

What support doesn't include#

• Customizations: design changes, new features, or changes to the theme code.
• Problems caused by code edits, including code added with Custom Liquid.
• Installing, setting up, or fixing third-party apps and their integration with the theme. Please contact the app developer.
• Moving your settings and custom code to a new theme version.
• Setting up your store: products, shipping, payments, taxes, markets, or domains. Shopify Support can help with these at help.shopify.com.

For customizations, we recommend hiring a developer from the Shopify Partner Directory.