Configurer TOGE

TOGE est un thème pour les petites marques de créateurs : une histoire par produit, des notes sur les tissus, des photos de terrain et des drops. Un thème ne transporte que sa mise en page et ses textes d’exemple. Vos produits, photos, menus et métachamps vivent dans votre boutique, si bien qu’une installation fraîche paraît vide. Ce guide passe en revue ce qu’il faut ajouter, dans l’ordre qui fait la plus grande différence.

Tout ce qui suit se fait dans l’interface administrateur Shopify. Aucun code n’est nécessaire. Lorsqu’une étape relève du fonctionnement ordinaire de Shopify, ce guide renvoie au centre d’aide Shopify au lieu de la répéter.

1. Termes utilisés dans ce guide

Terme	Signification
Éditeur de thème	L’écran où vous modifiez les réglages et le contenu du thème : Boutique en ligne → Thèmes → Personnaliser.
Section	Une bande d’une page dans l’éditeur de thème (image d’accueil, nouveautés, pied de page…). Chacune a ses propres réglages.
Modèle	La mise en page qu’utilise une page. TOGE fournit des modèles pour les pages À propos, Assistance, Contact et politiques. Vous choisissez le modèle d’une page dans l’éditeur de page, sous « Modèle de thème ».
Identifiant (handle)	La dernière partie de l’URL d’une page ou d’une collection, comme `about-us`. Shopify le crée à partir du titre ; vous pouvez le modifier dans l’encadré « Référencement sur les moteurs de recherche » de l’éditeur de page. Le thème trouve certaines pages par leur identifiant.
Métachamp	Un champ supplémentaire que vous ajoutez aux produits, collections ou articles de blog, sous Paramètres → Données personnalisées. Le thème en lit certains.
Métaobjet	Un enregistrement que vous définissez vous-même, avec ses propres champs, et vers lequel les produits peuvent pointer. TOGE en utilise un pour les tissus.
Drop	La sortie d’un produit à une date fixée. Avant cette date, la page produit affiche la date au lieu d’un bouton de panier.

2. Les dix premières minutes

Importer le thème : Boutique en ligne → Thèmes → Ajouter un thème → Importer un fichier zip. Laissez-le non publié jusqu’à ce que la page d’accueil vous convienne ; « Personnaliser » permet de prévisualiser un thème non publié.
Logo : Éditeur de thème → En-tête. Importez votre image de logo, ou laissez vide pour afficher le nom de la boutique en texte. (La marque en forme de montagne sur la page d’accueil est le logo de TOGE. Pour la remplacer, modifiez snippets/logo.liquid ou désactivez « Logo sur l’image » dans la section Image d’accueil.)
Menu principal : Contenu → Menus → Menu principal. L’en-tête affiche le menu que vous choisissez dans la section En-tête (par défaut : main-menu). Les menus imbriqués s’ouvrent en menus déroulants, jusqu’à trois niveaux.
Image d’accueil : Éditeur de thème → Image d’accueil. Ajoutez une photo large (2:1, 2400 px de large suffisent amplement). Ajoutez une photo 4:5 distincte pour les téléphones si le cadrage ne convient pas. Si la photo est claire, réglez « Couleur du texte sur la photo » sur Encre.

Vous avez déjà une boutique qui a l’air finie.

3. Paramètres du thème

Éditeur de thème → Paramètres du thème. Ils s’appliquent partout.

Réglage	Ce qu’il fait
Couleurs	Deux jeux de couleurs : le jeu 1 est clair, le jeu 2 est sombre. Des sections comme la bande newsletter choisissent l’un des deux. Chaque jeu a des couleurs d’arrière-plan, de texte, de bordure, de surface, d’accent, de lien et de bouton.
Typographie	Police du corps de texte et police des titres. Chacune est fournie en graisses normale, medium et grasse. Toute police Shopify convient.
Mise en page	Largeur maximale de la page et marge sur les côtés.
Arrondi des champs	Rayon des coins des champs et des boutons.
Favicon	La petite icône dans l’onglet du navigateur. Carrée, 32 px ou plus.

4. Menus et pages que le thème recherche

Le pied de page et les pages d’assistance retrouvent les éléments par identifiant (handle). Créez-les avec ces identifiants et ils apparaissent d’eux-mêmes. Omettez-les et cette partie ne s’affiche tout simplement pas.

Quoi	Où	Identifiant
Colonnes de menu du pied de page	Contenu → Menus	n’importe quels menus ; choisissez-les dans Pied de page → blocs
Journal	Articles de blog	blog `news`
Page À propos	Pages, modèle `page.about`	`about-us`
Page Assistance	Pages, modèle `page.support`	`support`
Page Contact	Pages, modèle `page.contact`	`contact`
Pages légales affichées dans le pied de page	Paramètres → Politiques	Confidentialité, Conditions, Remboursement, Expédition
Pages légales supplémentaires (Japon)	Pages, modèle `page.policy`	`tokushoho`, `cancellation`

Pour créer une page, allez dans Boutique en ligne → Pages → Ajouter une page. Donnez-lui un titre, choisissez le modèle sous « Modèle de thème » à droite, et vérifiez l’identifiant sous « Référencement sur les moteurs de recherche ».

Les pages légales proviennent de Paramètres → Politiques ; le pied de page renvoie vers celles que vous avez remplies.

tokushoho et cancellation sont des pages que la loi japonaise exige des boutiques en ligne. Si vous ne vendez pas au Japon, ignorez-les. Le modèle page.policy affiche n’importe quelle page dans le même style que les politiques.

Les pages À propos, Assistance et Contact sont construites à partir de sections : leurs textes et photos se modifient donc dans l’éditeur de thème, pas dans la page elle-même. Le formulaire de contact envoie les messages à l’adresse e-mail d’expéditeur de la boutique. La bande newsletter ajoute les abonnés dans Clients avec le tag newsletter.

5. Page d’accueil

Section	Ce qu’il lui faut
Image d’accueil	Une photo (voir ci-dessus). Le titre, le texte d’introduction et le lien sont des réglages de la section.
Bande à la une	Des collections dont le métachamp Afficher à la une sur l’accueil est activé (voir §8). Avec une collection, c’est une bande fixe ; de deux à cinq, elle devient un carrousel. Sans aucune, la section utilise ses propres réglages de texte et de photo.
Nouveautés	Choisissez une collection dans la section. Trois produits sur ordinateur, quatre sur téléphone.
Histoire	Une photo, ou une courte vidéo en boucle (mp4 importé sous Contenu → Fichiers ; elle est lue sans son). Le texte se place sur l’image ; désactivez « Texte sur l’image » pour le mettre en dessous.
Journal	Choisissez le blog. Les trois derniers articles.
Consultés récemment	Se remplit tout seul depuis le navigateur du visiteur. Rien à régler.

Vous pouvez ajouter d’autres sections à la page d’accueil avec « Ajouter une section » : Produit en vedette (un produit avec ses photos, ses options et son bouton de panier), FAQ, Guide d’assistance, Formulaire de contact, ainsi qu’une autre Histoire, Collection à la une, Nouveautés ou Journal. La bande newsletter fait partie du pied de page : elle s’affiche donc sur toutes les pages.

6. Produits

La page produit fonctionne avec un produit ordinaire : titre, prix, photos, options. Chaque élément ci-dessous ajoute une partie de plus à la page. Tout est facultatif, et la page masque ce qui est vide.

Ce qui figure sur la page

De haut en bas : photo principale et accroche → nom, options, prix, panier et accordéon des détails → Se marie bien avec → photos du produit → histoire → chapitre tissu → note → photos de terrain → produits associés → consultés récemment. Tout ce qui se trouve à partir de « Se marie bien avec » est une section à part dans l’éditeur de thème : vous pouvez donc la déplacer ou la supprimer.

La section Page produit a des réglages qui contrôlent la partie supérieure :

Bloc Couleur et taille : quelle option est la couleur et laquelle est la taille (voir ci-dessous), le seuil « Stock faible », le libellé de la taille et une page de guide des tailles.
Bloc Quantité : quantité maximale par commande (0 signifie sans limite) et une note sous le champ.
Bloc Panier : boutons de paiement dynamique (Shop Pay et autres) et formulaire de destinataire pour les cartes-cadeaux.
Blocs Accordéon : chacun est une ligne des détails. Une ligne peut afficher une politique de la boutique, la description du produit, le guide d’entretien, le tableau des tailles, ou la matière et l’origine.

Options et photos

Couleur et taille sont repérées par position, pas par nom, donc l’option peut s’appeler Couleur, Color ou カラー. Réglez « Position de l’option couleur » et « Position de l’option taille » (1 à 3) dans la section Page produit si les vôtres diffèrent de 1 et 2.
Une troisième option (longueur, coupe…) s’affiche aussi sous forme de boutons. Rien à régler.
Les pastilles de couleur utilisent la photo de la première variante de chaque couleur (portrait 4:5, 1080 × 1350 convient bien). Donnez la même photo à toutes les variantes d’une couleur.
Photo principale : la grande image en haut est le métachamp custom.hero_image, sinon la première photo du produit. Elle est pensée comme l’image « d’univers », pas comme une photo produit.
Galerie : les photos du produit qui ne servent pas de pastilles de couleur sont disposées sous l’histoire. Les vidéos, les liens YouTube et Vimeo et les modèles 3D ajoutés au produit s’y affichent aussi.

Métachamps lus par la page produit

Créez-les sous Paramètres → Données personnalisées → Produits → Ajouter une définition. Donnez à la définition le nom que vous voulez ; ce qui doit correspondre, c’est l’espace de noms et la clé (saisis sous la forme namespace.key dans le formulaire de définition) et le type. Dès qu’une définition existe, chaque produit reçoit un champ correspondant en bas de sa page de modification.

Espace de noms.clé	Type	Affiché comme
`descriptors.subtitle`	Texte sur une ligne (standard)	L’accroche en une ligne sous la photo principale
`descriptors.care_guide`	Texte multiligne (standard)	« Entretien » dans l’accordéon des détails
`custom.hero_image`	Fichier (image)	Photo principale en haut ; aussi la photo au survol sur les fiches produit
`custom.hero_video`	Fichier (vidéo)	Lue à la place de la photo principale, sans son, en boucle
`custom.gender`	Texte sur une ligne	Petit libellé à côté du nom du produit. Il renvoie vers la collection du même identifiant, si cette collection contient des produits
`custom.gender_collection`	Référence de collection	Vers où le libellé renvoie à la place, si les identifiants diffèrent
`spec.material`	Texte sur une ligne	« Matière » dans les détails
`spec.origin`	Texte sur une ligne	« Fabriqué en » dans les détails
`spec.size_table`	Texte multiligne	Tableau des tailles. Une ligne par rangée, cellules séparées par `\|`. La première ligne est l’en-tête : `Taille \| Longueur \| Poitrine \| Manche`, puis `S \| 66 \| 50 \| 20`. Il est imprimé tel que saisi, sans transposition
`color.names`	Texte sur une ligne	Noms affichés des couleurs, sous forme de paires `CODE:Name` séparées par `\|` : `SUMI:Encre\|SAND:Sable`. Le code est la valeur de l’option
`drop.mode`	Texte sur une ligne	`pre` pour un drop pas encore ouvert : le panier est masqué et le panneau « me prévenir » s’affiche à la place
`drop.next_at`	Date	Date du prochain drop, affichée sur le panneau « me prévenir »
`drop.label`, `drop.qty`, `drop.note`	Texte sur une ligne	Libellé du bouton et courte ligne en dessous, avant un drop
`drop.end_variants`	Texte sur une ligne	Combinaisons arrêtées sous la forme `Color / Size`, séparées par `\|` : `SAND / XS\|SAND / XL`
`nav.parent`	Texte sur une ligne	Identifiant de la collection à afficher dans le fil d’Ariane (voir ci-dessous)
`story.gallery`	Liste de fichiers (images)	Photos « Field » : la bande horizontale de photos lifestyle
`story.fabric`	Référence de métaobjet → Tissu	Le chapitre tissu (voir §7)

La plupart existent aussi comme réglages de la section Page produit (image principale, accroche, genre, matière, origine, noms des couleurs, combinaisons arrêtées, statut de vente). Le réglage de la section s’applique à tous les produits et le métachamp a priorité sur lui : une boutique avec un ou deux produits peut donc se passer entièrement de métachamps.

Le fil d’Ariane au-dessus du nom du produit est déterminé dans cet ordre : tags bread1-apparel, bread2-tops (le thème cherche des collections avec les identifiants apparel et tops ; sans elles, les mots sont affichés sans lien) → le métachamp nav.parent → la première collection à laquelle appartient le produit. Le tag bread1- décide aussi quels produits apparaissent dans « Produits associés ».

L’histoire elle-même est la description du produit. Des titres (h3), des paragraphes et des images suffisent ; le thème ajoute le sommaire à droite à partir des titres.

7. Chapitre tissu (métaobjets)

Le chapitre tissu est une partie de la page produit qui raconte l’histoire d’un tissu : nom et introduction, une rangée de grands nombres (poids, épaisseur…), photos de l’endroit et de l’envers, trois étapes « comment ça marche » et des graphiques de comparaison. C’est un métaobjet par tissu, partagé entre les produits. Seul le nom est obligatoire ; chaque autre partie apparaît dès que son champ est rempli.

Créez les définitions sous Paramètres → Données personnalisées → Métaobjets avec ces clés de champ. Les noms, et le nom de la définition elle-même, sont libres ; le thème suit la référence story.fabric du produit et lit les champs par clé. Créez d’abord les petites définitions, car les plus grandes y font référence : Rangée de tissu → Graphique de tissu, Étape de tissu, Statistique de tissu → Tissu.

Tissu (celui que vous attachez aux produits)

Clé	Type
`name`, `eyebrow`, `headline`	Texte sur une ligne
`lead`	Texte enrichi
`stats`	Liste de Statistique de tissu
`views_heading`, `views_note`, `face_title`, `face_tag`, `back_title`, `back_tag`	Texte sur une ligne
`views_body`, `face_body`, `back_body`	Texte enrichi
`face_image`, `back_image`	Fichier (image)
`how_heading`	Texte sur une ligne
`how_body`	Texte enrichi
`steps`	Liste de Étape de tissu
`charts`	Liste de Graphique de tissu
`note`	Texte multiligne

Statistique de tissu : value, unit, label, prefix (tous sur une ligne). Affichée comme la rangée de grands nombres, ex. value 90, unit g/㎡, label Poids.

Étape de tissu : image (fichier), title (une ligne), body (texte enrichi). Trois étapes composent la bande « comment ça marche ».

Graphique de tissu : title (une ligne), body (texte enrichi), axes (liste de textes sur une ligne), rows (liste de Rangée de tissu), note (une ligne). Avec axes renseigné, le graphique est un tableau de notation à cinq points ; sans, ce sont des barres horizontales.

Rangée de tissu : label (une ligne), value (décimal), display (une ligne, ce qu’il faut imprimer à la place de la valeur brute, ex. environ 30 min), scores (liste d’entiers, un par axe, de 1 à 5), highlight (booléen, marque votre propre tissu).

Les graphiques s’animent lorsqu’ils entrent dans la zone visible. Les nombres défilent depuis zéro.

8. Collections

Sous Paramètres → Données personnalisées → Collections :

Espace de noms.clé	Type	Affiché comme
`toge.home_feature`	Vrai/faux	Mettre cette collection sur la bande à la une de l’accueil
`toge.feature_heading`	Texte sur une ligne	La grande ligne sur la bande et en haut de la page de collection
`toge.feature_image`	Fichier (image)	Photo de la bande, si différente de l’image de la collection
`toge.feature_video`	Fichier (vidéo)	Lue sur la bande à la place de la photo
`nav.parent`	Texte sur une ligne	Identifiant de la collection parente, pour le fil d’Ariane (`all` pour « tous les produits »)

La description de la collection est le court texte sous le titre. Les filtres, le tri et le nombre de produits par page sont des réglages de la section Collection.

9. Barre d’annonce

La barre tout en haut est pilotée par les articles de blog : vous pouvez donc écrire, programmer et retirer des annonces comme n’importe quel article.

Sous Paramètres → Données personnalisées → Articles de blog, créez toge.announce (vrai/faux) et toge.announce_text (texte sur une ligne).
Sur l’article, activez announce. La barre affiche announce_text, ou le titre de l’article, et renvoie vers l’article.
L’article le plus récent portant le marqueur l’emporte. Sans aucun, il n’y a pas de barre.

Les visiteurs peuvent fermer la barre. Elle reste fermée sept jours, ou jusqu’à ce que le texte change.

10. Ce qui apparaît tout seul

Ces parties du thème suivent les paramètres de votre boutique. Il n’y a rien à régler dans le thème.

Partie	Apparaît quand
Sélecteur de pays et de langue (pied de page)	La boutique a plus d’un marché ou plus d’une langue
« Taxes incluses » à côté des prix	Les prix incluent les taxes (Paramètres → Taxes et droits de douane).
Note de livraison sous le prix	Le marché a un métachamp `custom.shipping_note` (texte ou montant)
Disponibilité du retrait en magasin sur la page produit	Un emplacement propose le retrait en magasin et le produit y est en stock.
Paiement échelonné Shop Pay	La boutique est éligible à Shop Pay Installments
Formulaire de destinataire de carte-cadeau	Le produit est une carte-cadeau.
Follow on Shop (pied de page)	Shop Pay est activé et le réglage correspondant de la section Pied de page est activé
Icône de compte dans l’en-tête	Les comptes clients sont activés (Paramètres → Comptes clients)
Suggestions de recherche pendant la saisie	La langue de la boutique fait partie de celles que la recherche prédictive de Shopify prend en charge (pas encore le japonais)

11. Tailles d’image

Où	Taille
Image d’accueil	2:1, 2400 px de large. Les téléphones la recadrent en 4:5, ou utilisent l’image mobile distincte
Histoire de l’accueil	2:1, 2400 px de large. Les téléphones la recadrent en 4:5
Bande à la une des collections	16:9, 1600 px de large ou plus. Les téléphones la recadrent en 4:3
Photo principale du produit (`custom.hero_image`)	3:2, 2000 px de large. Les téléphones la recadrent en 4:5
Photos des variantes (pastilles de couleur)	4:5, 1080 × 1350. Les fiches produit et la galerie affichent du 4:5 ; la pastille de couleur recadre un carré au centre
Photos du produit (galerie)	4:5
Photos de terrain (`story.gallery`)	2:3, portrait
Endroit et envers du tissu	Libre, mais le même format pour les deux ; 1200 px de large
Étapes du tissu	Dessins sur fond blanc ; le blanc se fond dans la page
Image d’article de blog	4:3 dans la liste du journal, 1600 px de large ou plus
Favicon	Carrée, 32 px ou plus

Shopify redimensionne tout pour chaque écran : plus grand ne pose donc pas de problème.

12. Langues

Tous les textes d’exemple du thème sont en anglais. Les libellés propres au thème (boutons, panier, recherche) et l’éditeur de thème sont fournis en anglais, japonais, allemand, français, espagnol, portugais (Brésil), italien, chinois traditionnel, chinois simplifié et coréen ; la boutique suit la langue du store.

Vos propres contenus, comme les textes des sections, les produits et les pages, se traduisent avec l’application gratuite Translate & Adapt de Shopify. Application

13. Mettre à jour le thème

Quand une nouvelle version sort, Boutique en ligne → Thèmes affiche un avis de mise à jour sur le thème. La mise à jour conserve vos réglages de l’éditeur de thème et vos contenus. Les modifications du code du thème ne sont pas reprises : notez donc les changements que vous avez faits avant de mettre à jour.

14. Ce que le thème n’apporte pas

Photos et vidéos. Les thèmes Shopify ne peuvent pas contenir de médias, et les photos de démonstration sont sous licence pour la démo. Là où une photo manque, vous voyez un dessin de remplacement gris.
Produits, articles, pages, définitions de métachamps. Ce sont des données de la boutique. Ce guide liste tout ce que le thème peut utiliser.
Applications. Aucune n’est nécessaire. Translate & Adapt ne sert que pour des langues supplémentaires ; une application d’abonnement, seulement si vous vendez des abonnements.