Share
Themeforest a récemment ouvert une nouvelle section où vous pouvez acheter ou vendre des thèmes pour Shopify! Shopify est une solution de commerce électronique hébergée facilitant la création d’une entreprise en ligne. Vous pouvez avoir un magasin opérationnel en quelques minutes.
Pour lancer le catalogue Shopify de ThemeForest, les auteurs de chaque modèle accepté recevront un bonus de 100 USD - jusqu'à ce qu'il y ait dix modèles dans la catégorie..
Shopify est bien connu pour sa flexibilité de conception. Voir quelques exemples. Shopify a créé (et plus tard publié en tant que source ouverte) le moteur de création de modèles Liquid. Liquid permet une totale liberté de conception aux concepteurs.
Dans ce tutoriel, je montrerai comment concevoir un thème Shopify à l'aide de Liquid. Une fois que vous avez les bases, vous pouvez concevoir un thème et le soumettre à Themeforest..
Liquid est le moteur de gabarit développé et utilisé par Shopify. Il traite les fichiers de modèle Liquid portant l’extension «.liquid». Les fichiers liquides sont simplement des fichiers HTML avec du code intégré. Puisque Liquid permet une personnalisation complète de votre code HTML, vous pouvez littéralement concevoir un magasin qui ressemble à quoi que ce soit..
Liquid a été initialement développé en Ruby pour être utilisé avec Shopify et a été publié en tant que projet open source. Depuis lors, il a été utilisé dans d'autres projets Ruby on Rails et a été porté en PHP et javascript..
Regardons ce qu'il faut pour commencer avec du liquide.
product.description | prettyprint | tronquer: 200
Comme vous pouvez le constater, Liquid n’est que du HTML avec du code incorporé. C'est pourquoi Liquid est si puissant qu'il vous donne toute la puissance sur votre code et vous permet de travailler facilement avec les variables disponibles..
Dans Liquid, il existe deux types de balises: Sortie et Mots clés. Liquide Mots clés sont entourés d'accolades et de signes de pourcentage; sortie est entouré de deux accolades.
Dans l'extrait ci-dessus, la première ligne de Liquid est la suivante: % pour le produit dans les produits%… % endfor% Ceci est un exemple d'étiquette liquide. le pour Tag boucle en boucle sur une collection d'éléments et vous permet de travailler avec chacun d'eux. Si vous avez déjà utilisé des boucles en PHP, Ruby, javascript ou (insérez n'importe quel langage de programmation ici), cela fonctionne de la même manière en Liquid.
La prochaine ligne de Liquid dans l'extrait ci-dessus est product.title. Ceci est un exemple de sortie liquide. Cela demandera le titre du produit et affichera le résultat à l'écran.
La prochaine ligne de Liquid introduit quelque chose de nouveau: product.price | money_with_currency Ici, nous avons un exemple de filtre à liquide. Ils vous permettent de traiter une chaîne ou une variable donnée. Les filtres prennent la valeur à gauche d'eux-mêmes et en font quelque chose. Ce filtre particulier s'appelle format_as_money; il prend un nombre, le préfixe d'un signe dollar et l'enveloppe avec le symbole monétaire correct.
Accentsconagua
product.price | money_with_currency pourrait générer le code HTML suivant
45,00 $ USD La dernière ligne de Liquid ci-dessus: product.description | prettyprint | tronquer: 200 montre comment vous pouvez chaîner des filtres ensemble. Les filtres agissent sur la valeur située à leur gauche, même si cette valeur résulte d'un autre filtre. Donc, l'extrait en question appliquera le jolie impression filtrer vers Description du produit, et ensuite appliquera le tronquer filtrer aux résultats de jolie impression. De cette façon, vous pouvez chaîner autant de filtres de liquide que nécessaire!
En termes d’étiquettes liquides, outre le pour tag, il y en a plusieurs autres. Les plus courantes sont:
% comment% Ce texte ne sera pas rendu % endcomment%
% if product.description == ""% Ce produit n'a pas de description! % else% Ce produit est décrit! % fin si %
% modèle de cas% % quand 'produit'% Ceci est un produit.liquide % quand 'panier'% Ceci est un panier.liquid % endcase%
Consultez la liste complète des balises.
Liquid propose également de nombreux filtres que vous pouvez utiliser pour masser vos données. Certaines communes sont:
«Lundi» | capitaliser # => lundi
product.tags | rejoindre: ',' # => en bois, neige profonde, saison 2009
Publié le article.created_at | date: “% B% d, '% y” # => Posté le 26 janvier '09
Consultez la liste complète des filtres disponibles.
Les thèmes Shopify ont tous une structure de répertoires simple. Il comprend un dossier d’actifs, une mise en page et des modèles. Regardons ce qui se passe où:
asset_url Filtre. "logo.gif" | asset_url | img_tag: "Logo principal" # =>
Nom de la boutique 'layout.css' | asset_url | stylesheet_tag content_for_headerNom de la boutique
content_for_layoutTous les prix sont en shop.currency | Propulsé par Shopify
Deux éléments TRÈS importants doivent être présents dans un fichier theme.liquid. Le premier est content_for_header. Cette variable doit être placée dans la tête de votre theme.liquid. Il permet à Shopify d'insérer le code nécessaire dans l'en-tête du document, tel qu'un script de suivi des statistiques. Pour ceux qui connaissent WordPress, cela ressemble beaucoup à la fonction wp_head ().
L’autre élément TRÈS important est content_for_layout. Cette variable doit être placée dans le corps de votre theme.liquid; c'est l'endroit où tous vos autres modèles Liquid seront rendus.
Comme vous l'avez peut-être deviné, chacun de ces modèles a accès à différentes variables. Par exemple, product.liquid a accès à un produit qui contient le produit actuel affiché, blog.liquid a accès à un fichier. Blog variable, et index.liquid a accès à tous. Si vous êtes intéressé par les variables que vous pouvez utiliser dans quel modèle, veuillez consulter la documentation de Liquid..
La meilleure chose à propos de la conception pour Shopify est que vous utilisiez toutes les compétences que vous avez déjà: HTML, CSS, JS, etc. Le seul obstacle à la création de ce processus consiste à savoir quelles variables Liquid sont disponibles dans chaque modèle..
C'est là qu'intervient Vision.
Vision est une application autonome qui vous permet de créer des thèmes pour les magasins Shopify sur votre ordinateur local sans avoir à vous inscrire à un magasin ou à configurer une base de données ou tout autre élément geek..
Vision est livré avec tout ce dont vous avez besoin pour fonctionner tout de suite. Si vous avez un éditeur de texte et un navigateur Web installés, vous êtes prêt à lancer.
Comme si cela ne suffisait pas, Vision est pré-chargé avec les thèmes tout faits de Shopify. Shopify a permis aux utilisateurs d'utiliser ces thèmes comme blocs de construction. Vous pouvez donc utiliser l'un de ces thèmes existants comme base et les développer.!
Shopify est déjà une plate-forme de commerce électronique en pleine croissance regroupant déjà des milliers de vendeurs cherchant à présenter leurs produits. En utilisant Vision, vous pouvez vous mettre au travail et commencer à vous développer en un rien de temps. Les dix premiers modèles publiés dans la catégorie Shopify de Themeforest rapportent 100 € de plus. Alors commencez!
Si vous avez besoin de plus d'informations sur la conception avec Shopify, ils disposent d'une documentation complète sur leur wiki. Consultez le Guide thématique Shopify, Utilisation de Liquid et Mise en route de Vision.
"Ce thème Shopify aux lignes épurées présente des lignes épurées et des accents modernes qui mettent en valeur vos produits. Les lightboxes jQuery personnalisées permettent de visualiser vos produits en détail."
Voir le thème
"Un thème shopify avec un design web 2.0 moderne et sophistiqué."
Voir le thème
