Ouvrir Shopify sans avoir préparé ses assets, c’est la garantie de perdre des heures et d’obtenir une boutique visuellement bancale. Logo en plusieurs formats, codes hex, typographies : tout doit être prêt avant de toucher à la configuration.
En 30 secondes
Avant de toucher à Shopify, prépare tous tes assets en amont : logos en plusieurs formats, palette de couleurs avec codes hex, typographies, liste de produits et arborescence de pages. Cette préparation évite de perdre des heures à chercher des fichiers au mauvais moment et garantit une boutique cohérente dès le départ.
Pourquoi préparer ses assets AVANT d’ouvrir Shopify
Jerome insiste sur ce point dès le début : « Le but c’est de t’aider un maximum, donc je te le rappelle, fais le taf. » Trop de créateurs de boutiques ouvrent Shopify sans rien avoir préparé, puis perdent des heures à chercher leurs fichiers, à recréer leur logo à la volée ou à improviser leurs couleurs. Résultat : une boutique incohérente visuellement et un temps de construction multiplié par deux.
La règle d’or : tout ce qui existe en dehors de Shopify doit être prêt avant de commencer à configurer Shopify.
Étape 1 — Logo, palette de couleurs et typographies
Le logo : les formats indispensables
Prépare ton logo en minimum 3 versions :
- Version symbole seul (icône sans texte) — utile pour le favicon et les petits espaces
- Version complète (symbole + nom de marque) — pour le header de ta boutique
- Chaque version déclinée en noir, couleur et blanc — selon le fond sur lequel il s’affiche
Format d’export : PNG avec fond transparent ou SVG. Évite le JPG qui impose un fond blanc.
Crée ton logo sur Canva ou Adobe Illustrator.
L’erreur de marge à ne jamais faire
- Ne laisse pas de grandes marges vides autour de ton logo lors de l’export
- Un logo avec trop de marge rend le menu Shopify anormalement haut — et tu ne peux pas le corriger facilement sans toucher au code
- Recadre au maximum autour du logo avant d’exporter
La palette de couleurs
Note tous tes codes couleur hexadécimaux (ex : #1A2B3C). Dans Canva, clique sur la couleur puis copie le code. Tu en auras besoin dans les nuanciers Shopify. Stocke-les dans un fichier texte ou un Google Doc dédié.
Les typographies
Note le nom exact de chaque police utilisée (ex : Futura, Montserrat, Playfair Display). Shopify propose une liste préétablie de polices. Si la tienne n’est pas disponible, il faudra l’intégrer manuellement via du code. Dans ce cas : télécharge d’abord le fichier de police (.ttf ou .woff) avant de demander de l’aide.
Étape 2 — La liste de produits structurée
Avant d’importer quoi que ce soit dans Shopify, prépare un fichier Excel ou Google Sheets avec les colonnes suivantes pour chaque produit :
- Titre du produit
- Prix de vente
- Stock disponible
- SKU (référence interne)
- Description
- Photos (noms de fichiers ou URLs)
- Collection / Catégorie (ex : Jupes, T-shirts, Accessoires)
Ce fichier te permettra d’importer tes produits en masse via CSV plutôt que de les saisir un par un. Un gain de temps considérable dès que tu dépasses 10 références.
Étape 3 — L’arborescence de pages
Définis à l’avance quelles pages tu vas créer. Les pages incontournables pour toute boutique Shopify :
- Page d’accueil
- Pages catégories / collections
- Page produit
- Page À propos
- Page Contact (avec formulaire)
- Pages légales : CGV, Politique de confidentialité, Mentions légales, Politique de retour
Pages optionnelles selon ton positionnement :
- Page FAQ
- Page Avis clients
- Page Tutoriels / Guide d’utilisation
Conseil de Jerome : si tu galères déjà avec la technique, reste sur les pages essentielles. Elles suffisent amplement pour lancer.
Pour les pages légales, Shopify propose des générateurs gratuits intégrés directement dans l’interface admin. Utilise-les comme base, puis adapte-les à ta situation.
Étape 4 — Structurer le menu Header et le Footer
Header (menu du haut)
Structure classique et efficace :
- Logo (lié à la page d’accueil)
- Liens vers les collections principales
- Pages secondaires (FAQ, Avis…)
- Page Contact
Footer (menu du bas)
Maximum 4 sections. L’essentiel à inclure :
- Section Liens : pages légales, catégories, Contact — obligatoire
- Copyright et mention « Tous droits réservés »
- Logos de paiement (Visa, Mastercard, PayPal…) pour rassurer les visiteurs
- Section Newsletter (optionnel mais recommandé)
- Section Marque : logo + courte description (optionnel)
Erreurs fréquentes à éviter absolument
- Commencer à configurer Shopify sans avoir ses logos prêts — tu perds du temps et tu fais des compromis visuels
- Exporter son logo avec de grandes marges blanches — le menu devient disproportionné
- Ne pas noter ses codes couleur — tu te retrouves à deviner des teintes approximatives
- Utiliser une police non disponible sur Shopify sans prévoir l’intégration manuelle
- Créer les pages légales à la dernière minute — elles sont obligatoires légalement avant toute vente
- Surcharger le header avec trop de liens — 5 à 6 liens maximum pour rester lisible
- Oublier les logos de paiement dans le footer — ils augmentent la confiance et le taux de conversion
Tableau récapitulatif des assets à préparer
| Asset | Format requis | Outil recommandé | Priorité |
|---|---|---|---|
| Logo symbole (noir/couleur/blanc) | PNG transparent ou SVG | Canva / Illustrator |  Indispensable |
| Logo complet (noir/couleur/blanc) | PNG transparent ou SVG | Canva / Illustrator | Indispensable |
| Favicon | PNG carré (32x32 ou 64x64) | Canva |  Important |
| Codes couleur hex | Fichier texte / Google Doc | Canva (pipette) | Indispensable |
| Nom des typographies | Fichier texte + fichier police | Google Fonts / Adobe | Indispensable |
| Liste produits | Excel / Google Sheets (CSV) | Excel / Google Sheets | Indispensable |
| Arborescence de pages | Document texte | Notion / Google Doc | Important |
Action cette semaine
- Créer un dossier dédié à ta boutique avec tous tes assets organisés par sous-dossiers (logos, couleurs, polices, photos produits)
- Exporter ton logo en 6 versions minimum : symbole + complet, chacun en noir / couleur / blanc, format PNG fond transparent
- Vérifier que les marges autour du logo sont réduites au minimum avant l’export
- Créer ton favicon (version carrée du symbole)
- Copier tous tes codes couleur hexadécimaux dans un fichier texte
- Noter le nom exact de chaque police utilisée et télécharger les fichiers de fonte
- Créer ton fichier Excel produits avec les colonnes : Titre / Prix / Stock / SKU / Description / Photos / Collection
- Lister toutes les pages de ta boutique et décider lesquelles tu crées au lancement
- Définir la structure de ton header (5-6 liens max) et de ton footer (4 sections max)
- Générer tes pages légales via l’outil intégré Shopify et les adapter à ta situation
Pour aller plus loin
Leçon interactive complète (quiz, transcription, notes, chapitres) : https://app.cockpitlab.io/fr/formations/shopify/identite-visuelle-shopify-logo-palette-de-couleurs-et-typographie-video-16-41
Vidéo originale sur YouTube : Regarder
Chaîne cockpitLAB : Abonne-toi pour les prochaines formations
Discussion
Tu prépares tes assets en amont ou tu improvises au fur et à mesure ? Qu’est-ce qui t’a pris le plus de temps ?
N’hésite pas à poser tes questions ou partager ton expérience ci-dessous — la communauté te répond sous 24h en général.