Atelier

Getting startedDémarrer

1. Install the theme1. Installer le thème

1. In your Shopify admin, go to Online Store → Themes.
2. Under Theme library, click Add theme → Upload ZIP file and select atelier-v1.0.0.zip.
3. Click Customize to edit, or ⋯ → Publish to set it live.

1. Dans l’admin Shopify, ouvrez Boutique en ligne → Thèmes.
2. Dans Bibliothèque de thèmes, cliquez Ajouter un thème → Importer un fichier ZIP et choisissez atelier-v1.0.0.zip.
3. Cliquez Personnaliser pour éditer, ou ⋯ → Publier pour le mettre en ligne.

Getting startedDémarrer

2. Styles & branding2. Styles & identité de marque

Atelier ships with three ready-made styles. Pick one when adding the theme, or switch any time in Customize → Theme settings (top of the panel).

Atelier est livré avec trois styles prêts à l’emploi. Choisissez-en un à l’ajout du thème, ou changez à tout moment dans Personnaliser → Paramètres du thème (haut du panneau).

What you can change

Ce que vous pouvez modifier

• Logo (Header): upload yours (~120px tall, transparent PNG/SVG). Without one, the built-in “l’Atelier” wordmark shows.
• Colors: background, text, accent, plus contrast (dark bands) and muted (soft sections) schemes.
• Typography: heading & body fonts, size scales, uppercase option.
• Buttons & inputs: corner radius (Atelier uses a soft 6–8px).
• Layout: page width, page margin, section spacing.

• Logo (En-tête) : importez le vôtre (~120px de haut, PNG/SVG transparent). Sans logo, le wordmark « l’Atelier » s’affiche.
• Couleurs : fond, texte, accent, plus les schémas contrast (bandeaux foncés) et muted (sections douces).
• Typographie : polices titres & corps, échelles de taille, option majuscules.
• Boutons & champs : rayon des coins (Atelier utilise un doux 6–8px).
• Mise en page : largeur de page, marges, espacement des sections.

Getting startedDémarrer

3. Header & mega menu3. En-tête & mega menu

• Menu: pick your navigation menu (admin → Navigation). Nest items two levels deep to feed the category column.
• Mega menu block: add a “Mega menu” block in the header and set its Menu item to the exact top-level link title (e.g. Clothing). Choose a Featured collection, products count (2–4) and an optional promo image.
• Top bar: announcement text, social icons (Instagram / Facebook / TikTok), language & country/currency selectors, sticky-header toggle.

• Menu : choisissez votre menu de navigation (admin → Navigation). Imbriquez les liens sur deux niveaux pour alimenter la colonne de catégories.
• Bloc mega menu : ajoutez un bloc « Mega menu » dans l’en-tête et réglez son Élément de menu sur le titre exact du lien principal (ex. Clothing). Choisissez une Collection en avant, un nombre de produits (2–4) et une image promo optionnelle.
• Barre supérieure : texte d’annonce, icônes sociales (Instagram / Facebook / TikTok), sélecteurs de langue & pays/devise, en-tête collant.

Pages

4. Home page4. Page d’accueil

In Customize → Home page you can add, remove, reorder and configure any section. The demo ships in this order:

Dans Personnaliser → Page d’accueil, vous pouvez ajouter, retirer, réordonner et configurer chaque section. La démo est livrée dans cet ordre :

Pages

5. Product pages5. Fiches produit

• Gallery: thumbnails + main image; choosing a colour shows that variant’s image. Click to zoom (lightbox).
• Variants as pills / round colour swatches — set the colour map in section settings as Name:#hex pairs.
• Rating + customer count, a low-stock bar (real inventory), an estimated delivery date, and a reassurance bar.
• Size guide popup and a compact “Pair it with” upsell under the buy button.

• Galerie : vignettes + image principale ; choisir une couleur affiche l’image de la variante. Clic pour zoomer (lightbox).
• Variantes en pastilles / ronds de couleur — définissez la correspondance couleur dans les réglages, paires Nom:#hex.
• Note + nombre de clients, une barre de stock faible (inventaire réel), une date de livraison estimée, et une barre de réassurance.
• Guide des tailles en pop-up et un upsell compact « Pair it with » sous le bouton d’achat.

The demo product page stacks these sections: Product → Highlights → Trust badges → Tabs → Comparison → Values → You may also like → Testimonials. Reorder or remove any in the editor.

La fiche produit démo empile ces sections : Produit → Points forts → Badges de confiance → Onglets → Comparatif → Valeurs → Vous aimerez aussi → Témoignages. Réordonnez ou retirez-en dans l’éditeur.

Pages

6. Collections, tabs & filters6. Collections, onglets & filtres

Category tabs

Onglets de catégories

1. Create a menu of collection links (admin → Navigation). The demo uses a menu called Collection tabs (handle collection-tabs).
2. In Customize → Collection pages → Collection, enable Show category tabs and pick that menu under Tabs menu.

1. Créez un menu de liens collections (admin → Navigation). La démo utilise un menu nommé Collection tabs (handle collection-tabs).
2. Dans Personnaliser → Pages collection → Collection, activez Afficher les onglets de catégories et choisissez ce menu sous Menu des onglets.

Filters

Filtres

Filters use Shopify’s free Search & Discovery app:

Les filtres utilisent l’app gratuite Search & Discovery de Shopify :

1. Admin → Apps → install Shopify Search & Discovery.
2. Open it → Filters → add Availability, Price, Color, Size… They appear in the bar automatically.

1. Admin → Applications → installez Shopify Search & Discovery.
2. Ouvrez-la → Filtres → ajoutez Disponibilité, Prix, Couleur, Taille… Ils apparaissent dans la barre automatiquement.

Pages

7. Cart7. Panier

In Theme settings → Cart: choose a slide-out Drawer or a Page, and enable the free-shipping progress bar with a threshold amount.

Dans Paramètres du thème → Panier : choisissez un Tiroir latéral ou une Page, et activez la barre de progression livraison offerte avec un seuil.

Pages

8. Search, blog & pages8. Recherche, blog & pages

Styled search results, an editorial blog + article layout (with comments), centered content pages, and branded 404 & password screens — all included and editable.

Résultats de recherche stylés, un blog + une mise en page d’article éditoriale (avec commentaires), des pages de contenu centrées, et des écrans 404 & mot de passe à la marque — tous inclus et éditables.

Conversion & contentConversion & contenu

9. Product highlights & card specs9. Points forts produit & specs des cartes

There are two ways to show highlights, and they look identical by design:

Il existe deux façons d’afficher des points forts, et elles se ressemblent volontairement :

A. On the product page (per page, no metafield)

A. Sur la fiche produit (par page, sans métafield)

Add the Product highlights section and create one Highlight block per item, each with an icon, a value and a label. Fully editable in the theme editor.

Ajoutez la section Points forts produit et créez un bloc Highlight par élément, chacun avec une icône, une valeur et un label. Entièrement éditable dans l’éditeur de thème.

B. On collection cards (per product, via a metafield)

B. Sur les cartes de collection (par produit, via un métafield)

Each product card can show a compact spec strip driven by a product metafield, so the right specs follow each product everywhere it appears.

Chaque carte produit peut afficher une bande de specs compacte pilotée par un métafield produit, pour que les bonnes specs suivent chaque produit partout où il apparaît.

1. Admin → Settings → Custom data → Products → Add definition.
2. Name Highlights, namespace & key custom.highlights, type List of single-line text.
3. On a product, add list entries in the format icon|value|label — e.g. leaf|Merino|100% wool. The first two entries show on cards.

1. Admin → Paramètres → Données personnalisées → Produits → Ajouter une définition.
2. Nom Highlights, espace de nom & clé custom.highlights, type Liste de texte sur une ligne.
3. Sur un produit, ajoutez des entrées au format icone|valeur|label — ex. leaf|Merino|100% wool. Les deux premières s’affichent sur les cartes.

Available icons: leaf, ruler, sparkle, truck, returns, lock, check, info. Keep values short (one word) so cards stay clean.

Icônes disponibles : leaf, ruler, sparkle, truck, returns, lock, check, info. Gardez des valeurs courtes (un mot) pour des cartes nettes.

Conversion & contentConversion & contenu

10. Newsletter popup10. Pop-up newsletter

Enable it in Theme settings → Newsletter popup (or its section). Set the heading, the highlighted line (e.g. “20% off your first order”), an image, a delay, and how often it reappears. Emails are captured by Shopify’s built-in customer/marketing list.

Activez-la dans Paramètres du thème → Pop-up newsletter (ou sa section). Réglez le titre, la ligne mise en avant (ex. « 20% sur votre première commande »), une image, un délai, et la fréquence de réapparition. Les e-mails sont collectés par la liste client/marketing intégrée de Shopify.

Conversion & contentConversion & contenu

11. Background video (promo tiles)11. Vidéo de fond (tuiles promo)

1. Home page → Promo tiles → (a tile).
2. Background video → select a Shopify-hosted video. It autoplays muted & looped, with the image as a fallback.

1. Page d’accueil → Tuiles promo → (une tuile).
2. Vidéo de fond → choisissez une vidéo hébergée par Shopify. Elle se lance en muet & en boucle, avec l’image en repli.

Conversion & contentConversion & contenu

12. Languages & currency12. Langues & devise

Atelier is translated in English, French, Spanish and German. Publish languages in Settings → Languages to show the language selector. Add a market (e.g. EUR) in Settings → Markets to show currencies — both appear in the header automatically.

Atelier est traduit en anglais, français, espagnol et allemand. Publiez des langues dans Paramètres → Langues pour afficher le sélecteur de langue. Ajoutez un marché (ex. EUR) dans Paramètres → Marchés pour afficher les devises — les deux apparaissent dans l’en-tête automatiquement.

Conversion & contentConversion & contenu

13. Performance & accessibility13. Performance & accessibilité

Inlined critical CSS, preloaded fonts, lazy responsive images, fixed aspect ratios and a prioritized hero image. For accessibility: keyboard navigation, a skip link, visible focus rings, ARIA labels and reduced-motion support.

CSS critique en ligne, polices préchargées, images responsives en lazy-load, ratios fixes et image hero priorisée. Côté accessibilité : navigation clavier, lien d’évitement, focus visible, libellés ARIA et prise en charge du mouvement réduit.

Rebuild & helpRecréation & aide

14. Rebuild the demo identically14. Recréer la démo à l’identique

The theme references your store content by handle. To reproduce the demo exactly, recreate the collections, menus and metafields below, then keep the section settings as shipped.

Le thème référence votre contenu par identifiant (handle). Pour reproduire la démo exactement, recréez les collections, menus et métafields ci-dessous, puis conservez les réglages de section livrés.

14.1 — Collections

14.1 — Collections

Create these collections (Products → Collections). Handles must match.

Créez ces collections (Produits → Collections). Les handles doivent correspondre.

14.2 — Demo products

14.2 — Produits de démo

Eight products power the demo. Give each at least one image; add colour variants (with a variant image each) where relevant.

Huit produits alimentent la démo. Donnez à chacun au moins une image ; ajoutez des variantes de couleur (avec une image par variante) le cas échéant.

the-atelier-knit · the-gold-hoops · the-leather-belt · the-linen-shirt · the-mini-bag · the-wide-leg-trousers · the-wool-coat · the-cashmere-scarf

14.3 — Navigation menus

14.3 — Menus de navigation

Recreate these in admin → Navigation:

Recréez-les dans admin → Navigation :

14.4 — Metafield: product highlights

14.4 — Métafield : points forts produit

Define custom.highlights (List of single-line text) as in §9, then paste these list values per product. Format is icon|value|label.

Définissez custom.highlights (Liste de texte sur une ligne) comme au §9, puis collez ces valeurs par produit. Format icone|valeur|label.

the-atelier-knit        leaf|Merino|100% wool   ·  ruler|Relaxed|True to size  ·  sparkle|Hand-made|In atelier
the-gold-hoops          sparkle|Vermeil|Gold plated · leaf|Hypo|Skin-safe      ·  check|Light|Everyday
the-leather-belt        leaf|Leather|Full-grain ·  check|Brass|Buckle           ·  info|Italy|Made in
the-linen-shirt         leaf|Linen|European     ·  ruler|Regular|Fit            ·  sparkle|MOP|Buttons
the-mini-bag            leaf|Leather|Full-grain ·  ruler|Strap|Adjustable       ·  check|Lined|Cotton
the-wide-leg-trousers   ruler|High-rise|Fit     ·  leaf|Fluid|Drape             ·  check|Pockets|Side
the-wool-coat           leaf|Wool|Blend         ·  ruler|Tailored|Fit           ·  check|Lined|Fully
the-cashmere-scarf      leaf|Cashmere|Pure      ·  sparkle|Soft|Ultra           ·  ruler|Large|Generous

14.5 — Templates wiring

14.5 — Câblage des templates

• Home — 14 sections in the order listed in §4.
• Product — Product → Highlights → Trust badges → Tabs → Comparison → Values → Featured (“You may also like”, from new-arrivals) → Testimonials.
• Collection — Category tabs ON, Tabs menu = collection-tabs; 4 columns desktop.
• Featured sections — “New in” pulls new-arrivals; “Bestsellers” pulls knitwear.
• Theme style — “Atelier” (default).

• Accueil — 14 sections dans l’ordre du §4.
• Produit — Produit → Points forts → Badges de confiance → Onglets → Comparatif → Valeurs → En avant (« Vous aimerez aussi », depuis new-arrivals) → Témoignages.
• Collection — Onglets de catégories activés, Menu des onglets = collection-tabs ; 4 colonnes desktop.
• Sections en avant — « New in » utilise new-arrivals ; « Bestsellers » utilise knitwear.
• Style du thème — « Atelier » (par défaut).

Rebuild & helpRecréation & aide

15. Troubleshooting15. Dépannage

Rebuild & helpRecréation & aide

16. Support

For setup help, contact HB Studio Co through the support page — fill in the form and we’ll get back to you. Documentation: webcomsysteme.com/hbstudio/atelier.

Pour de l’aide à la configuration, contactez HB Studio Co via la page support — remplissez le formulaire et nous reviendrons vers vous. Documentation : webcomsysteme.com/hbstudio/atelier.