Share
J'ai utilisé pour la première fois Shopify peu de temps après son lancement en 2006. J'ai adoré le fait qu'il s'agissait d'une plate-forme de commerce électronique hébergée simple à utiliser et d'un prix compétitif. Mais surtout, sa fonctionnalité de thème est ce que j’ai le plus aimé. Examinons quelques techniques simples qui vous permettent de contrôler vos thèmes Shopify et d'offrir une expérience encore plus élaborée à vos clients..
Les thèmes Shopify (ci-après dénommés simplement thèmes) sont faciles à construire. En plus de nos outils quotidiens de HTML, CSS, JavaScript, les thèmes utilisent un langage de modèle appelé Liquid. Dans cet article, je souhaite aller au-delà des notions de base pour vous présenter quelques techniques que j'ai récemment utilisées pour optimiser le développement de votre thème Shopify. Si vous n'êtes pas familier avec les thèmes, vous pouvez en apprendre plus sur le Wiki Shopify.
Toutes les commandes Shopify sont hébergées de manière sécurisée sur le domaine Shopify..
Les thèmes vous permettent de contrôler votre maison, vos collections et vos pages de produits. Voici une URL Shopify typique affichant un seul produit:
http://store.theheadsofstate.com/products/chicago-travel-poster
"Les chefs d’État" est un site Shopify produit avec amour qui présente très bien leurs produits. L'URL ci-dessus vous conduit à leur affiche de voyage de Chicago, mais si vous êtes, comme moi, un peu pédant d'URL, vous pourriez être tenté de pirater à nouveau:
http://store.theheadsofstate.com/products/
Cette URL vous amène à une page qui n'a pas l'air d'être conçue par rapport au reste du site. Je doute fort que cela soit dû à un manque de réflexion de la part des concepteurs. C'est en fait la faute de Shopify; les thèmes ne prennent actuellement pas en charge un modèle natif pour la page disponible à l'adresse /des produits (ou / collections - les deux sont interchangeables dans ce contexte). Au lieu de cela, le fichier de mise en page par défaut affiche la liste des collections disponibles..
Heureusement, on peut rapidement reprendre le contrôle de cette page et l'utiliser à son avantage. Dans le thème layout.liquid fichier, vous pouvez remplacer content_for_layout avec l'extrait de code suivant:
% if template == 'list-collections'% % include 'list-collection'% % else% content_for_layout % endif%
Ensuite, créez un fichier appelé collection-listing.liquid et enregistrez-le dans votre dossier d'extraits. Si quelqu'un visite le / collections ou /des produits page, notre fichier de présentation rend et inclut notre propre extrait de code au lieu de la liste par défaut.
Voici un exemple rapide de la façon dont vous pouvez modifier le style de la liste des collections en utilisant votre propre balisage. Notez que nous avons accès à la Shopify des collections identifiant sur cette page:
Collections de produits
% pour la collection dans les collections% % sauf collection.handle == 'frontpage'%
- collection.title % endunless% % endfor%
Vous trouverez plus d’informations sur les variables à votre disposition dans la section des collections collection sur l'excellent aide-mémoire Shopify. Notez comment nous utilisons la logique Liquid pour exclure la collection avec un manipuler de fronptage. Il s'agit d'une collection souvent utilisée dans les thèmes pour afficher des éléments sur la page d'accueil, mais nous l'excluons car elle est davantage utilisée à des fins d'administration que pour un regroupement logique de produits connexes. Cette technique vous permet de conserver la cohérence du style et d'ajouter des données supplémentaires ou des éléments de conception à votre guise..
… Les mots limaces sont connus comme poignées.
Lorsque vous commencez avec des thèmes, vous abordez le concept de mises en page. Par défaut, Shopify recherche un fichier de présentation par défaut appelé layout.liquid, qui vit dans le bien nommé disposition dossier.
Il se peut que votre conception exige une mise en page alternative. Une approche consiste à utiliser des instructions conditionnelles pour afficher / masquer le contenu en fonction d'une variable, telle qu'un produit particulier ou une page de collection. Mais une autre alternative consiste à utiliser un fichier de présentation complètement différent. Cela peut être une solution beaucoup plus simple si votre besoin est différent. Tout ce dont vous avez besoin pour appliquer une mise en page alternative est d'ajouter le code suivant en haut de votre modèle:
% layout "product"%
Cela oblige votre modèle à utiliser un fichier de présentation appelé produit.liquide situé dans votre thème mises en page dossier.
Vous pouvez également spécifier qu'aucune mise en page ne soit utilisée en spécifiant aucun, comme ça:
% layout "none"%
Si vous avez utilisé WordPress, vous serez probablement familiarisé avec l’idée d’une limace. C'est un nom unique attribué à un article ou à une page spécifique utilisé dans une URL. Par exemple: "ma-première page". Dans Shopify, les mots limaces sont appelés poignées. Celles-ci sont générées automatiquement lorsque vous créez un produit, mais vous pouvez bien sûr les modifier si vous le souhaitez. Nos poignées de produits sont également disponibles dans notre produit.liquide modèle. On peut utiliser poignées dicter notre modèle de produit. Voici une façon dont nous pourrions faire ceci:
% if product.handle == 'mon-nouveau-t-shirt'% % include 'mon-nouveau-t-shirt'% % else% // Votre code standard product.liquid va ici % fin si %
Dans cet exemple, nous vérifions si le descriptif du produit de la demande en cours est "mon-nouveau-t-shirt" et incluons un fragment appelé "mon-nouveau-t-shirt" si vrai. Cela équivaut à inclure un fichier appelé mon-nouveau-t-shirt.liquid qui réside dans le dossier des extraits.
Pour aller plus loin, vous pouvez transformer la norme produit.liquide dans un extrait. J'aime cette approche car elle conserve votre modèle principal en tant que contrôleur logique, isolant ainsi les balises de présentation dans leurs propres fichiers..
Ce motif peut être légèrement modifié pour utiliser le attribuer et Cas méthodes, comme ceci:
% assign handle = product.handle% % case handle% % when 'big-t-shirt'% % include 'big-t-shirt'% % when 'petit-t-shirt' % % include 'petit-t-shirt'% % else% % include 'produit-standard'% % endcase%
Vous pouvez également utiliser le descripteur de produit pour affecter différentes classes CSS à la tag dans vos fichiers de mise en page. Par exemple:
% modèle de cas% % lorsque 'produit'% % autre % % endcase%
Vous pouvez bien sûr étendre cette technique pour personnaliser la balise basée sur un nombre quelconque de critères.
Toutes les commandes Shopify sont hébergées de manière sécurisée sur le domaine Shopify. Pour certains, le fait d'être dirigé vers une page de paiement générique peut être un peu chaotique en termes d'expérience utilisateur. Vous pouvez toutefois styliser votre commande en utilisant CSS. Voici ce que vous devez faire:
Accentsconagua
checkout.css dans le dossier de votre thème.!important règle pour atteindre les résultats souhaités.
Assurez-vous de consulter le wiki pour des exemples complets.
Vous pouvez également utiliser Liquid dans votre checkout.css fichier. Commencez par renommer votre fichier CSS en checkout.css.liquid. Ensuite, vous pouvez commencer à utiliser les filtres liquides. Voici un exemple:
/ * Insérez votre propre logo (à télécharger séparément dans votre dossier de ressources) * / #logo height: 65px; background: url ('logo-checkout.png' | asset_url | replace: 'http: //', 'https: //') center no-repeat; C'est incroyable de voir comment quelques modifications apportées au CSS de base peuvent aligner le paiement générique avec votre propre conception. Assurez-vous de vérifier tous les modèles du processus de commande; votre CSS s'appliquera à plusieurs écrans.
Les paramètres de thème nous permettent d’utiliser l’Administrateur Shopify pour contrôler les données que nous pouvons utiliser dans nos thèmes. Les cas d'utilisation courants sont les lignes de courroie, les jeux de couleurs à l'échelle du site et la sélection d'images sur mesure à afficher dans les galeries de curseurs du site. Pour activer les paramètres de votre thème, créez simplement un paramètres.html fichier (notez l’extension .liquid) et commencez à ajouter les éléments de formulaire appropriés. Par exemple, vous pouvez inclure les éléments suivants dans votre paramètres.html fichier permettant l'édition de la ligne de sangle du site:
Remarquez comment je règle la valeur par défaut. Ceci est important, surtout lorsqu'il s'agit de valeurs CSS. Pour accéder à cette valeur dans notre thème, nous la référons simplement dans Liquid comme suit:
settings.site_strapline
Nous pouvons également utiliser les paramètres de thème de nos principaux fichiers CSS en ajoutant le .liquide extension à notre fichier CSS principal. Par exemple:
body color: settings.text_color; couleur de fond: settings.bg_color;
Il est très important de fournir des valeurs par défaut pour ces couleurs dans votre paramètres.html fichier. Sinon, votre fichier CSS standard sera créé sans valeur. En savoir plus sur le wiki: http://wiki.shopify.com/Theme_Settings
Shopify fournit également une API JavaScript et les informations de "panier" de l'utilisateur actuel sont directement accessibles via une URL très simple. Ajoutez simplement le .js extension à l'URL du panier pour obtenir une représentation JSON du panier. Voici un exemple:
"jeton": "7b0f09aca710a4ce688325a8add36c6b", "note": notes, null, "attributs": null, "total_price": 0, "total_weight": 100.0, "item_count": 1, "items": ["" id ": 22984836 , "title": "Insites: The Tour Coasters", "price": 0, "line_price": 0, "quantité": 1, "sku": "", "grammes": 100, "vendor": "Viewport Industries "," propriétés ": null," variant_id ": 229848636," url ":" / produits / insites-le-tour "," image ":" http://cdn.shopify.com/s/files/1 /0151/6407/products/png_1.png?783 "," handle ":" insites-the-tour "," require_shipping ": true]," require_shipping ": true
Cela vous donne une extrême flexibilité et puissance créatrice. Vous pouvez créer une fenêtre contextuelle JavaScript affichant le contenu du panier ou insérer un diaporama mettant en évidence les produits choisis. Bien sûr, vous pouvez faire ces choses dans vos modèles, mais cela vous donne plus d'options pour offrir une meilleure expérience utilisateur..
Comme pour toutes les plates-formes, il existe de nombreuses façons différentes d'aborder le même problème, mais j'espère que ces six conseils vous seront utiles lors du développement de votre prochain thème Shopify..
