Kingsbell sépare les réglages globaux des décisions locales de chaque section. Utilisez les réglages globaux pour la cohérence de la boutique et les réglages de section pour le contenu et la composition.
Marque
Configurez logo principal, logo inversé, largeur de 80px à 320px et favicon. Vérifiez les deux logos sur les arrière-plans réellement utilisés.
Couleurs
La palette par défaut comprend Obsidian, Alabaster, Paper, Graphite, Outline, Champagne, White et Error. Elle alimente les rôles de fond, surface, texte, bordure, accent, bouton et erreur.
Après modification, contrôlez contraste, focus, erreurs de formulaire, états désactivés, prix promotionnels, badges et overlays.
Typographie
Les réglages couvrent polices de titre et de texte, échelles, interlignage, approche et casse des boutons. Les valeurs initiales sont Playfair Display et Inter.
Testez les titres longs et les traductions réelles, particulièrement sur mobile.
Mise en page et mouvement
| Réglage | Valeur par défaut |
|---|---|
| Largeur de page | 1440px |
| Largeur de lecture | 780px |
| Marge bureau | 80px |
| Marge mobile | 24px |
| Gouttière | 32px |
| Espacement de section | 120px |
| Angles | Nets |
| Mouvement | Subtil |
Conservez la prise en charge de prefers-reduced-motion.
Boutons et formulaires
Vous pouvez régler hauteur, padding, bordure, effet de survol et casse des boutons, ainsi que le style souligné ou encadré des champs et l’épaisseur du focus.
Ne sacrifiez ni la taille des cibles tactiles ni la visibilité du focus.
Cartes produit
Configurez ratio portrait, carré ou adaptatif, alignement, effet de survol, codes de devise et style d’ajout rapide. Ces réglages affectent collections, recherche et recommandations.
Flexible content
Flexible content accepte les blocs titre, texte, bouton, image, statistique, ressource, espaceur, groupe et app blocks. Les groupes permettent un niveau imbriqué.
Cette section convient aux landing pages, ressources, services, rapports et espaces membres.
Sections structurées
- Specification table pour les paires libellé-valeur.
- Tabbed content avec lecture séquentielle sans JavaScript.
- Reusable card grid avec blocs manuels ou métaobjets.
Ne placez pas une information légale, de sécurité ou de livraison uniquement dans un onglet.
Modèles de page
page.flexible.json
page.specifications.json
page.content-library.jsonAffectez le modèle à une page puis configurez ses sections dans l’éditeur.
Sources dynamiques
Reliez les réglages aux produits, collections, articles, metafields ou métaobjets lorsque Shopify le permet. Définissez un fallback, testez les données absentes et n’exposez pas de metafields internes.
Ordre de personnalisation recommandé
- Réglages globaux.
- Réglages de section et de bloc.
- Composition JSON.
- Snippets ou blocs partagés.
- Nouvelles sections.
- CSS ou JavaScript global uniquement si le comportement est réellement global.
Après une modification importante, enregistrez, rechargez et testez ressources représentatives, mobile, clavier, mouvement réduit, états vides et parcours commerce.