Getting started
Installing Atelier
- From the Theme Store, choose Add theme. Atelier is added to your theme library as a draft, so nothing on your live store changes.
- Go to Online Store > Themes, find Atelier under Theme library, and choose Customize.
- Work through the checklist below, then choose Publish when you are ready.
Installing a theme never changes your products, collections, pages, or orders.
Choosing a preset
Atelier ships with three presets. A preset sets the colors, typography, and the home page composition all at once.
| Preset | Suits |
|---|---|
| Atelier | Warm neutral ready-to-wear. A cinematic hero, a staggered product grid, and long-form storytelling. |
| Noir | Dark editorial. Opens on a slideshow, merchandises through an asymmetric grid, and includes a press quotes section. |
| Campaign | Bold and image-first. Opens on a full-bleed campaign frame with a large marquee and products presented in pairs. |
To change preset, open the theme editor, choose Theme settings, then Change preset at the bottom of the panel.
Changing preset replaces your color and typography settings. It does not change your products or your menus.
Your first ten minutes
- Add your logo. Theme settings > Logo. Upload your logo and set its width for desktop and mobile. Add a favicon at 32 x 32px while you are there.
- Choose your colors. Theme settings > Colors. Each color scheme is a complete set of background, text, and button colors. Sections refer to a scheme by name, so editing a scheme updates every section that uses it.
- Choose your fonts. Theme settings > Typography. Atelier pairs a display serif for headings with a clean sans for everything else.
- Set up your menus. Navigation is managed in Online Store > Navigation, outside the theme editor. Create a menu called Main menu, then select it in the Header section.
- Build your home page. See Building your home page.
- Check your product page. Open any product in the theme editor and reorder the blocks in the product information panel to suit your catalog.
- Preview on a phone. Use the device toggle at the top of the theme editor. Atelier is designed for mobile first, but your images and copy still need checking at that size.
What Atelier needs from your store
Atelier works without any apps. To get the most from it:
- Product photography at 3:4 or 1:1. Mixed shapes are handled without breaking the grid, but a consistent shape looks more considered.
- Two images per product. The second image is revealed when a shopper hovers over the product card on a desktop.
- A collection image for each collection, used on the collection banner and in the collection list section.
- Storefront filters, set up in the Shopify Search & Discovery app if you want filtering on collection pages.