Usage
Styles
Section titled “Styles”Switch styles in Website → Themes. Each style has its own logo colours: upload your logo per style in Website → Themes → Logos.
| Style | Look |
|---|---|
| Bone | Bone paper, espresso ink, clay accent; borderless 3:4 cards on warm wells, light headlines, clay newsletter band. |
| Noir | Espresso-black ground, bone type, apricot top bar and newsletter band; product names in tracked capitals; product photos on light wells. |
| Sorbet | Blush ground, oxblood ink, the hero text on a solid tomato panel, 14 px rounded images, heavier headlines. |
| Sage | Linen sage, forest ink, marigold accents; a white passe-partout frame around hero images, the look board and every product image. |
Photography
Section titled “Photography”Atelier is built for portrait photos: product images in 3:4 (the theme sets product list thumbnails to 450 × 600 and product page images to 900 × 1200 when you activate it). Photos on a plain white or light background blend into the warm image wells. Add a second image (detail or back view) to show it on hover.
Homepage
Section titled “Homepage”The homepage comes from the theme’s layout (Website → Themes → Layouts):
- Atelier lookbook hero: eyebrow, headline, lead text, two links, three facts, two illustrations with a price pin
and “The edit” tiles. Edit it in the block’s content: keep the classes, change the texts, the links
(
{"categories.view?category_id=225"|fn_url}) and the pin text. Wrap one word of a headline in<em>for the italic accent. Replace an illustration with your own photo:<img src="..." alt="...">insideat-frame__imgorat-cat__img. - New this week: products block with the template Lookbook grid (Atelier) (3 or 4 columns in the block settings).
- Shop the look: products block with the template Shop the look (Atelier). The first four products form the look: a flat lay with numbered pins, numbered rows with an add-to-bag button, the complete-look total and an “Add all to bag” button (shown when no piece needs options). Choose the products in the block settings.
- From the journal (blog), Notes from our customers (testimonials), Featured vendors (Multi-Vendor) and Atelier promises (three short texts): standard blocks.
Section and page titles set their last word in italic automatically.
Size chips
Section titled “Size chips”When a product has a select or radio option whose name contains “Size”, product cards show its values as quick size chips on hover (one click adds the product in that size to the bag), and the product page shows the sizes as a chip grid. Common names are shortened (Small → S, X-Large → XL). With product variations (4.18+) a “Size” variation feature shows chips that open the variation.
Menu and header
Section titled “Menu and header”The Main menu block uses the template Mega menu with “More” (Kavio theme). On desktops the header is one row: menu on the left, logo in the middle, search and bag on the right; items that do not fit move into “More”. On tablets the logo sits between search and bag with the menu centred below; on phones the menu button, logo and bag share one row with the search below.
Footer wordmark
Section titled “Footer wordmark”The footer shows the storefront’s company name (Settings → Company) as a large italic wordmark; long names are scaled to fit.
Phones
Section titled “Phones”Two products per row, the hero copy above two illustrations, category tiles you can swipe, product filters behind one “Product filters” button, a swipe gallery and a sticky “Add to bag” bar on product pages, and the bottom bar with home, menu, search, account and cart.