Caliper 2 designs
in one theme

Everything in Caliper is changed in the theme editor, with no code. Open it from “Online Store” with “Edit theme”.

1. 1“Search field”
   Type part of the section's name.
2. 2“Section list”
   Caliper's sections, named as in this guide; a section with more than one starting point shows under more than one name.
3. 3“Preview”
   Shows the section before you add it.

1. 1“Sections”
   The sections of the page you have open.
2. 2“Theme settings”
   Settings for the whole store: logo, colors, fonts, buttons, cards, sizes and more.
3. 3“App embeds”
   Turns on apps that show on every page, such as a chat bubble.
4. 4“Header”
   The announcement bar and the header, shared by the store's pages.
5. 5“Template”
   This page's own sections, in the order they show.
6. 6“Add section”
   Adds a new section to the page.
7. 7“Footer”
   The footer, shared by the store's pages.
8. 8“Drag handle and eye”
   They appear when you point at a section's name: drag the handle to move it, click the eye to hide it.

1. 1“Section name”
   The section whose settings are open.
2. 2“Setting name”
   The words the guide quotes, so search for them.
3. 3“The small line under a setting”
   A short note from the theme; read it before changing.
4. 4“Blocks”
   The parts of the section, such as messages or questions: click one to open it, drag it to reorder.
5. 5“Add Message”
   Adds a new block inside the section; the button carries the block's name.
6. 6“Remove section”
   Deletes the section from the page. To hide it only, use the eye.

1. 1“Exit”
   Takes you back to “Online Store” in the Shopify admin.
2. 2“Home page”
   Pick the page to edit here: product, collection, cart and the rest.
3. 3“Enable mobile preview”
   Shows the page as on a phone; click it again for desktop.
4. 4“Undo arrow”
   Takes back your last change.
5. 5“Save”
   Saves your changes. On the published theme, visitors see them right away.
6. 6“The three dots”
   Holds “View documentation”, which opens this guide.

Most picture spots fill their space and crop the overflow at the edges, so keep what matters in the middle. Sizes are in pixels, width then height; larger in the same shape works too. Set a “Focal point” on a picture whose subject is off center.

• “Brand and favicon”
  • “Favicon image”: 64 x 64 (1:1) A square PNG, at least 32 x 32.
• “Header”
  • “Logo”: 600 x 200 A PNG or WebP on a transparent background, at least 600 wide (twice its largest width).
  • “Logo over the picture”: 600 x 200 The main logo's proportions in a light color, on a transparent background.
  • “Icon image”: 72 x 72 (1:1) On a transparent background; it shows at about 22 px.
  • “Card image”: 456 x 608 (3:4)
• “Split counter slideshow”
  • “Lifestyle picture”: 1200 x 1500 (4:5)
  • “Product picture”: 1440 x 1080 (4:3) The product centered on a plain background.
• “Icons with text”
  • “Your own icon”: 136 x 136 (1:1) SVG or PNG on a transparent background; it shows at 34 px.
• “Collection list”
  • “Image”: 900 x 1200 (3:4) Subject centered: Circles and Tiles crop from the middle.
  • “Desktop image”: 1320 x 660 Bento tiles only: the sixth tile is 2:1, the first tall, about 1:2 (660 x 1360).
• “3D product”
  • “Picture while loading”: 1500 x 1125 (4:3) The product centered on white.
  • “Picture on its chip”: 168 x 168 (1:1) Shown in a 56 px circle.
• “Scale story”
  • “Image”: 1400 x 1400 (1:1) The pinned area is close to square and the picture is cropped to it.
• “Moving text”
  • “Picture”: 256 x 256 (1:1) Subject centered; it shows very small (30 to 128 px wide).
• “Anatomy”
  • “Image”: 1360 x 1020 (4:3) The area takes your picture's shape; it is cropped only when taller than 78% of the window.
• “Lens builder”
  • “Picture when a frame has none”: 1296 x 972 (4:3)
• “Card deck”
  • “Picture”: 1600 x 1200 (4:3) Its edges are cropped to the area.
  • “Picture on phones”: 1080 x 810 (4:3) Full screen width under 768 px.
• “Lookbook slideshow”
  • “Image”: 1200 x 1500 (4:5) In the “Image shape” you picked (4:5 by default), so nothing is cropped.
• “Moments”
  • “Image”: 900 x 1200 (3:4) Cropped to the “Image shape”: 3:4, 4:5 (900 x 1125), 2:3 (900 x 1350) or 9:16 (900 x 1600).
  • “Picture on the product chip”: 252 x 252 (1:1) In a 58 px circle, enlarged 25%, so let the product fill the frame.
• “Newsletter banner”
  • “Picture”: 1400 x 1000 With “Picture beside the form” close to 6:5, and 4:3 on phones.
  • “Picture on phones”: 1080 x 810 (4:3) Full screen width.
• “Shop by age”
  • “Image”: 360 x 360 (1:1)
• “Checklist”
  • “Image”: 1120 x 1400 (4:5)
• “Banner grid”
  • “Image”: 1200 x 1500 4:5 for “Three in a row”; 1400 x 1120 (5:4) for “Two in a row”.
  • “Phone image”: 1080 x 1350 (4:5) Full screen width, in the banner's shape.
• “Product information”
  • 1600 x 1600 Gallery pictures come from the product's own media: at least 1600 on the long side; the shape follows “Media shape”.
• “Collection banner”
  • “Picture”: 2400 x 800 (3:1)
  • “Picture on phones”: 1080 x 810 (4:3)
• “Collection products”
  • “Picture”: 1200 x 1200 (1:1) Roughly.
• “Image with text”
  • “Picture”: 1200 x 1500 (4:5) Or the proportion you choose in “Image shape”.
  • “Second picture”: 600 x 750 (4:5) 46% of the main picture's width, in a frame of the page color.
• “Brand story”
  • “Main picture”: 1200 x 1500 (4:5) In an arch; full width on phones.
  • “Second picture”: 700 x 700 (1:1) Its frame in the section's background color crops the edge a little.
• “Page not found”
  • “Picture”: 1200 x 1500 (4:5) Or square or 3:4, to match “Image shape”.
• “Password page”
  • “Picture”: 2000 x 1500 Roughly 4:3, subject centered.
  • “Logo”: 600 x 240 Any proportion, best a PNG on a transparent background.
• “Menu drawer”
  • “Image”: 510 x 680 (3:4)
• “Welcome window”
  • “Image”: 900 x 900 (1:1) Subject centered.
• “Footer”
  • “Logo”: 600 x 200 A PNG or WebP on a transparent background, at least 600 wide.

Caliper is a Shopify theme in Arabic and English with two designs: Caliper for eyewear and Inchling for children. Its idea: every product tells the shopper whether it fits, with a size scale on every card, a “Find my size” button in the header, and tools such as the frame size finder, the lens builder and the age path.

Comes with the design: the pages with their sections, the header and footer, colors, fonts, and the theme's own words in Arabic and English.

Does not come: products, collections, pictures, posts, pages, color swatches, translations of your words, and menus (Shopify creates only “Main menu” and “Footer menu”). Add them in the order of “Your first 12 steps”.

In this order:

1. Duplicate the theme as a backup: “Choosing and changing the design”.
2. Pick your main language and add Arabic: “Add Arabic or make it the default”.
3. Upload the logo in “Header” and the favicon in “Brand and favicon”.
4. Check the colors and fonts: “Colors”, “Typography”.
5. Add your products, with pictures that all share one shape: “Picture sizes”.
6. Tag each product with its sizes: “Set up sizes: the scale, tags and options”, “Frame numbers: lens, bridge and temple”.
7. Create your collections in “Products” > “Collections”, each with a picture: “Collection list”.
8. Create the menus: “The menus your design expects”.
9. Fill the home page sections in the order of your design's map: “Caliper design”, “Inchling design”.
10. Set up the product page: “Product information”, and for glasses the lens choice: “Lens choice on the frame page”.
11. Add your contact details, social links and policies: “Social media”, “Footer”.
12. Turn on filters: “Collection filters”. Check every page on a phone, click “Save”, then “Publish”.

• “Sections”: the parts of a page, stacked, such as “Split counter slideshow”.
• “Color scheme”: background, text and button colors under one name, edited in “Colors”.
• “Drawer”: a panel that slides in from the side, such as the cart and the phone menu.
• “Scale”: a row of short segments showing a product's sizes, with the ball on the shopper's size.
• “The ball”: the round dot in the accent color that marks the saved size and more.
• “Age bands”: children's ages (newborn, 3-6 months...) instead of S, M and L.
• “Lens, bridge and temple”: the three numbers printed inside a frame's arm, in millimeters.
• “Add-on product”: an ordinary product added with the frame, such as a lens coating.
• “Variants”: each choice of a product with its own price and stock, such as a color and a size.
• “Tags”: words on a product; the theme reads its sizes from them.
• “Focal point”: the spot you mark on a picture so it stays in view when cropped.
• “Theme style”: one of the two designs; it changes the look and the size scale, not the sections.

Write to us at [email protected]; we reply within two business days.

Support covers: Caliper's settings and sections, and anything in the theme that does not work as this guide says.

It does not cover: code you add or change, or other apps and their settings.

Each design has its own Theme Store page. Pick the design there before you add the theme: its pages with their sections, header and footer arrive only with the design you pick.

Later, “Theme style” applies the other design's settings: colors, fonts, heading sizes, the card picture shape, shadows, and the size scale (letters in Caliper, age bands in Inchling) with its tag start.

1. 1“Theme style”
   The two designs: Caliper and Inchling.

For prescription glasses and sunglasses: frames in sizes, and lenses added at their prices. The home page opens with a split slideshow and carries the “Frame size finder” and the “Lens builder”, in orange and sand, with Josefin Sans headings.

1. 1“Announcement bar”
2. 2“Header”
3. 3“Split counter slideshow”
4. 4“Icons with text”
5. 5“Collection list”
6. 6“Product tabs”
7. 7“3D product”
8. 8“Scale story”
9. 9“Frame size finder”
10. 10“Moving text”
11. 11“Featured product”
12. 12“Anatomy”
13. 13“Lens builder”
14. 14“Card deck”
15. 15“Lookbook slideshow”
16. 16“Blog posts”
17. 17“Moments”
18. 18“FAQ”
19. 19“Newsletter banner”
20. 20“Footer”

For children's clothes and things: the size is the child's age, so the scale is a row of age bands and the words say “Fits your child”. The home page carries “Shop by age” and the newborn “Checklist”, in blue and warm yellow, with Grandstander headings.

1. 1“Announcement bar”
2. 2“Header”
3. 3“Split counter slideshow”
4. 4“Icons with text”
5. 5“Collection list”
6. 6“Product tabs”
7. 7“3D product”
8. 8“Scale story”
9. 9“Shop by age”
10. 10“Moving text”
11. 11“Featured product”
12. 12“Anatomy”
13. 13“Checklist”
14. 14“Card deck”
15. 15“Lookbook slideshow”
16. 16“Blog posts”
17. 17“Moments”
18. 18“FAQ”
19. 19“Newsletter banner”
20. 20“Footer”

Arabic is added and published in “Settings” > “Languages”; your Arabic pages then open at your store's address followed by /ar.

1. 1“Add language”
   Opens the list of languages to pick Arabic from.
2. 2“Arabic”
   Arabic's row; the menu beside it holds publishing and the domains.
3. 3“Published”
   Shows beside Arabic once it is published; until then it is added but hidden from shoppers.
4. 4“Change default”
   In the menu of your current default language's row; it makes Arabic the store's default language, the one the editor saves your words in.

All of Caliper's own words, such as buttons and the cart and search messages, come in Arabic, and an Arabic page turns right to left as a whole: header, slides, cards, cart and the size scale. There is nothing to set up.

What you write is not translated on its own: products, “Collections”, menus, pages, and every heading and text in sections. Translate it in Shopify's free “Translate & Adapt” app, whose automatic translation supports Arabic; if it is not installed, its card is in “Settings” > “Languages”.

When your Shopify account language is Arabic, the editor shows Caliper's settings by their Arabic names, as in this guide's Arabic pictures. It changes what you see, not your store.

Shopify's font library has no Arabic letters, so the fonts you pick in “Typography” show on English text and digits, while Arabic letters take the shopper's device font and vary a little by device. For Arabic you pick the “Arabic headings” style (Modern or Naskh) and set their size, line spacing and the “Arabic body text size”: “Typography”.

On Arabic pages these settings do nothing: “Bold body weight”, “Body text size”, “Heading case”, “Label case”, “Heading letter spacing”, “Label letter spacing”, and “Text case” in “Buttons”.

The language switch appears once you have more than one published language, and the country and currency picker once your store sells in more than one country through “Markets”. They sit in “Menu drawer” and “Footer”, each of which can hide them with “Show the language switch” and “Show the country and currency picker”.

Your store name as shoppers read it, and the browser tab icon. The logo picture itself goes in “Header” and “Footer”.

Every color lives in a color scheme (background, text and buttons) that sections pick from. Here you also set the page and drawer schemes, badge colors over pictures and the backdrop behind drawers.

1. 1“Schemes”
   The schemes sections pick from. The theme comes with seven and you can add more; editing a scheme changes every section that uses it.
2. 2“Page color scheme”
   The page's own scheme: its background and text. Sale and sold out badges over pictures also take their text color from it.
3. 3“Drawer color scheme”
   The cart, search, menu and quick add drawers, the quick view, the size guide, collection filters and the product page's drawers.
4. 4“Badge and button background”
   Behind badges, the quick add and quick view buttons and small panels on pictures. Sale and sold out badge text comes from the page scheme.
5. 5“Badge and button text”
   Text and icons on badges and buttons over pictures, except the sale and sold out badges.
6. 6“Backdrop behind drawers”
   The layer that covers the page behind drawers and the welcome window.
7. 7“Backdrop opacity”
   How solid that layer is; 0 makes it fully clear.

1. 1“Background”
   The background of sections that use the scheme; the scheme chosen as “Page color scheme” also colors the page itself.
2. 2“Background gradient”
   A gradient that replaces the background color on sections and drawers in this scheme. The page, and sections in the page color scheme, keep the solid color.
3. 3“Panels and image boxes”
   The color behind images while they load, behind fields and soft panels, and around a product picture with “Show the whole image”.
4. 4“Text”
   The color of text, links and icons.
5. 5“Secondary text”
   Lighter text: descriptions, small labels, the line under a card title and the price before a discount.
6. 6“Lines and borders”
   Divider lines and the borders of fields, cards and panels.
7. 7“Primary button”
   The primary button's fill and border, such as “Add to cart”.

1. 1“Primary button text”
   The primary button's text; it must read clearly on the button.
2. 2“Primary button on hover”
   The primary button under the pointer or on keyboard focus.
3. 3“Secondary button”
   The text and border of the outlined secondary button; on hover it fills with this color and its text takes the background color.
4. 4“Accent”
   The theme's ball and small marks: the “In your size” dot on the scale, the picture dots on a card and the back to top ball.
5. 5“Sale badges and savings”
   The saving chip beside a price, saving amounts, stock notes, cart discounts and field errors. Badges over card pictures take theirs from the page scheme.
6. 6“Sale price”
   The reduced price. On a band where the sale color is hard to read, use the text color.

Fonts, heading sizes and letter case. Shopify's font library has no Arabic letters, so Arabic always uses the shopper's device font and has its own settings under “Arabic text”.

1. 1“Heading font”
   Headings in Latin letters and digits. On Arabic pages it shows only on Latin words and digits inside headings.
2. 2“Body font”
   Body text, buttons and labels in Latin letters; on Arabic pages, only Latin words and digits.
3. 3“Readout font”
   Readouts: the size letters on a card's scale, measurements and small counters such as 01.
4. 4“Bold body weight”
   The weight of bold words, prices and buttons on English pages; a font without it uses its nearest weight. Arabic pages always use 700.
5. 5“Body text size”
   Body text size on English pages; Arabic pages use “Arabic body text size”.
6. 6“Heading letter spacing”
   Letter spacing of Latin headings, in thousandths of the font size: negative tightens, positive spreads. The small heading and Arabic pages are not affected.
7. 7“Large heading on desktop”
   The large heading (page titles, big banners) on desktop; between phone and desktop it grows smoothly.

1. 1“Large heading on phones”
   The large heading on phones.
2. 2“Medium heading on desktop”
   The medium heading, the sections' title, on desktop.
3. 3“Medium heading on phones”
   The medium heading on phones.
4. 4“Small heading on desktop”
   The small heading, for sub-headings inside sections, on desktop.
5. 5“Small heading on phones”
   The small heading on phones.
6. 6“Arabic headings”
   The look of Arabic headings in the shopper's device font: Modern is a plain sans, Naskh the traditional script. Body text stays Modern.

1. 1“Arabic heading size”
   Scales every Arabic heading against the heading sizes; 100% keeps them, so set the Latin sizes first.
2. 2“Arabic heading line spacing”
   Extra space between lines of Arabic headings, in hundredths of the font size; tall Naskh fonts need more.
3. 3“Arabic body text size”
   Body text size on Arabic pages, in place of “Body text size”.
4. 4“Heading case”
   “Uppercase” sets English headings in capitals; “As written” leaves them. No effect on Arabic pages.
5. 5“Label case”
   Small labels above headings and menu titles: “Uppercase” or “As written”. No effect on Arabic pages.
6. 6“Label letter spacing”
   Letter spacing of labels, in hundredths of the font size. No effect on Arabic pages.

The page's general measures: maximum width, margins, the space between sections, corner rounding and shadow.

1. 1“Page width”
   The widest the content gets; on a narrower screen it fills the width minus the margins.
2. 2“Side margins on desktop”
   The gap between the screen edge and the content on desktop. Tablets use up to 32 and phones 16.
3. 3“Space between columns”
   The space between columns inside sections; at most 16 on phones.
4. 4“Large spacing on desktop”
   Above and below a section whose “Section spacing” is “Large”, on desktop; it scales between phone and desktop.
5. 5“Large spacing on phones”
   The same “Large” space on phones.
6. 6“Medium spacing on desktop”
   Above and below a section set to “Medium”, on desktop.

1. 1“Medium spacing on phones”
   The same “Medium” space on phones.
2. 2“Small spacing on desktop”
   Above and below a section set to “Small”, on desktop.
3. 3“Small spacing on phones”
   The same “Small” space on phones.
4. 4“Corner radius”
   Rounds small things: the quantity box, country and currency selectors, form messages and small thumbnails. Badges, buttons, fields and cards have their own.
5. 5“Panel corner radius”
   Rounds dropdowns and small panels: the header's big menu, product page panels, the cart summary and the size chart.
6. 6“Image corner radius”
   Rounds pictures in sections: blog, banners, collection lists and Image with text. Card pictures use “Image corner radius” in “Product cards”.

1. 1“Large image corner radius”
   Rounds large editorial pictures (article picture, collection banner, moments, 3D product) and the “Rounded” shape.
2. 2“Editorial image shape”
   The picture's shape when “Editorial shape (Theme settings)” is chosen in “Picture style” of “Image with text” or “Picture shape” of “Brand story”: Arch has a round top, Pill is a full oval.
3. 3“Shadow opacity”
   How dense the shadow of drawers, dropdowns and floating panels is; 0 removes it. Its color is the page's text color.
4. 4“Shadow blur”
   Softness: the higher, the softer and wider the edge.
5. 5“Shadow offset”
   How far the shadow drops; 0 spreads it evenly around.
6. 6“Shadow spread”
   Negative values shrink the shadow inside the element; 0 keeps its size.

Buttons across the theme: rounding, height, letter case and the ends of chips and tabs. Their colors come from the section's color scheme: “Colors”.

Text fields (search, newsletter, contact form, order note) and the color swatches on products.

The card repeated in collections, search and slideshows. These settings apply to every card, except “Style”, which a section can override.

1. 1“Style”
2. 2“Image shape”
3. 3“Image fit”
   “Fill the box” crops the picture to fill the card; “Show the whole image” shows all of it, with edges in the “Picture field” or “Panels and image boxes” color.
4. 4“Picture field”
   A soft color behind product pictures shot on white (cards, product page, cart, drawers, search): the white takes this color. Leave it empty for pictures with their own background.
5. 5“Hover effect”
   The effect when the pointer is over a card (mouse devices only):
   • Pictures follow the pointer: the first 4 pictures by pointer position, with dots.
   • Second image, slide: the first slides toward the reading start as the second takes its place.
   • Second image, circle: the second opens as a circle from where the pointer came in.
   • Second image, wipe: the second is uncovered from the reading start.
   • Second image, fade: the second fades in.
   • Zoom: the picture slowly grows.
6. 6“Text alignment”
7. 7“Image corner radius”
   Rounds the card picture; the “Bordered” style adds 6 to its outer frame.

1. 1“Space between cards”
   The space between cards in grids and slideshows; at most 12 on phones.
2. 2“Show quick add”
3. 3“Show quick view”
   An eye on the picture opens the product in a window with its pictures, options and Add to cart, on mouse devices only.
4. 4“Color swatches shown”
5. 5“Line under the title”
6. 6“Show product rating”
   A star with the rating and review count under the price. It needs a reviews app that fills the standard rating metafield; without one nothing shows.
7. 7“Show Compare button”
   A “Compare” box under each card. Add a “Compare specs” section with “Show the shopper's own list” on, and a “Compare” action in “Header” linking to it.

Small labels on product cards and the product page: sold out, sale, new, and any words from a product tag. A product shows two at most, and only from its real data.

1. 1“Position on images”
   The card picture corner where badges sit: “Top, start” is where reading begins (left in English) and “Top, end” the other side. Product page badges are not affected.
2. 2“Corner radius”
   0 gives square corners; higher values round them more. The same rounding applies to the “Save” chip beside the price and to discount code chips in the cart.
3. 3“Badge colors”
   “Over-image colors”: from “Badge and button background” and “Badge and button text” in “Colors”. “Page colors”: the page scheme's “Panels and image boxes” and text, better on a dark page. Either way, sale and sold out badge text uses the page scheme's sale and secondary text colors.
4. 4“Sale badge”
   “Amount saved” and “Percent saved” print Save and the amount or percentage, “Sale” the word only, and “None” removes it. It shows when the “Compare-at” price is above the price; a product whose variants differ in price always says Sale.
5. 5“Show sold out badge”
   A product with nothing left to buy shows “Sold out”.
6. 6“New badge tag”
   A product with this tag shows “New”, whatever the letter case; empty turns the New badge off.
7. 7“Badges from tags”
   A tag that starts with badge: prints a badge with the words after the colon, as typed, such as badge:Limited.

One setting for how every price looks: with or without the currency code.

Links to your accounts. Only the ones you fill in show, each opening in a new tab.

1. 1“Instagram”
2. 2“TikTok”
3. 3“Facebook”
   The full link, such as https://facebook.com/….
4. 4“X”
   The full link, such as https://x.com/….
5. 5“YouTube”
   The channel link, such as https://youtube.com/@….

1. 1“Pinterest”
   The full link, such as https://pinterest.com/….
2. 2“Snapchat”
   The full link, such as https://snapchat.com/add/….
3. 3“Threads”
   The full link, such as https://threads.net/@….
4. 4“LinkedIn”
   The company page link, such as https://linkedin.com/company/….
5. 5“WhatsApp”
   https://wa.me/ followed by your number with the country code, no spaces.

A round arrow button that takes shoppers back to the top. It appears once they scroll a little, with a ring that shows how far they have read.

Page motion: sections rising in as you scroll, slideshows moving on their own, how windows open, and hover effects. Visitors whose device asks for less motion see no movement and no autoplay.

Color swatches (the small circles) show on the card and the product page only when every value of the color option has a swatch in Shopify and there are at least two colors. Otherwise the product page shows the values as buttons with their names. The theme never guesses a color from its name.

The group that runs the size system across the store: while it is on, every card, product page and cart line tells the shopper whether the product comes in their size, and the header gets a “My size” button. The whole idea is in “The idea: every product says whether it fits”, the setup step by step in “Set up sizes: the scale, tags and options”.

The shopper types the three numbers printed inside their glasses' arm (lens, bridge, temple) or picks a face width, and sees their size, the frame drawn to scale and the frames in that size. The size is saved as their “My size”, which the rest of the store answers: “The idea: every product says whether it fits”.

Your size table is the “Size” blocks you add; each frame is matched to a size by a tag such as size-m.

1. 1“Small label above”
   A small line above the heading; empty hides it.
2. 2“Heading”
   The heading; simple formatting such as bold works. Empty: no heading.
3. 3“Text”
   A line under the heading telling the shopper what to do; empty hides it.
4. 4“Lens width”
   The lens width the finder starts with, from 38 to 62 mm; with the bridge it sets the size shown first.
5. 5“Bridge”
   The bridge the finder starts with, from 12 to 26 mm; added to the lens, it picks the first size from your table.
6. 6“Temple length”
   The starting temple length, from 120 to 160 mm; it changes the drawing and numbers only, not the size.
7. 7“Collection”
   Where the rail takes its frames (only those with a size tag), and the link of any size with no “Size collection”. The rail reads its first 50 products; empty: the store's first 50.

1. 1“Size tag prefix”
   The start of the tag before the size's key: with size- the tag for M is size-m; empty means size-. Keep it equal to “Size tags start with” in “Fit and sizes”.
2. 2“Frames first”
   Frames you pick (up to 12) lead the rail in your order, then the rest of the collection. A frame with no size tag is skipped.
3. 3“Frames in the rail”
   The most frames in each size's rail, from 4 to 24.
4. 4“Product card style”
   The card style in the rail. “As in Theme settings” follows “Style” in “Product cards”, where the other choices are described.
5. 5“Anchor”
   An id so a link ending in #frame-size-finder (or what you type) jumps to the section. Latin letters, digits and hyphens; empty: no id.
6. 6“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
7. 7“Section spacing”
   The space above and below the section: “None” joins it to its neighbors; “Small”, “Medium” and “Large” add more.

1. 1“Letter”
   The letter in the big circle and on the size's button, such as M; empty uses the “Key”.
2. 2“Name”
   The size's name in the answer, such as Medium; empty shows the letter only.
3. 3“Key”
   The part after the prefix in a frame's tag: m with size- means size-m. It is also what is saved as “My size”, so match a size in “Sizes, in order” in “Fit and sizes”. No spaces, never in two sizes.
4. 4“Size collection”
   This size's collection (best a smart one on the size tag): the “Shop size” link and the true count come from it. Empty: the link filters the rail's collection by the tag, counted over its first 50 products.
5. 5“From (mm)”
   The smallest lens plus bridge total, in millimeters, in this size; empty: no lower limit. A total that fits two sizes goes to the first in the list.
6. 6“To (mm)”
   The largest lens plus bridge total in this size; empty: no upper limit. A total in a gap between two sizes gets the nearest size.
7. 7“Rule shown”
   A line under the size's name in the answer, such as lens and bridge adding up to 69 to 71 mm. You type it, so keep it matching “From (mm)” and “To (mm)”.

1. 1“Fit note”
   A short sentence on the face this size suits, under the rule in the answer.
2. 2“Face width”
   The face width this size suits, such as Narrow or Average, as a choice under “By face width”. Empty leaves the size out of it; if every size is empty, the face choice disappears.
3. 3“Face hint”
   A small line under the face width name describing that face; it shows only with “Face width” filled in.
4. 4“Lens drawn”
   The lens width drawn when the shopper picks this size by face width, from 38 to 62 mm; typed numbers draw themselves.
5. 5“Bridge drawn”
   The bridge drawn for a face width pick, from 12 to 26 mm.
6. 6“Temple drawn”
   The temple drawn for a face width pick, from 120 to 160 mm.

The shopper picks a frame, its color and size, then the lenses step by step (use, coating, thickness), each option at its real price with the total beside it, and one click puts the frame and the lenses in the cart.

Each step is a “Step” block followed by its “Option” blocks; the first option of a step starts chosen. An option with an “Add-on product” takes that product's price; one without reads “Included”.

1. 1“Small label above”
   A small line above the heading. Empty hides it.
2. 2“Heading”
3. 3“Text”
   A line under the heading. Empty hides it.
4. 4“Frames”
5. 5“Frame picture”
6. 6“Picture when a frame has none”
   Shown in place of the picture of any frame that has none. Leave it empty if every frame has pictures.
7. 7“With every frame”

1. 1“Line under the button”
   A small line under the add button. Empty shows “Lens prices are added to the frame's price.” Say here how your store takes the prescription, such as “We email you for your prescription after you order.”
2. 2“Image position on desktop”
   Which side the picture takes on computers: “Start” is where reading begins (right in Arabic, left in English), “End” the other. On phones and tablets it follows the heading.
3. 3“Link name”
   The section's link name: a link ending in #lens-builder (or what you type) jumps here. Latin letters, digits and hyphens; empty gives an automatic name you cannot link to.
4. 4“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
5. 5“Section spacing”
   The space above and below the section; “None” sets it against its neighbors. The sizes come from “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

A path of ages: each stop shows an age with its picture, name and its collection's product count, and clicking one swaps the product rail under the path without reloading the page. A shopper who saved their child's age finds the path open on it.

1. 1“Small label above”
   A small line above the heading. Empty hides it.
2. 2“Heading”
   The section heading, centered; simple formatting works. Empty: no heading.
3. 3“Text”
   A line under the heading. Empty hides it.
4. 4“Age chosen at first”
5. 5“Products per age”
6. 6“Path style”

1. 1“Product card style”
   The card style in the rail. “As in Theme settings” follows “Product cards”; the others apply to this section only.
2. 2“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
3. 3“Section spacing”
   The space above and below the section; “None” sets it against its neighbors. The sizes come from “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

A list of real products, all ticked to start with. The shopper unticks what they already have and picks the size on the row, the total follows, and one click puts every ticked product in the cart. The total is just the sum of the prices, with no bundle price or discount.

1. 1“Small label above”
   A small line above the heading. Empty hides it.
2. 2“Heading”
3. 3“Text”
4. 4“Note under the button”
5. 5“Image”
   A tall picture beside the list on computers (above it on phones) with a round sticker counting the products. Without it the heading stays beside the list on computers as you scroll.
6. 6“Image position on desktop”
   Which side the picture takes on computers: “Start” is where reading begins (right in Arabic, left in English), “End” the other side. It changes nothing without an “Image”.

1. 1“Anchor”
   A short name such as help, so a link with #help (from another page: /#help) jumps here. Use each name once per page: a duplicated section keeps it, so rename or clear the copy.
2. 2“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
3. 3“Section spacing”
   The space above and below the section; “None” sets it against its neighbors. The sizes come from “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

A section under the buy column of the product page: a colored panel with the product's scale at full size, and facing it the frame drawn to scale from its numbers, a growth chart for clothing from the “Size guide”, or the product's second picture. A product with no sizes and no numbers (a case, a cleaning cloth) does not show it.

1. 1“Small label above”
2. 2“Heading”
3. 3“Text”
   A paragraph under the heading, with full formatting. Empty hides it.
4. 4“Frame numbers”
5. 5“Picture side”

1. 1“Color scheme”
   The background around the panel and the picture, from the schemes under “Colors” in “Theme settings”. The panel has its own “Panel color scheme”.
2. 2“Panel color scheme”
3. 3“Section spacing”
   The space above and below the section; “None” sets it against its neighbors. The sizes come from “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

A side window that opens from a “Size guide” link beside the size option on the product page and in the quick add: the size chart with a cm/in toggle, and how to measure. Each product opens its own chart; the setup is in “Size charts: the size guide and the growth chart”.

1. 1“Drawer title”
   The window's title. Empty shows “Size guide”.
2. 2“Options that show the guide”
   The product options that get the guide link, comma separated, in every language of the store, such as Size, Sizes, المقاس (any letter case). A product without one gets no link.
3. 3“Note under the chart”
   A note under every chart, such as the larger size fitting more loosely; a chart with “Show the shared points and note” off leaves it out. Empty hides it.
4. 4“How to measure heading”
   The heading of the measuring points. Empty shows “How to measure”; it is hidden when no point has text.
5. 5“How to measure layout”
   “Points with a title” shows each point with its heading and text; “Numbered steps” numbers the same points.

1. 1“Boxed tip”
   A sentence in a box under the measuring points, such as a tip. Empty hides it.
2. 2“Article link label”
   The words of the article link at the end of the window; it shows only when “Article link” is filled in too.
3. 3“Article link”
   The page the article link opens, such as an article on choosing a size; it needs “Article link label” too.
4. 4“Help page”
   A page (usually your contact page) behind a line at the end of the window: “Still unsure about your size?” with the link “Ask our team”. Empty: no help line.
5. 5“Drawer width”
   How wide the window is on computers, from 440 to 640; on phones it fills the width.

1. 1“Name”
   The chart's heading above it, also shown under the growth chart in “How it fits”.
2. 2“Note above the chart”
   A paragraph before this chart only, such as “Measurements are of the body, not the garment”. Empty hides it.
3. 3“First column heading”
   The heading of the first column (the sizes), such as “Age”. Empty shows “Size”.
4. 4“Other column headings”
   The other columns' headings, comma separated, in the order of the row values (Height, Chest). The growth chart draws the first; a value with no heading is not shown.
5. 5“Values”
   “Centimeters, with an inches toggle” adds a cm/in button; “Millimeters” and “As typed” show the values as they are. Only centimeters draw the growth chart in “How it fits”.

1. 1“Show the shared points and note”
   On: the “How to measure” points placed before the first chart, and the note under the chart, show with this one. Turn it off for a chart they do not fit, such as belts.
2. 2“Products”
   Products that open the guide on this chart. Name each product, type or tag in one chart only: when two charts name it, the last one opens.
3. 3“Product types”
   Product types, separated by commas (any letter case), used when no chart names the product itself.
4. 4“Product tags”
   Product tags, separated by commas (any letter case), used when no chart names the product or its type.

The shopper saves their size (or their child's age) once, and every scale in the store answers with the ball: it sits on their size when the product comes in it. They see it in:

• Cards and quick search: a row of sizes, the ones the product comes in solid, and the words “In your size”, “Close to your size” or “Not in your size”.
• The product page: the “Sizes” block under the price, and the “How it fits” section.
• The header: a “My size” button (“My child” with age bands), also at the top of the phone menu.
• Collections and search: a strip with the same scale, when you have a filter called Size or Age.
• The cart: a line under each item saying whether its size is theirs.

Shoppers set their size from “My size”, the “Frame size finder” or “Shop by age”.

The theme reads a product's sizes from a tag on it, or from an option called Size or Age. A product with neither shows no sizes. Try one product before the rest.

Every pair of glasses has three numbers in millimeters printed inside its arm, such as 49-21-145: lens width, bridge and temple length. Caliper reads them from a product metafield called custom.subtitle (a single line of text, such as 49-21-145 · 3 sizes) and shows them in a line under the product's name on its card, and as the frame drawn to scale in “How it fits”.

The “Size guide” opens from a link beside the option named in “Options that show the guide” (such as Size), on the product page and in the quick add, on the chart that names the product, else its type, else one of its tags.

For a product with no frame numbers, a centimeter chart makes “How it fits” draw a growth chart: one bar per size on a centimeter scale from the chart's first value column (such as Height), and the chosen size's measurements in the panel. It needs at least two rows with numbers. The chart follows the size the shopper picks, named with numbers such as 3-6m or with letters such as S.

The shopper picks the frame's lenses on its own page: numbered steps (use, coating, thickness), each option at its real price. The frame and the paid lenses go into the cart together, each lens line naming its frame, and every choice (paid or included) is written on the frame's line. The dynamic checkout button hides while a paid lens is chosen, so nobody buys the frame without its lenses.

The shopper's size (or their child's age) is kept in their own browser only and is sent nowhere, not even to your store. Clearing the site's data or a private window starts them over, and the “Clear” button in the “My size” panel removes it at once.

A thin bar above the header that shows one short message at a time, such as free delivery or the returns window. With more than one message it changes by itself, and shoppers can pause it or step through with the arrows.

The bar at the top of every page: logo, menu, search, account and cart.

The levels of the menu you build in “Menus” decide what shows where:

• Level 1: the words in the bar.
• Level 2: the links in the item's big panel on a computer, and on the item's own page in the “Menu drawer” on a phone.
• Level 3: the links under each column title in the panel, and under each group title in the menu drawer.

1. 1“Layout”
2. 2“Menu”
3. 3“Menu alignment”
   For the one-row layout: “Center” puts the menu in the middle of the row, “Start” next to the logo.
4. 4“While scrolling”
   “Hide going down, show going up” hides the header as the page scrolls down and brings it back on the way up; “Always in view” keeps it; “Scrolls with the page” lets it go.
5. 5“Lie over the first section of the home page”
   Home page only: the header lies over the first section with no background, and turns solid when the page scrolls, on hover or while a panel is open. Keep it last in its group, right before a slideshow or a hero.
6. 6“Text over the picture”
   The text color while the header lies over the picture: “Light, with a soft shade” is white on a faint dark shade, “Dark” is dark, “Dark, with a pale veil” is dark on a pale veil.
7. 7“Logo”
   Your logo picture, on every page. Without it the header prints the “Name without a logo”.
8. 8“Logo over the picture”
   Optional: a light version of the logo, shown while the header lies over the first section. It needs a “Logo” too.

1. 1“Logo width on desktop”
   The logo's width on computers; the height follows the picture.
2. 2“Logo width on mobile”
   The logo's width on tablets and phones.
3. 3“Make the logo the home page's main heading”
   Makes the logo the home page's main heading (h1). Turn it off when a hero's heading is the page's main heading: a page has one.
4. 4“Name without a logo”
5. 5“Name font”
   Sets the name in the heading font or the body font, from “Typography”.
6. 6“Name weight”
   How bold the name is on English pages; “As the headings” follows the heading weight. On Arabic pages the name is always “Semibold (600)”.
7. 7“Name size”
   The name's size as a share of its normal size.
8. 8“Name letter spacing”
   The space between the name's letters, in hundredths of the letter size. Arabic letters are never spaced.

1. 1“Mark before the name”
2. 2“Show the account link”
3. 3“Customer account menu”
   The links in the account button's panel (orders, profile); edit them in “Menus”.
4. 4“Wishlist link”
   Your wishlist app's page: a heart button joins the header's buttons on computers. Empty: no button.
5. 5“Search field”
   “Soft” is a quiet field, “Outlined, with a search button” has a firm edge and a button, “Rounded, light on a colored band” suits a colored header.
6. 6“Search field placeholder”
   The hint in the empty field. Empty: “Search for products and categories”.
7. 7“Suggested searches under the field”
   How many suggested searches show as links under the field on computers; their words come from “Search”. 0 hides them.
8. 8“Search by product type”
   Product types separated by commas, offered as a list at the start of the field. For another word, write the type, a | and the word (Audio | Sound); in a translation keep the types and change the words. The search page needs the product type filter from the Search & Discovery app.

1. 1“Show the cart total under its label”
   The cart total under the word “Cart” on wide screens, once the cart holds something.
2. 2“Categories”
   Up to 20 collections, listed with their product counts under the “All categories” button and as chips on phones. With none, neither the button nor the chips show.
3. 3“Show All categories in the bar”
   The “All categories” button at the start of the category bar; it opens your “Categories” with their product counts.
4. 4“All categories label”
   The words on that button. Empty: “All categories”.
5. 5“All categories link without scripts”
   The page the “All categories” button opens when clicked while its list is open, or without scripts. Empty: all products.
6. 6“Show category chips on phones”
   Shows your “Categories” as a row of draggable chips under the search field on tablets and phones.
7. 7“Category bar”
   How the bar's items look on computers: the icon choices spread the items across the bar, each icon beside or above its word. Icons come from the “Menu item” blocks.
8. 8“Give the category bar its own colors”
   Gives the category bar the “Category bar color scheme” instead of the header's, when the two differ.

1. 1“Category bar color scheme”
   The category bar's colors from “Colors”, used when “Give the category bar its own colors” is on.
2. 2“Category chips on phones take the bar's colors”
   The category chips on phones take the bar's colors too, when the bar has its own.
3. 3“Note at the end of the bar”
   A short line at the end of the category bar on computers. “Free delivery threshold” prints the amount set for the shopper's currency in “Cart” (no amount, no note); “My own text” prints the “Note text”.
4. 4“Note text”
   The note's words with “My own text”. Empty: no note.
5. 5“Note icon”
   The icon before the note. “None” still shows a truck for the delivery note and a chat bubble for your own text.
6. 6“Note link”
   Makes the note a link to this page. Empty: plain text.
7. 7“Color scheme”
   The colors of the header and its big panels, from “Colors”.
8. 8“Cart count”
   The color of the number on the cart icon: the button color or the accent color.

1. 1“Menu item”
   The item this block belongs to: its title as in the menu (Women), or its place (1 for the first), which works in every language of the store. The category chips match a collection's title.
2. 2“Audience”
   Optional: the audience whose menu this block belongs to, by name (Women) or place (1 for the first). Empty: every audience, so two blocks can name the same item, one per audience.
3. 3“Icon”
   An icon beside the item's name in the menu bar and on its category chip. “Icon image” replaces it.
4. 4“Icon image”
   A small picture used instead of the icon; a square one works best.
5. 5“Show in the sale color”
   Shows the item, its icon and its chip in the sale color, for an item such as Deals.
6. 6“In the large panel”
   What the panel shows beside the sub-items; each choice uses only its own fields. “Collection tiles” replace the sub-items on computers. A choice with nothing in it and no sub-items opens in the editor only; on the store the item is a plain link.
7. 7“Card collection”
   For “A collection card”: its picture, title and link. For “Product cards”: the products when you pick none, and where “View all” goes.
8. 8“Card image”
   The picture of “A collection card”, shown 3:4. Empty: the collection's own picture.

1. 1“Card title”
   The title under the card's picture. Empty: the collection's title, then the item's name.
2. 2“Card link”
   Optional: where the card leads. Empty: the collection, else the item's own link.
3. 3“Tile collections”
   The collections shown as tiles in “Collection tiles”, up to 6, each with its picture, name and product count. With none, and no sub-items, the item is a plain link on the store.
4. 4“Product”
   The product of “One product”: its picture, name and price, with “Shop now”. Without one no card shows, and with no sub-items either the item is a plain link.
5. 5“Line above the product”
   The line above the product in “One product” (empty: “Our pick”), and the title of “Product cards” (empty: “Popular in” and the item's name).
6. 6“Products”
   “A short list of products” shows the first three with picture and price; “Product cards” slide through up to twelve. Product cards with none picked show the first eight of the “Card collection”.
7. 7“Product cards in view”
   How many cards of “Product cards” are in view at once; the rest slide in. Smaller screens show 2.
8. 8“Show the size scale under the panel”
   A band at the foot of the panel with the size scale (or child's age) to pick from and the size finder link, when sizes are on in “Fit and sizes”.

The header, the menu drawer and the footer read menus you build in “Content” > “Menus”; Shopify creates “Main menu” and “Footer menu” for you. A menu has up to 3 levels (an item, a sub-item, and one more under it), and each level shows in its own place: “Header”.

1. 1“Name”
   The menu's name; it is what you see in the “Menu” picker in the editor.
2. 2“Handle”
   The menu's name in links and code, written from the name.
3. 3“Add menu item”
   Adds a new item to the menu.
4. 4“Drag handle”
   Drag an item up or down to reorder it, and inward to make it a sub-item.
5. 5“Edit item”
   Opens the item's name and link.
6. 6“Save”
   Without it nothing is kept.

A large hero in two halves that travel in opposite directions: a lifestyle picture, and the product on a color field with the words at its foot. On phones the pictures stack and the words go under them.

1. 1“Name for screen readers”
   The slideshow's name for screen readers; shoppers do not see it. Empty: “Featured slides”.
2. 2“The first slide's heading is the page's main heading (H1)”
   The first slide's heading becomes the page's main heading (h1). For a page's first section only; on the home page also turn off “Make the logo the home page's main heading” in the “Header”.
3. 3“Change slides every”
4. 4“Travel time”
   How long a slide takes to travel; a bigger number is slower. Shoppers who ask for less motion get a quick fade instead.
5. 5“Height on tablets and desktop”
   “Full screen” fills the window under the header. On phones the two picture shapes below set the height.

1. 1“Lifestyle picture shape on phones”
   The picture is cut to this shape on phones; each slide's phone crop sliders choose the part that stays.
2. 2“Product picture shape on phones”
   The same for the product picture; “Band (2:1)” is the widest and cuts the most.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.

1. 1“Lifestyle picture”
2. 2“Horizontal crop on tablets and desktop”
   Which horizontal part stays in view when the picture is cut: 0 the left edge, 50 the middle, 100 the right. A “Focal point” set on the picture takes over.
3. 3“Vertical crop on tablets and desktop”
   Which vertical part stays in view: 0 the top edge, 100 the bottom.
4. 4“Horizontal crop on phones”
   The same horizontal crop on phones, for the shape set in “Lifestyle picture shape on phones”.
5. 5“Vertical crop on phones”
   The same vertical crop on phones.
6. 6“Product picture”
   The product on a plain background; its foot fades into the “Field color” under the words. Empty: the chosen product's first picture, or a placeholder with no product.

1. 1“Product picture: horizontal crop on tablets and desktop”
   Which horizontal part of the product picture stays in view: 0 the left edge, 100 the right.
2. 2“Product picture: vertical crop on tablets and desktop”
   Which vertical part of the product picture stays in view: 0 the top edge, 100 the bottom. On desktop the picture fills only the upper part of its half.
3. 3“Product picture: horizontal crop on phones”
   The same horizontal crop of the product picture on phones, for the shape set in “Product picture shape on phones”.
4. 4“Product picture: vertical crop on phones”
   The same vertical crop on phones; it matters most with “Band (2:1)”, which cuts a lot.
5. 5“Field color”
6. 6“Product”

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
3. 3“Text”
   A line under the heading. It shows on phones and tall desktop screens only; tablets and most laptops leave it out so the slide fits one screen.
4. 4“Words color on tablets and desktop”
   The words' color against the “Field color”: dark for a light field, white for a dark one. On phones the words sit under the pictures in the section colors.

Your store's small promises with icons, such as delivery, returns and warranty: each an icon, a heading and a line, in a row, cards or centered.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
   The section heading; bold and italic work. Without it “Name for screen readers” names the section.
3. 3“Text”
   A line under the heading.
4. 4“Name for screen readers”
   The section's name for screen readers when it has no “Heading”; shoppers do not see it. Empty: “Why shop with us”.
5. 5“Layout”
6. 6“Columns on desktop”
   How many items sit side by side on desktop. “Automatic (up to 4)” uses the number of items, 4 at most. Smaller screens show fewer.

1. 1“Alignment”
   “Automatic” is Start in “Row” and Center in the others. In “Row”, Center works on desktop only.
2. 2“Two columns on phones”
   In “Row”: on phones, two items a row with the icon above the words, instead of one under another.
3. 3“Card style”
   In “Cards”: “Tinted” fills each card with a soft color; “Outlined” is a thin square-cornered border with no fill.
4. 4“Icon style”
5. 5“Icon color”
   “Primary color” is the theme's primary color. A picture in “Your own icon” keeps its own colors.
6. 6“Step numbers”
   Numbers the items 01, 02, 03 in their order. “Small, in the corner” adds a small number and keeps the icon; “Large, instead of the icon” puts a big outlined number in its place.

1. 1“Title font”
   The font of each item's heading in “Row”. “Cards” and “Centered” always use the heading font.
2. 2“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
3. 3“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

1. 1“Icon”
2. 2“Your own icon”
   A picture in place of the icon above, shown small in its own colors. A square .svg or .png works best.
3. 3“Heading”
4. 4“Text”
5. 5“Link”
   The page the whole item opens.
6. 6“Link words”
   A small underlined label under the line, such as Learn more; shown only with a “Link”.
7. 7“Tint”
   This item's color: it fills its card in “Cards”, and in the other layouts the icon's disc with “In a ring” or “On a disc”. Empty: the section's colors.

Your collections with their pictures and product counts; a click opens one. Five styles: circles, cards, panels, tiles and a chip strip.

1. 1“Small label above”
2. 2“Heading”
3. 3“Text”
   A line under the heading.
4. 4“Link text”
   The words of a link at the end of the heading row (under the heading on phones), such as View all; it needs a “Link” too.
5. 5“Link”
   The page the link opens, such as the page of all collections; it needs “Link text”.
6. 6“Alignment”
   Where the section's head sits. “Automatic” is Center for Circles and Chip strip, Start for the rest. The arrows of Circles and Cards show in the head, except with Center.
7. 7“Name for screen readers”
   The section's name for screen readers when it has no “Heading”; shoppers do not see it. Empty: “Shop by collection”.

1. 1“Style”
2. 2“Panels open one after another”
   Panels, on desktop: the next panel opens by itself about every 5 seconds, a line under its number running as the timer. It waits while the pointer is on the list.
3. 3“Show product count”
4. 4“Image shape”
   Cards and tiles. “Automatic”: tall (3:4) cards, square tiles.
5. 5“Picture fit”
   Circles and tiles. “Cut-out on color” sits a product photo shot on white on each collection's “Cut-out background”, the white melting into it.
6. 6“Tiles layout”
   “Bento”, on desktop: a 4-column grid with the first tile two rows tall and the sixth two columns wide; the column settings do not apply there.
7. 7“Set the items in view”
   Circles and cards: on, the four numbers below set how many items are in view. Off: each style's own spacing.

1. 1“On phones”
   How many items are in view at once; a fraction such as 3.3 shows part of the next. Only with “Set the items in view”.
2. 2“On tablets”
   As “On phones”, for tablets.
3. 3“On small desktops”
   As “On phones”, for small desktops.
4. 4“On large desktops”
   As “On phones”, for large desktops.
5. 5“Columns on mobile”
   Tiles columns on phones.
6. 6“Columns on tablet”
   Tiles columns on tablets.

1. 1“Columns on small desktops”
   Tiles columns on small desktops; Bento always uses 4.
2. 2“Columns on desktop”
   Tiles columns on desktop; Bento always uses 4.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

1. 1“Collection”
2. 2“Title”
3. 3“Image”
   A picture instead of the collection's own. Empty: its image from “Collections”, or a placeholder if it has none.
4. 4“Line”
   Panels: a short line shown when the panel is open.
5. 5“Desktop image”
   Bento tiles: this tile's picture on desktop, made for the tall first and wide sixth tile. Phones use “Image”.
6. 6“Icon”
   Chip strip only: one of 25 icons in the chip's round badge. “None” shows the picture in a small circle.
7. 7“Cut-out background”
   The colored field behind a product cut-out, with “Cut-out on color”. Empty: the panel color.

Your collections' products in tabs: the shopper clicks a tab name to see its products in a swipe row or a grid with “Load more”, then “View all”.

1. 1“Small label above”
2. 2“Heading”
3. 3“Text”
   A line under the heading.
4. 4“Tab style”
5. 5“Tab font”
   “Headings” sets underlined tabs large in the heading font; “Body, menu size” in the body font at menu size. With Pills, the second only changes their text size.
6. 6“Alignment”
   “Centered” puts the heading and the tabs under it in the middle. The other puts them in one row on desktop; on smaller screens everything sits at the start.
7. 7“Layout”
   “Swipe row”: one draggable row with arrows below. “Grid with Load more”: a grid of some cards, and the button brings the rest.

1. 1“Cards per row”
   On wide screens; smaller desktops show at most 4, tablets 3, and phones follow “Columns on mobile”.
2. 2“Columns on mobile”
   1 large card (with the next peeking in the swipe row) or 2.
3. 3“Products per tab”
   The most products in each tab, in the collection's order, or yours if you hand-pick them.
4. 4“Products before Load more”
   Grid only: cards shown before “Load more”. 0 shows every product at once; if it is not below “Products per tab” there is no button.
5. 5“Products each Load more adds”
   Grid only: the cards each press of “Load more” adds; the count (Showing 6 of 9) updates with it.
6. 6“Product card style”
   “As in Theme settings” follows “Product cards”; the others apply to this section only.
7. 7“Show option pills on cards”
   One option's values (sizes, say) as small pills under each card's title; a value sold out in every variant is struck through. Only for products with more than one value.

1. 1“Option shown as pills”
   The option's name in every language your store uses, separated by commas, such as Size, المقاس; add more names when products name it differently.
2. 2“Show View all”
3. 3“View all text”
   The View all button's words. Empty: “View all”.
4. 4“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
5. 5“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

Shoppers turn a product's 3D model, zoom in, and open numbered spots on it that explain its details. Round pictures switch between the models.

1. 1“Layout”
   “Beside the words” puts the model next to the heading and words. “In a circle” centers the heading over a round stage, with the spots listed on both sides (under it on phones).
2. 2“Small label above”
   A small line above the heading.
3. 3“Heading”
4. 4“Text”
   A line under the heading.
5. 5“The button opens a quick view”
   The product button under the model opens a quick view; off, it goes to the product page. The button shows only with a “Product”.
6. 6“Turns on its own”
   The model turns slowly on its own, with a pause button, until a spot opens or the shopper pauses it. Never for shoppers who ask for less motion.

1. 1“Zoom”
2. 2“See it in your room (AR)”
   A “See it in your room” button on phones and tablets that support AR, placing the model in the shopper's room through the camera. Other screens show a 3D badge.
3. 3“Shadow under the model”
   The shadow under the model; 0 removes it, higher is darker.
4. 4“Next model on its own”
   With two or more models, the next comes on its own while the section is in view and unused, with a pause button. Never for shoppers who ask for less motion, nor in the editor.
5. 5“Time on each model”
   Seconds on each model before the next; the ring around its chip fills meanwhile.
6. 6“Model position on large screens”
   In “Beside the words”: “Start” puts the model on the reading-start side (the right in Arabic), “End” on the other. On tablets and phones it sits above the words.

1. 1“Stage shape”
2. 2“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
3. 3“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

1. 1“Product”
   The product whose 3D model shows (a .glb under its “Media”; Shopify makes the iPhone file itself), with its name, price and button under the model.
2. 2“3D file link”
   A .glb link for a product with no model, for example a file uploaded in “Content” > “Files”.
3. 3“Picture while loading”
   The picture shown until the model loads. Empty: the model's own picture, then the product's.
4. 4“Model color”
   This model's color: the section takes it while the model is on show, the stage and the chip a lighter shade. Empty: the color scheme's.
5. 5“Picture on its chip”
   Optional: the chip's picture. Empty: the product's.
6. 6“Name”
   The model's name when no “Product” is chosen. With neither: “3D view”.

1. 1“Text”
   A line under the model's name.
2. 2“Button label”
3. 3“Starting angle”
   The starting sideways angle; 0° faces the front. The reset button under the model returns to this view.
4. 4“Starting height”
   How high the first view looks from: 90° is straight on, less looks from above.

A story told as the shopper scrolls: the pictures stay pinned and each scene opens its picture over the last, while its words and products scroll past. A scale of dots under the pictures shows where they are.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
3. 3“Text”
   A line under the heading.
4. 4“Pinned pictures on desktop”
5. 5“Scroll length of a scene”
   How much of the window each scene takes while scrolling: more makes a slower story. The pictures stay pinned.

1. 1“Show the scale under the pictures”
2. 2“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
3. 3“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

1. 1“Name on the scale”
   A word or two naming the scene's dot, also shown as a small line above its heading, such as Screens or Sun. Empty: the dot uses the heading.
2. 2“Image”
3. 3“Heading”
4. 4“Text”
   The scene's words; paragraphs, bold and links work.
5. 5“Products”
6. 6“Button label”
   The scene button's words; the button needs a “Button link” too.
7. 7“Button link”
   The page the button opens; it needs a “Button label”.

A band of short phrases that moves by itself, with a small picture or a sign between them. It stops under the pointer or with its pause button.

1. 1“Name for screen readers”
   The band's name for screen readers; shoppers do not see it. Empty: “Store highlights”.
2. 2“Speed”
3. 3“Repeats per loop”
   More repeats make each loop longer, so the text moves faster at the same “Speed”. A short list gets more by itself.
4. 4“Text size”
5. 5“Text style”
   Phrases alternate: outlined and solid, or outlined and accent-colored. On Arabic pages “Outline and accent color, in turn” alternates the text color and the accent.
6. 6“Capital letters”
   Capital letters on English pages; Arabic is not changed.

1. 1“Text color”
   The phrases' color. Empty: the color scheme's text color.
2. 2“Between the phrases”
   “The phrase's picture” shows each phrase's picture; the others are drawn signs, or “Nothing”.
3. 3“Picture shape”
   The picture's frame when “Between the phrases” is “The phrase's picture”; “Pill” is the widest.
4. 4“Sign color”
   Drawn signs. Empty: the accent color.
5. 5“Second sign color”
   Every other sign. Empty: the same as “Sign color”.
6. 6“Band”

1. 1“Ribbon stripe color”
   The stripe behind a tilted ribbon. Empty: the accent color.
2. 2“Edges”
   “Scalloped” cuts the top and bottom edges into small waves.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

One product with its pictures and a full buy box, so shoppers choose and add to cart without leaving the page. The “Gallery” has six desktop layouts:

• Side by side: two pictures, the box beside them.
• Overlapping: a large picture with a small tilted print over its corner; pressing the print brings it forward.
• Stacked: the pictures one under the other, the box following beside them.
• Layered: each picture holds while the next slides up over it.
• Slide in from the side: every picture of every color slides in, one after another, as you scroll.
• Two by two: a grid.

Phones get a swipe gallery; tablets show two pictures side by side.

1. 1“Product”
   Its pictures, price, options and description fill the section. Empty: placeholder pictures and the name “Your product's name”, on the store too.
2. 2“Small label above”
3. 3“Heading”
   The heading, linked to the product's page. Empty: the product's title.
4. 4“Line under the title”
   “SKU” shows as “Part no.” and follows the chosen variant. A product with no vendor shows the SKU only.
5. 5“Show the saving”
   “Save” and the amount after the price, when the chosen variant's “Compare-at” price is above its price.
6. 6“Description”
7. 7“Words in the short description”
   How many words “Short” keeps.

1. 1“Gallery”
2. 2“Pictures per color”
   Pictures shown, starting from the chosen variant's own; order the product's media color by color in “Products”. With “Pictures slide in from the side” every picture shows.
3. 3“Image shape”
   The shape of each picture's frame; “Picture fit” decides whether it is cut or shown whole.
4. 4“Picture fit”
   “Show the whole image” shows all of it with a little air on a light background, good for products shot on white.
5. 5“Note”
6. 6“Show details link”
   A link under the box to the product's full page.
7. 7“Details link text”
   The details link's words. Empty: “View full details”.

1. 1“Second link text”
   The words of a second link, with a ruler icon, beside the details link, such as Find your size; it needs a “Second link”.
2. 2“Second link”
   Where the second link goes, such as a size finder on this page; it needs “Second link text”.
3. 3“Anchor”
   Optional: a short name such as help, so a link to #help (from another page: /#help) jumps here. Use each name once per page: a duplicated section keeps it, so rename or clear it in the copy.
4. 4“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
5. 5“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

A product picture with numbered markers on its parts and, beside it, a list with the same numbers that names each part. Pointing at a marker or a row lights the other.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
3. 3“Text”
   A line under the heading.
4. 4“Image”
5. 5“Picture description”
   The picture's description for screen readers. Empty: the alt text saved with the picture.
6. 6“Picture on desktop”
   “Start” puts the picture on the reading-start side (the right in Arabic) with the list beside it; “End” the other way. On tablets and phones the picture is above the list.

1. 1“Button label”
2. 2“Button link”
   The page the button opens; it needs a “Button label”.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

The top of the page as a deck of rounded cards: the front card with the next two peeking out under it; the shopper drags it aside or presses an arrow to send it to the back. Each card is a picture beside a panel of words in its own colors.

Looks are pictures with spots: the shopper taps a spot to see the piece and its price, and adds it. “Gallery” is a row of looks, “Feature” one look at a time beside its pieces with a button that adds them all.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
3. 3“Text”
   A line under the heading.
4. 4“Style”
   “Gallery” is a draggable row of looks, each with its name and piece count under the picture. “Feature” shows one look at a time beside its priced pieces and an “Add the look” button.
5. 5“Image shape”
6. 6“Picture on phones and tablets”
   “Feature” style below desktop width: “Portrait (4:5)” crops the picture tall, “Same shape as on desktop” keeps its shape; choose it for wide room pictures.
7. 7“Numbered spots”
   “Gallery” style: a number on each spot; off, a + sign. “Feature” always numbers its spots.

1. 1“Looks in view on phones”
   How many looks are in view at once on phones.Shown when “Style” is “Gallery”
2. 2“Looks in view on tablets”
   How many looks are in view on tablets; a fraction such as 2.5 leaves part of the next one showing.Shown when “Style” is “Gallery”
3. 3“Looks in view on desktop”
4. 4“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
5. 5“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

Your blog's newest articles: a picture, a date, a title and the first lines, the whole card opening the article. You write them in “Blog posts”; the section shows the newest by itself.

1. 1“Blog”
   The blog the newest articles come from. Empty: sample cards with no links; a blog with no articles: a short note.
2. 2“Layout”
3. 3“Articles”
4. 4“Show the first lines”
5. 5“Small label above”
6. 6“Heading”

1. 1“Show a link to the blog”
2. 2“Link label”
   The link's words. Empty: “All articles”.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

Short videos and pictures of your products in real life, in a row that drags. Each card has an oval chip with the product's round picture; its name and price open from it, and a click opens the product.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
3. 3“Text”
   A line under the heading.
4. 4“Link label”
   The words of a link at the end of the heading row (under the heading on phones), such as View all; it needs a “Link” too.
5. 5“Link”
   The page the link opens; it needs a “Link label”.
6. 6“Cards in a row on large screens”
7. 7“Image shape”

1. 1“Product name and price”
   The product's round picture always shows. “Open under the pointer” opens its name and price while the pointer is on the card or focus on the chip; “Always shown” keeps them open. On touch screens they are always open.
2. 2“Videos play”
   “Under the pointer” plays a video while the pointer or focus is on its card, “While in view” while it is on screen. Touch screens use the second. Never on its own for shoppers who ask for less motion.
3. 3“The product opens in a quick view”
   The chip opens a quick view; off, the product page.
4. 4“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
5. 5“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

Questions and answers that open and close, in groups (delivery, sizes, returns...). The answers are in the page, so search engines read them, with an optional contact card.

1. 1“Small label above”
2. 2“Heading”
3. 3“Text”
   A line under the heading, plain text.
4. 4“Layout”
   “Heading beside the answers”: on desktop the heading and contact card stay in view at the side; smaller screens stack. “One centered column”: the card goes under the answers.
5. 5“Question groups”
6. 6“One answer open at a time”
   Opening an answer closes the open one in the same group.

1. 1“Add FAQ structured data”
   Structured data that helps search engines understand your answers. For one FAQ section per page: when two have it on, only the first is marked up.
2. 2“Contact heading”
3. 3“Contact text”
   A line under the card's heading, such as when you reply.
4. 4“Button label”
   The first button's words (a primary button); it needs a “Button link”.
5. 5“Button link”
   The page the first button opens, such as your contact page; it needs a “Button label”.
6. 6“Second button label”
   The second button's words (a secondary button); it needs a “Second button link”.

1. 1“Second button link”
   The page the second button opens, such as an email link; it needs a “Second button label”.
2. 2“Anchor”
   Optional: a short name such as help, so a link to #help (from another page: /#help) jumps here. Use each name once per page: a duplicated section keeps it, so rename or clear it in the copy.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

A newsletter sign-up: the shopper types an email and presses the button, and it reaches you in Shopify as a customer tagged newsletter. With a picture beside or behind it, or as a slim band with no picture.

1. 1“Layout”
   “Card over a picture”: on phones the card hangs over the picture's lower edge. “Slim band”: no picture.
2. 2“Small label above”
3. 3“Heading”
4. 4“Text”
5. 5“Words in the field”
6. 6“Button”

1. 1“Consent line”
   A small line under the field about consent. Empty: a line saying subscribers agree to your emails and can unsubscribe at any time.
2. 2“Picture”
   The picture beside the form or behind the card. Without it a placeholder shows.Shown when “Layout” is not “Slim band”
3. 3“Picture on phones”
   Optional: replaces the “Picture” on phones, shown 4:3.Shown when “Layout” is not “Slim band”
4. 4“Picture focus”
   Optional: the part that stays in view, as x% y%, such as 40% 50%. Empty: the picture's “Focal point”.Shown when “Layout” is not “Slim band”
5. 5“Picture focus on phones”
   The same for phones. Empty: the same as above.Shown when “Layout” is not “Slim band”
6. 6“Picture side”
   “Start” is the reading-start side (the right in Arabic).Shown when “Layout” is “Picture beside the form”

1. 1“Panel color scheme”
   The panel, card or band colors, from “Colors”. For the card over a picture, the section's own scheme gives it the page colors.
2. 2“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
3. 3“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

A place for the blocks of the apps you installed (reviews, loyalty, size charts) on any page, without code.

Promotional banners side by side, each a picture, a heading and a link, such as a sale or a new collection. It is not on the ready-made home pages; add it to any page.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
   The section heading; bold and italic work.
3. 3“Text”
   A line under the heading.
4. 4“Link text”
   The words of a link at the end of the heading row (under the heading on phones), such as View all; it needs a “Link” too.
5. 5“Link”
   The page the link opens; it needs “Link text”.
6. 6“Name for screen readers”
   The section's name for screen readers when it has no “Heading”; shoppers do not see it. Empty: “Featured banners”.
7. 7“Layout”
   “Mosaic”: one large banner beside the others, up to 5; any more are left out.

1. 1“Text place”
   In the mosaic the words are always over the image, and a banner with no image keeps them inside.
2. 2“Image shape”
   The banner shape in “Three in a row” and “Two in a row”, color panels included. “Automatic”: portrait (4:5) for three, landscape (5:4) for two.
3. 3“Row height”
   Mosaic only: each row's height; the large banner is two rows tall.
4. 4“On phones”
   “Automatic” is a swipe row for “Three in a row”, one under the other for two. A swipe row stays one row on every screen, so extra banners slide in. The mosaic ignores this.
5. 5“Call to action”
   How the call to action looks on each banner with a link; its words come from the banner's “Call to action”.
6. 6“Hover effect”
   “Slow zoom” grows the picture slowly under the pointer or focus. With “Colors only” in “Hover effects” (“Animations”) it stays still.

1. 1“Veil behind dark text”
   A soft veil of the page color behind dark words so they read over busy pictures: for banners whose “Text over the image” is “Dark text”, with “Over the image”.
2. 2“Words on a card over the picture”
   The heading and link on a soft white card over the picture, placed by each banner's “Text position” (“Center” centers it). With “Over the image”.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

A table that puts your products side by side (2 to 4) with their specs row by row. It can also have a second tab with the products the shopper added with the “Compare” button.

1. 1“Small label above”
   A small line above the heading.
2. 2“Heading”
   The section heading; bold and italic work.
3. 3“Text”
   A line under the heading.
4. 4“Products to compare”
   Two to four products as columns side by side; each row shows its metafield for every product. Products beyond “Products side by side” are left out.
5. 5“Products side by side”
   How many columns of “Products to compare” show. The shopper's list has its own limit, “Products in the compare list” in “Product cards”.
6. 6“Line above the product name”
   A small line above each product's name: “Vendor”, “Product type”, “A product metafield”, or “None”.
7. 7“Show the shopper's own list”
   A second tab with the products the shopper added with Compare on product cards, kept for the visit. It shows only when “Show Compare button” is on in “Product cards”.

1. 1“Products the list knows”
   The shopper's list shows row values for this collection's products (up to 50); other products show their price and a dash in each row.
2. 2“Anchor name”
   Lets a link ending in #compare (or what you type) jump here; use Latin letters. Keep compare if the Compare action in the “Header” leads here.
3. 3“Color scheme”
   The section's colors: background, text, links and buttons, from the color schemes you set in “Colors”. Switch the scheme to make a section light, dark or accent-colored without changing its colors one by one.
4. 4“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
5. 5“Line above the section”
   A thin line along the section's top edge.
6. 6“Line below the section”
   A thin line along the section's bottom edge.

The product page: pictures on one side, and on the other the product information built from blocks you order by dragging, plus a sticky add to cart bar that appears as the shopper scrolls. The usual order: the top of the column (vendor, title, price, sizes), then the buy box (options, lenses, stock, buy buttons), then extras (delivery, drawers, perks, description). The pictures are set under “Media”.

The sections further down have their own settings: “How it fits”, “Related products” and “Recently viewed”.

1. 1“Show breadcrumbs”
2. 2“Gallery on desktop”
3. 3“Media width on desktop”
   How wide the picture column is on computers: “Large” is over half the page, “Medium” half, “Small” under half; the information takes the rest.
4. 4“Media shape”
   The shape every picture, video and thumbnail sits in. “As uploaded” takes the first picture's shape for all of them; the others force one ratio.
5. 5“Media fit”
   “Fill the box” crops the picture to fill its frame; “Show the whole image” shows it all with space around it. Pictures and video only; a 3D model always fills.
6. 6“Zoom”
   Apart from “Off”, a click opens the picture full screen to zoom and pan, and the hover option also magnifies it 2x under the mouse. Pictures only.
7. 7“Show thumbnails on phones”
   On: a row of thumbnails under the gallery on phones. Off: the gallery only swipes, with a counter such as 1 / 5.
8. 8“Play videos muted when they come into view”
   On: a video uploaded to Shopify plays muted and looping in view and stops out of view; one the shopper pauses stays paused. Never for visitors who ask for reduced motion.

1. 1“Keep the product information in view while scrolling”
   On: the information column follows the shopper down the pictures, on tablets and computers. A column taller than the window holds by its foot.
2. 2“Information width”
   The widest the information gets: “Narrow”, “Regular” a little wider, “Fill the column” the whole column.
3. 3“Show the bar”
   A bar at the bottom with the product, its price and Add to cart; it appears once the Add to cart button scrolls out of view and stays to the end of the page. Tablets count with desktop.
4. 4“Color scheme”
   The colors of the whole section, from the schemes under “Colors” in “Theme settings”. Its drawers take the “Drawer color scheme”.
5. 5“Section spacing”
   The space above and below the section; “None” sets it against its neighbors. The sizes come from “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

1. 1“Label”
   The words of the link. Empty: the chosen policy's name (such as “Delivery and returns”), or the page's title when “Store policies” is “None”.
2. 2“Icon”
   An icon beside the words from a ready set, or “None”.
3. 3“Style”
   “Link, in a row with other links” lines it up with the links beside it; “Full-width row” is a row with an arrow on its own line.
4. 4“Heading”
   The drawer's title. Empty: the link's words.
5. 5“Text”
   The text inside the drawer, with full formatting, shown before the page and the policies.
6. 6“Page”
   A page from “Pages” whose content shows in the drawer after the text, handy for a size table or a policy you reuse.
7. 7“Store policies”
   Policies from “Settings” > “Policies”, shown after the text and page. “Shipping and refund” shows both with a heading each; an empty policy is left out.

Products under the product page, headed “You may also like”: suggested by Shopify or picked by you. With nothing to show, the section disappears from the store.

1. 1“Heading”
2. 2“Alignment”
   “Center” centers the heading with the arrows under it; “Start” keeps the arrows at the other end.
3. 3“Products from”
   The first two are Shopify's suggestions (tune them in the Search & Discovery app); the other two use the picker below. The page's own product never shows.
4. 4“Collection”
   Used with “From a collection” only, though it always shows in the panel. Empty: the section is hidden on the store.
5. 5“Products”
   Up to 10 products in your order, used with “Products you pick” only. With none the section is hidden on the store; “Products to show” caps how many appear.
6. 6“Products to show”
7. 7“Layout”

1. 1“Columns on desktop”
2. 2“Products per row on phones”
   In a scrolling row a fraction such as 2.2 lets the next card peek in; in a grid anything above 1 gives two columns.
3. 3“Product card style”
4. 4“Color scheme”
   The section's colors, from the schemes in “Colors”.
5. 5“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
6. 6“Line above the section”
   A thin line along the section's top edge.
7. 7“Line below the section”
   A thin line along the section's bottom edge.

The products this shopper opened last, newest first, with a “Clear” button. The history stays in their own browser, and the section stays hidden until they have opened a product other than the one on screen.

1. 1“Heading”
   The heading above the products. Empty shows “Recently viewed”.
2. 2“Alignment”
   “Center” centers the heading with the “Clear” button and arrows under it; “Start” puts them at the other end.
3. 3“Products to show”
   The most products shown, newest first, not counting the page's own product.
4. 4“Layout”
   “Scrolling row” has arrows beside the heading (not on phones) and a progress line; “Grid” wraps into rows.
5. 5“Columns on desktop”
   Products per row on computers; tablets show one fewer, never under 2.
6. 6“Products per row on phones”
   In a scrolling row a fraction such as 2.2 lets the next card peek in; in a grid anything above 1 gives two columns.

1. 1“Product card style”
   “As in Theme settings” follows “Product cards”; the others apply to this section only.
2. 2“Color scheme”
   The section's colors, from the schemes in “Colors”.
3. 3“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”; a hidden section takes none.
4. 4“Line above the section”
   A thin line along the section's top edge.
5. 5“Line below the section”
   A thin line along the section's bottom edge.

Search from any page: results as you type, and suggested words before typing. The search drawer and results page are in “Search drawer” and “Search results”.

The head of a collection page: its name, product count, description and breadcrumbs, on the section's colors, over a picture or beside one. The products come under it in “Collection products”.

1. 1“Layout”
2. 2“The title is the page's main heading”
3. 3“Small label above”
   A small line above the name, the same on every collection of this template.
4. 4“Show breadcrumbs”
5. 5“Add the collections page to the breadcrumbs”
   Adds “Collections” to the trail, linking to the “Collections list”.
6. 6“Show product count”
   The collection's real product count under the name; none for an empty collection.
7. 7“Show description”
   The collection's description from “Collections”, with its formatting.
8. 8“Alignment”
   Aligns the name, trail and description.

1. 1“Use the collection's image”
   On: with no “Picture” chosen below, each collection shows its own image. Off, or with no image, the picture layouts show words only.
2. 2“Picture”
   One picture for every collection of this template, in place of their own. Leave it empty so each shows its own.
3. 3“Picture on phones”
   A phone version of “Picture”, used only with it; collections showing their own image keep it on phones.
4. 4“Height”
   “Small”, “Medium” and “Large” are set heights, lower on phones; “As the picture” keeps its shape, uncut. Sizes to upload: “Picture sizes”.
5. 5“Picture side”
   Which side the picture takes in “Picture beside the words”; on phones it sits above the words.
6. 6“Color scheme”
   The background of “Words only” and of the words panel in “Picture beside the words”, from “Colors”. Words over a picture follow “Words color on the picture”.
7. 7“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.
8. 8“Line below the section”
   A thin line along the section's bottom edge.

The collection's products, with a toolbar above (sub-collection pills, “Filter”, “Sort by”, the grid switcher), paging below, and optional promotion tiles among them. The name and description are in “Collection banner”.

1. 1“Collection title”
   Where the collection's name, the page's one main heading, prints: in the “Collection banner”, or in the toolbar when the template has no banner or its banner is “Picture only”.
2. 2“Pills”
   “Automatic, per collection” takes the sub-collections from the collection's custom.subcollections metafield, else from a menu whose handle is the collection's handle; “From one menu” uses one menu everywhere. With neither, no pills.
3. 3“Menu”
   With “From one menu”: its first-level links are the pills on every collection of this template.
4. 4“Pill style”
   “Small picture and words” adds the collection's round picture; a link that is not a collection gets an empty disc.
5. 5“Show product counts”
   A small product count after each pill's name.
6. 6“Products per page”
   After this many products comes the paging set in “More products”.
7. 7“Columns on desktop”

1. 1“Columns on tablet”
   Products per row on tablets.
2. 2“Columns on mobile”
   1 shows each product large, 2 side by side.
3. 3“Product card style”
4. 4“Show the grid switcher”
   Lets shoppers pick the list view (with a short description) or the columns; their browser remembers it. Five columns are offered only when “Columns on desktop” is 5.
5. 5“More products”
   “Load more button” adds the next page below the products with a count and a progress line; “Infinite scroll” adds it by itself near the end. Both keep real page links for search engines.
6. 6“Show filters”
7. 7“Filter layout”
   “Sidebar” is a column beside the products, “Drawer” opens from the “Filter” button, “Bar of dropdowns” is a row of menus above them. Sidebar and bar become the drawer on tablets and phones.

1. 1“Sidebar side”
   Which side the filter column takes; “Start” is the reading edge (right in Arabic).
2. 2“Filter groups open at first”
   Which filter groups start open in the sidebar and the drawer; a group in use is always open.
3. 3“Show sorting”
4. 4“Products to suggest”
   A collection whose first 4 products show under an empty collection and when filters match nothing.
5. 5“Color scheme”
   The section's colors, from “Colors”; the filter drawer uses the “Drawer color scheme”.
6. 6“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.

The page of every collection: a heading, an optional line, then your collections (all, or the ones you pick), each with its picture, product count and link, as tiles, words over the picture, circles or a list.

1. 1“Heading”
2. 2“Text”
   A line or paragraph under the heading, with simple formatting.
3. 3“Alignment”
   Aligns the heading and the text.
4. 4“Show”
   “Every collection” lists them all over numbered pages; “Chosen collections” lists the ones in “Collections”.
5. 5“Collections”
   Up to 50, in your order, on one page, used with “Chosen collections”. With none chosen, every collection shows.
6. 6“Hide empty collections”
   On: collections with no products are left out. Off: they show “Coming soon” in place of the count.
7. 7“Collections per page”
   Collections per page with “Every collection”, with page numbers under them.
8. 8“Layout”

1. 1“Image shape”
2. 2“Columns on desktop”
3. 3“Columns on tablet”
   Columns on tablets; “List” keeps two.
4. 4“Columns on mobile”
   1 large card or 2 side by side; “List” keeps one.
5. 5“Show product count”
6. 6“Show description”
   The first 18 words of each description, in “Tiles” and “Words over the picture” only.
7. 7“Color scheme”
   The page's colors, from the schemes in “Colors”.
8. 8“Section spacing”
   Space above and below the section, sized in “Theme settings” > “Layout”.

The search page: a search field, result-type pills, the products in a grid with filters and sort, then the matching pages and articles. Before a search and with no results it shows suggested words and a product row.

Results while typing and the suggested words are set in “Search”; the quick search window is the “Search drawer”.

1. 1“Show result types”
2. 2“Sold out products”
   Where sold out products go in the results, or whether they are left out.
3. 3“Results per page”
   Results per page; pages and articles count along with the products.
4. 4“Columns on desktop”
5. 5“Columns on tablet”
   Products per row on tablets.
6. 6“Columns on mobile”
   1 shows each product large, 2 side by side.

1. 1“Product card style”
2. 2“Show the grid switcher”
   Lets shoppers pick the list view (with a short description) or the columns; their browser remembers it. Five columns are offered only when “Columns on desktop” is 5.
3. 3“More products”
   “Load more button” adds the next page below the results with a count and a progress line; “Infinite scroll” adds it by itself near the end. Both keep real page links for search engines.
4. 4“Show filters”
5. 5“Filter layout”
   “Sidebar” is a column beside the products, “Drawer” opens from the “Filter” button, “Bar of dropdowns” is a row of menus above them. Sidebar and bar become the drawer on tablets and phones.
6. 6“Sidebar side”
   Which side the filter column takes; “Start” is the reading edge (right in Arabic).