Tricks css : clip-path pour appliquer des formes à vos images

Clip-path est une propriété très intéressante qui permet de couper la partie visible des éléments SVG, des images ou de tout élément HTML. Avant que cette propriété ne soit largement prise en compte par les navigateurs, la seule option était d’enregistrer les images au format PNG avec un arrière-plan transparent ou d’ajouter la couleur d’arrière-plan du site Web pour créer un JPG plus petit. (suite…)

Créer un bouton Ajouter au panier dans les collections sur Shopify

Certains thèmes Shopify ne proposent pas de Call To Action (CTA) sur les pages de collections. En effet, le CTA est une technique qui peut transformer vos visiteurs en leads qualifiés et vos leads en clients. Un bouton Ajouter au panier est dès lors important si vous souhaitez convertir vos utilisateurs et augmenter votre Chiffre d’Affaire. (suite…)

Comment afficher une image de produit alternative au survol sur Shopify

Avez-vous remarqué que sur certaines boutiques Shopify, lorsqu’on survol avec la souris l’image d’un produit, celle-ci change. Et bien dans ce tutoriel vous allez pouvoir le faire sans passer par la moindre application.

L’effet de survol d’image attire l’attention et permet d’augmenter l’attrait pour les éléments de votre page. Cet effet de survol sera visible sur les pages de collections et tous les blocs de recommandation de produits (cross-sell et up-sell).

Depuis votre interface administrateur Shopify, accédez à votre boutique en ligne et allez dans Thèmes. À côté du thème utilisé, cliquez sur Actions et sélectionnez “Dupliquer”. De cette façon, vous aurez une sauvegarde de votre thème si vous manquez une étape qui a un impact négatif sur votre boutique.

Maintenant que vous avez une version de sauvegarde de votre thème en direct, cliquez à nouveau sur Actions, mais cette fois choisissez “modifier le code”. Dans la navigation de gauche, faites défiler jusqu’au répertoire Assets et sélectionnez theme.css (ou équivalent theme.css.liquid ou theme.scss.liquid cela dépend de votre thème).

A la fin de votre fichier, collez le code suivant

/* ===============================================
// change image on hover
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
 display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
 display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
 display:none;
}
@media screen and (min-width:767px){
 .has-secondary.grid-view-item__link img.secondary{
   display:none;
 }
 .has-secondary.grid-view-item__link:hover img.secondary{
   display:block;
 }
 .has-.grid-view-item__link:hover img.grid-view-item__image{
   display:none;
 }
}
@media screen and (max-width:767px){
 .has-secondary.grid-view-item__link img.secondary{
   display:none;
 }
}

Cliquez sur Enregistrer.

Dans le répertoire Snippets, ouvrez le fichier qui gère l’affichage en card des produits, dans mon cas c’est product-card.liquid dans d’autres thèmes cela peut être product-card-grid.liquid. 

Faites une recherche sur le terme <img pour trouver la ligne où il affiche l’image du produit, tout juste après ajoutez cette ligne :

{% if product.images.size > 1 %}
                   < img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}" />
               {% endif %}

Cliquez sur Enregistrer une nouvelle fois.

Cette nouvelle fonctionnalité fantastique ne manquera pas de générer plus d’intérêt pour vos produits et votre boutique en ligne, ce qui vous rapportera à coup sûr plus de conversions.

Comment afficher un message sur les fiches produits Shopify en utilisant les balises/Tags

Si vous souhaitez ajouter un message générique sur les fiches produits de shopify sans forcément passer par les metafields, il existe une solution très simple.

En effet, vous pouvez afficher votre message sur les fiches produits que vous voulez à l’aide des balises ou Tags.

Pour ce là, rien de plus simple, il suffit d’éditer votre thème (pensez à dupliquer celui-ci et travaillez dessus si vous n’êtes pas sûr de ce que vous faites). Cherchez le fichier product-template.liquid ou équivalent, ensuite positionnez vous à l’endroit où vous souhaitez faire apparaître votre message et mettez ce bout de code.

{% for tag in product.tags %} 
  {% if tag contains 'productMessage:' %} 
      <div class="product--custom-message">
          {{ tag | remove:'productMessage:'}} 
      </div>
  {% endif %} 
{% endfor %} 

N’oubliez pas d’Enregistrer vos modifications.

Maintenant allez sur une fiche produit où vous voulez ajouter votre message, dans Balises mettez productMessage: suivi par le message que vous souhaitez mettre (Il est très important que le texte commence par productMessage: sinon il n’affichera rien). Dans mon exemple j’ai mis productMessage: Livraison offerte !

Une fois la modification sauvegardée, affichez votre fiche produit et le message sera affiché.

Comment ouvrir un lien externe dans un nouvel onglet sur Shopify

Vous avez ajouté dans votre menu un lien externe qui pointe vers un autre site que le votre et vous souhaitez ajouter un attribut _blank à celui-ci ? (suite…)

Symfony 3 : Login avec Facebook connect

Afin de faciliter la connexion des utilisateurs à votre site, et augmenter accessoirement le nombre d’inscrits, il est de plus en plus fréquent d’offrir la possibilité de le faire via le compte Facebook connect, Twitter ou Google+. En effet, tous ces réseaux sociaux permettent d’utiliser leurs api respectives pour se connecter à des sites tiers. (suite…)

Tester les envois des emails en local avec MailDev

Si vous faites des développements en local et que vous souhaitez tester l’envoi des emails et pour éviter de fausses manipulations ou des envois non souhaités à des contacts réels, vous pouvez utiliser la solution MailDev. (suite…)