Documentation Hangrail

10Installer le thème

1. Dans l’admin Shopify, ouvrez Boutique en ligne > Thèmes.
2. Choisissez Ajouter un thème > Importer un fichier .zip, puis hangrail.zip.
3. Cliquez sur Personnaliser pour ouvrir l’éditeur.
4. Dans la section Portant de l’accueil, choisissez votre nouvelle collection : quelques pièces sont suspendues sur le portant. En dessous, la boutique continue comme un site classique : choisissez une collection dans Collection en vedette et les pièces d’une tenue dans Shop the look.
5. Cliquez sur Publier quand tout est prêt.

Tant qu’aucun produit n’est choisi, les sections montrent des vêtements dessinés sur le portant : la boutique a déjà son allure dès l’installation.

20Afficher un produit en mockup

Un produit passe en mockup dès qu’il porte l’étiquette (tag) mockup:<modèle>, par exemple mockup:hoodie. Sans cette étiquette, il s’affiche avec ses photos.

Le visuel imprimé

• Ajoutez le visuel (logo, motif, illustration) comme image du produit, de préférence en .png à fond transparent.
• Dans le texte alternatif de l’image, ajoutez [front] pour le recto ou [back] pour le verso. Exemple : Logo étoile [front].
• Sans marqueur, la première image du produit sert de visuel recto.
• Les visuels restent dans la galerie de la fiche produit, après le mockup et les photos.

Placement et taille

Un vêtement taillé dans votre tissu

Pour un tissu imprimé (toile de Jouy, carreaux, fleurs…), photographiez un morceau de tissu à plat, ajoutez-le comme image produit avec [front] (et [back]) dans le texte alternatif, et ajoutez le tag print:fabric (et print-back:fabric). La photo se répète sur tout le vêtement, et les coutures, poches et ombres restent visibles. Utilisez une couleur blanche ou claire pour ces variantes. print-size règle la taille du motif.

Texture du tissu

Ajoutez texture:corduroy (velours côtelé), texture:knit (maille), texture:fleece (polaire), texture:denim, texture:waffle (nid d’abeille), texture:lace (dentelle) ou texture:satin pour donner au mockup l’aspect de son tissu. Les bonnets sont toujours en maille.

Vos propres photos sur le cintre

Les produits sans tag mockup: affichent leur photo, et une photo détourée s’accroche toute seule au cintre. Voir Photos sur le cintre.

Sur les pantalons et shorts, chest correspond à la cuisse et center à la jambe. Sur le tote bag, ce sont un petit et un grand visuel.

La couleur du vêtement

Le mockup prend la couleur de la variante choisie. Créez une option Couleur et donnez une pastille (swatch) à chaque valeur dans l’admin. Sans pastille, le thème essaie le nom anglais de la couleur (black, navy…), puis la couleur par défaut réglée dans Paramètres du thème > Couleurs. Les noms d’option reconnus comme couleur se règlent dans Paramètres du thème > Portant et mockups.

12345

1. 1Le mockup prend la couleur choisie
2. 2Le sélecteur Recto / Verso
3. 3Les coloris en étiquettes kraft
4. 4Les tailles en boutons
5. 5Ajout au panier et paiement accéléré

30Photos sur le cintre

Tout produit sans mockup peut afficher sa propre photo. Quand la photo a un fond transparent, Hangrail la suspend comme un vrai vêtement : sur le portant, sur la page produit, dans l’aperçu rapide et dans Shop the look. Dans les grilles de produits, la photo s’affiche entière, sans cintre. Rien à régler : le thème lit la photo et choisit l’accroche.

En quatre étapes

1. 1
   Photographiez le vêtement seul, à plat ou sur mannequin invisible, sur un fond uni.
2. 2
   Dans l’admin Shopify, ouvrez l’image, choisissez Arrière-plan de couleur › Transparent, puis Enregistrer en tant que nouveau. Vous obtenez un PNG.
3. 3
   Placez ce PNG en première image du produit. N’ajoutez pas de tag mockup:.
4. 4
   C’est tout : le vêtement s’accroche tout seul, partout dans la boutique.

Ce que le thème lit

Hangrail regarde la photo en tout petit et dessine un cintre pour elle. Le crochet sort du col ; la barre passe derrière le vêtement et s’arrête à l’intérieur de sa silhouette, elle ne se voit qu’entre deux bretelles. Une ceinture plate, ou un type de produit comme Pantalon, Jean ou Jupe, indique un bas : deux pinces tiennent les bords de la ceinture. Puis la photo est remontée pour que le haut du crochet touche la barre.

Trois façons d’accrocher

• CintreHauts, robes, vestes, manteaux et soutiens-gorge. Entre deux bretelles, la barre se voit.hanger:bar
• PincesPantalons, jeans, jupes et shorts, reconnus par le type de produit ou une ceinture plate.hanger:clip
• CrochetCasquettes, chapeaux, bonnets et sacs, reconnus par le nom du produit dans 19 langues.hanger:hook

Le thème choisit pour vous. Pour imposer un choix, ajoutez le tag au produit.

Taille sur le portant

Côte à côte, chaque photo est dimensionnée pour garder les vraies proportions : une robe longue pend plus bas qu’un blazer, un sac est plus petit qu’un manteau. Les vêtements sont suspendus en taille réelle. Casquettes, chapeaux, bonnets et sacs le sont à 70 % : réglez-le dans Paramètres du thème › Portant et mockups › Taille des casquettes, chapeaux et sacs (100 % les garde en taille réelle). Pour changer la taille d’un seul produit, ajoutez un tag comme size:75, de 30 à 150 : une jupe enfant en size:75, un manteau long en size:110.

Les photos qui marchent le mieux

• Ça marcheÀ platFond retiré.
• Ça marcheMannequin invisibleFond retiré.
• À éviterPorté par un mannequinLe détourage garde le corps, qui serait suspendu aussi.
• À éviterJPG avec fondAffiché encadré, tenu par deux pinces.

Comptez au moins 1200 px sur le grand côté, gardez tout le vêtement dans le cadre (manches et ourlets compris), recadrez au plus près et éclairez toute la collection de la même façon.

Profil, dos et rotation

Des images en plus du même produit lui donnent du mouvement. Signalez-les dans leur texte alternatif (dans l’admin Shopify, ouvrez l’image et modifiez son texte alternatif) :

Ajoutez le nom du coloris pour réserver une image à un coloris, par exemple Blazer [side] Noir. Photographiez profil et dos comme la face (même lumière, même distance) et détourez-les de la même façon. Pour une vidéo de rotation, filmez ou générez 2 à 4 secondes sur un fond clair et uni, le vêtement sur son cintre en haut du cadre ; elle commence de profil et finit de face. Les balises ne sont pas lues aux clients.

Le réglage

Paramètres du thème › Portant et mockups › Photos des produits sans mockup : Automatique (par défaut) accroche les photos à fond transparent et encadre les autres. Détouré sur cintre les accroche toujours, Photo encadrée les encadre toujours.

40Le portant

Le portant est la signature du thème. On le retrouve dans la section Portant, dans les vues de la page collection et dans Produits associés.

• Espacé : les pièces pendent côte à côte. Celle survolée s’avance et les autres s’estompent.
• Rangé (3D) : les pièces sont serrées de profil. Celle survolée pivote et s’avance, ses voisines s’écartent en éventail et reculent avec la distance, et la perspective suit la souris. Sur téléphone, la pièce au centre de l’écran se tourne vers le client quand il fait défiler.

Un clic sur une pièce ouvre une vue rapprochée avec son verso et ses coloris en étiquettes. Voir la disponibilité ouvre l’aperçu rapide pour choisir la taille et ajouter au panier.

Régler la section

• Mise en page : le titre à gauche, ou centré au-dessus du portant avec un sous-titre au-dessus. La mise en page centrée place le sélecteur de vue, un court Texte sous le portant et le lien vers la collection sur une ligne sous le portant.
• Forme du portant : droit, ou courbé, qui fléchit un peu au milieu comme un vrai portant. Chaque vêtement pend au point de la courbe juste au-dessus.
• Étiquettes de prix : une petite étiquette kraft avec le prix pend à chaque crochet. En vue rangée, seule la pièce choisie montre la sienne. Les prix soldés s’écrivent dans la couleur des soldes.
• Image d’arrière-plan : un mur, un studio ou un paysage derrière le portant, avec un Voile de la couleur du jeu de couleurs de la section pour garder le texte lisible.

Les vues de profil, les vues de dos et les vidéos de rotation viennent des images du produit : voir Photos sur le cintre.

50Sections

60Les filtres de collection

Vos clients trient une collection comme en boutique. Les filtres viennent de l’application gratuite Search & Discovery de Shopify ; le thème les habille à sa façon.

12345

1. 1La disponibilité en interrupteur
2. 2Une recherche dans les longues listes
3. 3Les tailles en boutons, avec leur nombre
4. 4Le tri
5. 5La vue en grille ou en liste

• Trois dispositions dans Collection › Disposition des filtres : une barre latérale qui suit le défilement, un tiroir, ou une barre horizontale de menus déroulants au-dessus des produits. Sur téléphone, les filtres s’ouvrent toujours dans un tiroir.
• Prix : un curseur sur mètre ruban, deux champs et des fourchettes en un clic.
• Couleurs : chaque valeur affiche sa pastille sur une étiquette. Donnez une pastille à chaque valeur de votre option de couleur dans l’admin Shopify.
• Filtres actifs : ils s’affichent en étiquettes au-dessus des produits et se retirent en un clic.

70Paramètres du thème

Toutes les couleurs du thème viennent des schémas de couleurs : en changer un met à jour chaque section qui l’utilise, cintres et étiquettes compris.

Chaque schéma règle 13 couleurs : fond, texte, boutons et leur texte, panneaux et leur texte, bordures, barre et cintres, étiquettes et leur texte, mètre ruban et son texte, promotions.

• Typographie : polices des titres, du texte et des étiquettes, tailles, titres en capitales.
• Mise en page : largeur de page, marges, arrondis des boutons, champs et cartes, fil d’Ariane sur les pages produit et collection.
• Portant et mockups : largeur des vêtements, style des photos (détouré ou encadré), finition du cintre (bois, acier ou noir), profondeur 3D et ombres (mur éclairé, ombres portées douces, vêtements qui pivotent vers le pointeur, étiquettes qui bougent doucement), balancement au survol, noms d’option reconnus comme couleur.
• Cartes produit : pastilles de coloris à essayer sur la carte, verso au survol, aperçu rapide, marque.
• Panier : tiroir ou page, note de commande, mètre ruban de livraison offerte et seuil, logos de paiement sous le bouton de paiement.

80Fiche produit

La colonne d’informations se compose de blocs à réordonner : titre, marque, prix, SKU, choix des variantes, quantité, compteur de stock, boutons d’achat, description, texte, onglet repliable, guide des tailles, partage, produits complémentaires, Liquid personnalisé et blocs d’applications.

• Les cartes-cadeaux peuvent être envoyées à un destinataire, avec message et date d’envoi.
• Abonnements, prix unitaires et paiement en plusieurs fois Shop Pay pris en charge.
• Le retrait en magasin se met à jour selon la variante choisie.
• Vidéos et modèles 3D dans la galerie, avec Voir dans votre espace sur les appareils compatibles.
• Les règles de quantité (minimum, maximum, lots) et les prix dégressifs des catalogues B2B s’affichent sous le choix de quantité et suivent la variante choisie.

90Fonctions qui font vendre

Les thèmes mode qui se vendent le mieux partagent quelques fonctions qui transforment une visite en commande. Hangrail les intègre, dans son style de showroom. Chacune est facultative.

Compteur de stock : le nombre affiché est votre vrai stock Shopify. Il n’apparaît que pour les variantes dont Shopify suit le stock et qui ne peuvent pas être vendues en rupture (Continuer à vendre en cas de rupture de stock désactivé). Les produits sans suivi n’affichent rien.

Compte à rebours : saisissez la date de fin au format 2026-12-24 18:00, dans le fuseau horaire de la boutique (Paramètres > Général). Ne comptez à rebours que vers de vraies dates : un minuteur qui repart à chaque visite trompe les clients et est interdit par le Theme Store.

100Panier et paiement

Le panier s’ouvre en tiroir, ou sur une page dédiée (Paramètres du thème > Panier).

• Quantités mises à jour sans recharger la page.
• Réductions automatiques et codes promo affichés par article et sur le total.
• Note de commande facultative et mètre ruban « livraison offerte » avec seuil réglable.
• Boutons de paiement accéléré (Shop Pay, Apple Pay, Google Pay…).

La page de paiement est gérée par Shopify dans Paramètres > Paiement.

110Langues et devises

Hangrail est traduit en 19 langues, pour les clients comme pour l’éditeur du thème :

• Englishen
• Françaisfr
• Deutschde
• Españoles
• Italianoit
• Nederlandsnl
• Português (Brasil)pt-BR
• Português (Portugal)pt-PT
• Svenskasv
• Danskda
• Norsk bokmålnb
• Suomifi
• Polskipl
• Češtinacs
• Türkçetr
• 日本語ja
• 한국어ko
• 简体中文zh-CN
• 繁體中文zh-TW

1. Ajoutez des langues dans Paramètres > Langues. Les textes du thème changent automatiquement.
2. Traduisez votre propre contenu (produits, collections, textes des sections) avec l’application gratuite Translate & Adapt de Shopify.
3. Affichez le sélecteur de langue dans l’En-tête.

Le sélecteur de pays liste tous les pays et toutes les devises activés dans Paramètres > Markets, avec un champ de recherche. Shopify convertit les prix automatiquement. Les moyens de paiement acceptés s’affichent dans le pied de page avec leurs logos officiels.

120Accessibilité et performance

• Tout fonctionne au clavier, avec un focus visible.
• Les animations s’arrêtent si l’appareil demande de réduire les mouvements. Le bandeau mètre ruban a un bouton pause.
• Les images se chargent à la bonne taille pour chaque écran. Les mockups sont dessinés en code, sans image à télécharger.

130Questions fréquentes

Le mockup n’apparaît pas.

Vérifiez l’étiquette mockup: (sans espace) et le nom du modèle dans le tableau.

Le visuel est trop petit.

Recadrez le .png au plus près du dessin, ou ajoutez print-size:140.

Le vêtement reste blanc.

Ajoutez une pastille de couleur à la valeur d’option dans l’admin.

Je veux des photos plutôt qu’un mockup.

Retirez l’étiquette mockup:. Le style des photos sur le portant se règle dans Paramètres du thème > Portant et mockups.

Le compteur de stock ne s’affiche pas.

Dans les variantes du produit, activez Suivre la quantité et désactivez Continuer à vendre en cas de rupture de stock. Le compteur s’affiche à partir du seuil réglé dans le bloc.

Les filtres n’apparaissent pas.

Créez-les dans l’application Search & Discovery de Shopify, puis vérifiez que Activer le filtrage est coché dans la section Collection.

Mes clients peuvent-ils déposer leur visuel ?

Pas avec le thème seul : il affiche les visuels que vous ajoutez dans l’admin. La personnalisation par le client relève d’une application Shopify.

140Assistance

Une question sur Hangrail ? Écrivez à ibradventure.company@gmail.com. Réponse sous deux jours ouvrés. Indiquez l’adresse de votre boutique et, si quelque chose s’affiche mal, joignez une capture d’écran.

150Historique des versions