Share
Rendre votre magasin Shopify plus intuitif est un excellent moyen de convertir plus de ventes et d’obtenir un plus grand nombre d’articles par commande. Combiné à l'affichage de vos produits dans une simple liste, nous pouvons rendre l'expérience de l'ajout au panier aussi simple qu'une opération en un clic, sans avoir à naviguer vers la page de liste de produits..
Cette modification peut fonctionner dans un affichage en grille ou en liste et ne nécessite en réalité que quelques modifications pour que cela fonctionne, et elle est facilement extensible. Alors commençons et maximisons la monétisation de votre magasin!
Voici un exemple de ce que vous pouvez créer avec cette modification. Nous avons un magasin qui vend des pièces de monnaie commémoratives. Pour plus de facilité, l'utilisateur peut sélectionner la quantité de chaque pièce et l'ajouter au panier sans quitter la page..
Ceci est réalisé via un appel AJAX écrit en JavaScript qui envoie une demande à l'API Shopify. Essentiellement, le navigateur peut soumettre le formulaire via une requête en arrière-plan et laisser l'utilisateur sur la page..
Pour ce faire, nous devons modifier le thème Shopify, alors connectez-vous à votre administrateur et accédez au Boutique en ligne et puis le Des thèmes section (ou pour un raccourci, appuyez sur g W T).
Maintenant, cliquez sur le … bouton sur votre thème et choisissez Modifier HTML / CSS. Dans cette section, regardez à gauche et cliquez sur le bouton extraits dossier, puis ajoutez un nouvel extrait.
Appelez votre extrait ajaxify-cart et cliquez Créer un extrait.
Maintenant, ouvrez ce fichier, sélectionnez tout et copiez-collez le contenu dans le ajaxify-cart.liquid extrait qui vient d'être créé.
Assurez-vous sauvegarder vos modifications avant de quitter. Si vous souhaitez modifier le texte du panier ajaxify, vous pouvez modifier les chaînes de ce fichier telles que addToCartBtnLabel. Pour plus d'informations sur la configuration, lisez le fichier Lisez-moi du panier ajaxify..
Maintenant, dans votre dossier de modèles, cliquez sur le fichier theme.liquid. Trouver la fin
% include 'ajaxify-cart'%
Cela inclura le ajaxify-cart extrait que vous venez d’ajouter à toutes les pages pour que le code soit disponible lorsque nous l’appellerons à l’étape suivante.
Vous pouvez inclure le ajaxify-cart et d'autres extraits également à l'intérieur du
Assurez-vous d'avoir sauvegardé votre thème.liquide fichier avant de quitter la fenêtre.
Maintenant que vous avez la base du panier ajax mis en place, nous pouvons ajouter quelques modifications supplémentaires pour utiliser davantage de fonctionnalités de l'API Shopify..
Ajoutons un champ de quantité au formulaire en modifiant le thème de la liste de produits. Parcourez vos fichiers d’extraits de thème pour trouver le formulaire à ajouter au panier; vous pouvez le modifier comme ci-dessous:
Maintenant, sauvegardez le fichier et jetez un coup d’oeil dans le navigateur, et vous aurez également un champ de quantité sur votre formulaire.
Visitez votre boutique et accédez à n’importe quel produit. Si tout est en ordre, le bouton Ajouter au panier avec le champ Quantité s’ajoute au panier sans rafraîchissement de la page..
Si cela ne fonctionne pas, veuillez vérifier les étapes précédentes et consultez la console d'erreurs des outils de développement Web de votre navigateur pour voir si des erreurs ont été signalées..
Pour afficher votre collection dans une liste, nous aurons besoin de CSS pour y arriver. Modifiez le fichier css de votre thème et ajoutez ce qui suit pour y parvenir..
Remarque: N'oubliez pas que certains thèmes peuvent afficher une présentation différente de celle que nous avons utilisée, à savoir le thème du Pacifique, mais pour adapter ces connaissances à votre thème, sachez que le principe de base consiste à ajouter un élément supplémentaire. float: gauche; combiné avec des réglages de largeur.
.product-list-item-title taille de la police: 16px; hauteur de ligne: 22px; marge: 5px 0 0; float: gauche; largeur: 50%; .product-list-item-price float: left; largeur: 10%; margin-top: 5px. formulaire de détails de liste-article-détails float: left; largeur: 30%;
Pour que cette fonction soit compatible avec les postes de travail et les ordinateurs de bureau, vous devez utiliser des requêtes multimédia, telles que les suivantes, pour effacer le flottant:
@media (min-width: 1020px) .product-list-item-title-list taille de la police: 16px; hauteur de ligne: 22px; marge: 5px 0 0; float: gauche; largeur: 50%; color: # 000 .product-list-item-price-list float: left; largeur: 10%; margin-top: 5px .product-list-item-details-list form float: left; largeur: 30%; @ Écran uniquement multimédia et (min-device-width: 320px) et (max-device-width: 480px) et (-webkit-min-device-pixel-ratio: 2) .product-list-item-title -list taille de la police: 16px; hauteur de ligne: 22px; marge: 20px 0 0; float: none; .product-list-item .product-list-item-price-list float: none; .product-list-item-details-list form float: none; padding-left: 90px;
Supposons, par exemple, que vous souhaitiez simplement afficher les boutons à l'intérieur des collections, pas sur votre page d'accueil. Cela peut être fait facilement en ajoutant une condition à votre fichier de modèle liquide.
Ouvrez votre modèle et ajoutez la condition suivante à l'endroit où vous souhaitez que le bouton Ajouter au panier apparaisse, par exemple dans la présentation de votre liste de produits où nous avons ajouté la quantité. Ajouter le % si collection.title% conditionnel comme dans le code suivant:
% si collection.title%% fin si %
Vous pouvez spécifier les critères de votre choix à la place du % si collection.title% si vous préférez vérifier une autre valeur, par exemple si le produit est en stock ou quelle catégorie ou quels tags il a appliqué.
Vous pouvez modifier le code CSS de votre thème pour modifier l’affichage du panier ajax et l’ajuster au contenu de votre coeur. Certaines classes utiles à modifier sont .compte de panier et # cart-count a: premier.
Pour spécifier la valeur ajoutée au panier, vous pouvez également modifier le lien pour afficher le panier avec les classes. #gocart p a, #Chariot, et .la caisse em.
Pour modifier le nombre total d’articles, examinez le .nombre d'éléments classe.
De plus, à la fin de la ajaxify-cart.liquid extrait sont les couleurs suivantes que vous pouvez modifier.
.ajaxified-cart-feedback display: block; hauteur de ligne: 36px; taille de la police: 90%; alignement vertical: milieu; .ajaxified-cart-feedback.success color: # 3D9970; .ajaxified-cart-feedback.error color: # FF4136; .ajaxified-cart-feedback a border-bottom: 1px solide;
Modifiez l'alignement, les marges et le remplissage en fonction de votre thème et obtenez le meilleur affichage possible pour vos utilisateurs finaux..
N'oubliez pas de vérifier les résolutions mobiles pour voir comment fonctionne le chariot ajax. Vous devrez peut-être ajouter des requêtes multimédias pour qu'il s'affiche correctement sur tous les écrans..
Comme mentionné précédemment, vous pouvez utiliser les conditions de support suivantes pour vérifier cela:
@media (min-width: 1020px) / * Les classes vont ici pour un grand écran * / @media seulement screen et (min-device-width: 320px) et (max-device-width: 480px) et (-webkit-) min-device-pixel-ratio: 2) / * Les classes vont ici pour les appareils mobiles * /
Vous avez donc maintenant un composant de panier d’achat ajaxifié sur votre boutique, ce qui signifie que le processus d’achat est quelque peu rationalisé pour l’utilisateur final. Espérons que cela se traduira par plus de conversions. En combinaison avec l'affichage de vos produits dans une liste avec le réglage de la quantité, la probabilité d'une commande plus importante a légèrement augmenté.
Pour les sites proposant des consommables souvent achetés et ceux qui essaient de proposer une large gamme d'achats multiples en une caisse, le panier ajaxify fonctionne très bien..
À l'avenir, vous voudrez peut-être ajouter plus d'éléments ajax à votre site. Si tel est le cas, votre premier point de référence serait l’API Shopify et en décomposant la source fournie pour le panier (ajaxify-cart.liquid) pour examiner de plus près la manière dont les appels sont effectués.
Pour ce faire, une compréhension de base de JavaScript et AJAX serait nécessaire, mais ne vous inquiétez pas si vous êtes un nouveau venu - c'est vraiment très fondamental..
Tous les traitements pour un appel AJAX se trouvent dans la $ .ajax Vous trouverez une section du fichier sur le site Web de jQuery pour plus d'informations sur son fonctionnement..
J'espère que vous apprécierez modifier vos magasins et augmenter vos ventes avec ces nouveaux concepts!
Accentsconagua