fb
Schedule a Meeting

Conseils de développement pour construire de meilleurs sites shopify personnalisés

This post is also available in: English (Anglais) Deutsch (Allemand) Italiano (Italien)

Contrairement à ses homologues, Shopify est devenu un nom familier pour tous ceux qui envisagent de démarrer une boutique en ligne. Avec un large éventail de fonctionnalités, il a réussi à attirer ses clients et a évolué ses thèmes et l’aptitude à couvrir autant de types d’affaires que possible. Comme le temps passe, de nombreux troupeaux à Shopify à la recherche du thème parfait pour leur premier magasin.

En commençant par Shopify peut sembler tout excitant et facile dans le premier aller, mais il peut être très intimidant une fois que vous commencez à construire votre site. Trouver votre thème parfait n’est que le début. Ce qui suit est beaucoup plus que simplement utiliser le thème tel qu’il est. En tant que développeurs Shopify, vous devez avoir un rythme de développement solide pour déterminer comment votre site va se révéler. Bien que la plate-forme est plus recherchée pour la construction d’une boutique en ligne, mais pour vous, il est nouveau. Se familiariser avec elle peut prendre un certain temps et exigera une certaine expérience et des connaissances sur la façon dont les choses peuvent être modifiés pour travailler pour vous uniquement.

Chez WebBee Global, nous aimons créer des applications et des thèmes Shopify personnalisés. Nous avons déjà consacré beaucoup de temps à la recherche et au développement avec une variété de méthodes. Certains ont travaillé tandis que d’autres ont été des leçons apprises. Mais néanmoins, l’expérience a été nourrissante et c’est pourquoi nous avons compilé quelques points pour les développeurs de garder à l’esprit tout en construisant des sites sur Shopify.

Utilisez ces conseils de développement comme jalons pour créer des sites Shopify riches en fonctionnalités pour vous et vos clients :

1. Utiliser le contrôle de version pour gérer le travail

De nombreux développeurs utilisent plusieurs thèmes pour stocker et contrôler le code source. Bien qu’il puisse y avoir une tentation de le faire, vous serez mieux de stocker la base de code dans un référentiel de version à distance. La raison derrière cela est, à travers cette méthode, le code reste organisé, empêché, et offre une histoire complète de tous les changements. Plus tard, au cas où les choses iraient au sud, vous pouvez toujours revenir à une version à thème stable facilement.

Un autre point est de savoir comment gérez-vous les thèmes, les branches, les fonctionnalités, les développeurs multiples et les changements qui se produisent par l’éditeur de Shopify en ligne après avoir commencé à utiliser le contrôle de version. Si plusieurs développeurs travaillent sur le même magasin, assurez-vous que chaque dev fonctionne sur des branches et des thèmes distincts. Gardez la branche principale « production prête » et fusionnez-la seulement après que les autres branches ont été testées dans le thème. De cette façon, vous ne publierez pas par inadvertance de travail à moitié fait.

La meilleure pratique est ce cas serait de télécharger les modifications apportées dans l’éditeur de thème en ligne et de les incorporer dans votre référentiel après qu’ils ont été faits.

Veillez à fusionner les modifications de l’ordre correct et à savoir quel engagement vous engagez. Cela garantit que toutes les modifications sont enregistrées dans le référentiel avant d’aller au magasin et le repo gère le code et non les thèmes.

2. Concentrez-vous davantage sur le thème Shopify gemme à développer localement

Même si Shopify est basé sur le cloud, vous ne pouvez pas contester la sortie d’une instance locale du logiciel et atteindre à travailler localement. Une meilleure approche serait de télécharger des fichiers thématiques et de visualiser directement les changements sur un magasin shopify en ligne. Faites un usage judiciaire de la gemme thème Shopify à travers lequel vous pouvez activement garder une montre sur votre répertoire et peut télécharger des fichiers automatiquement sur le thème que vous devez enregistrer des fichiers.

Toutefois, lorsque vous travaillez sur un petit projet avec un minimum de modifications, travailler sur l’éditeur en ligne est une option sûre. La modification en ligne signifie que vous ne serez jamais confronté à des problèmes de surécriture d’un fichier qui n’est pas synchronisé avec vos modifications locales.

3. Passez un peu de temps avec Liquid

Liquid est un langage rubis hautement déchiffrable et communicatif qui agit comme intermédiaire entre les données d’un magasin et ses modèles thématiques utilisés par Shopify. Si vous êtes tout nouveau à Liquid, il est temps de vous familiariser avec elle.

La lecture de Liquid vous aidera à acquérir des connaissances sur la façon dont vous pouvez tirer parti de la puissance des fichiers de modèle et de mise en page alternatifs. Il est plus facile que vous ne le pensez et vous facilitera de personnaliser votre site professionnellement.

4. Autoriser grunt pour Sass et JavaScript Compilation

Il est important de se rappeler que Liquid n’est pas destiné à être un langage de programmation, mais qu’il doit être utilisé pour créer des balisages aux données de sortie avec lesquelles vous travaillez. La remise des données à JavaScript est parfois un meilleur choix, en particulier pour les grands projets où vous pourriez vous retrouver coincé dans des boucles sans fin.

Comme Shopify dispose d’un analyseur Sass, vous pouvez l’utiliser pour compiler et structurer le CSS et JavaScript. Un certain nombre de façons et de méthodes peuvent être utilisées pour ce faire. La façon la plus simple est de créer un nom de dossier ‘Sass’ dans le répertoire racine du thème, pour contient différents dossiers et fichiers.

Autoriser la tâche Grunt pour la compilation Sass et JavaScript qui l’amène dans un fichier précieux du répertoire des actifs. Cela facilitera le travail pour vous et sera plus élégant que d’utiliser Liquid pour faire de même.

5. Résumé dans la mesure du possible

Une règle de pouce simple dit que lorsque vous créez un thème pour un client, votre thème ne doit pas stocker les données. Le thème doit être construit sans codage dur autant que possible et n’oubliez pas d’résumér chaque fois que possible. Puisque votre client sera l’utilisateur principal du site, utilisez du contenu relatable et gardez-le simple. La raison derrière cela est de permettre au client de gérer le site sans vous déranger pour des mises à jour simples.

6. Vérifier les temps de chargement et les performances

Gardez toujours un œil sur la performance de votre site avec chaque fonctionnalité que vous ajoutez pendant le développement. Vous pouvez utiliser Google Chrome Developer Tools pour des tests de performance rapides et pour trouver des goulots d’étranglement dans les thèmes.

Vérifiez la compression Images, JavaScript et CSS car elles sont les plus évidentes. Mais aussi regarder dehors pour le liquide intense et le calcul JavaScript. Si possible, ne pas rendre de contenu sur la page qui est principalement masquée.

7. Faire bon usage des extraits

Une autre excellente façon de diviser la logique en fichiers séparés est de faire usage de snipètes liquides. Les extraits sont faciles à comprendre que les balisages et il est préférable de les avoir. Il aide à gagner du temps que la plupart d’entre nous gaspillent dans la chasse à cette étiquette div non fermée qui est impossible à trouver.

Avec l’utilisation de Snippets, votre contenu est organisé logiquement et le balisage devient facile à suivre. Cela a également éliminé les doubles emplois. Utilisez des extraits pour réutiliser une section de balisage dans plusieurs fichiers.

8. Créez vos propres points de terminaison JSON pour les données dynamiques

L’utilisation des vues de modèle peut faire toute la différence lorsque vous cherchez à créer une différence dans votre travail. Chaque modèle peut être utilisé à des fins distinctes et personnalisé pour une vue particulière.

Personnalisez vos pages de produit avec des noms et des paramètres d’affichage uniques dans l’URL pour indiquer à Shopify d’utiliser un modèle spécifique. Cela créera les données souhaitées sur n’importe quelle page du magasin.

Conclusion

Je suis sûr que les conseils ci-dessus aidera à improviser votre processus de développement pour Shopify. Chaque projet est unique et a des exigences différentes, et donc la meilleure approche ne peut être décidée qu’après avoir compris la complexité du projet, et les besoins du client.

Vous devez vous en tenir à ce qui fonctionne pour vous, mais continuer à chercher des moyens novateurs d’optimiser votre flux de travail.

Scroll to top
Schedule a Meeting
close slider