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…)

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 créer un texte vertical

Il arrive dans certains cas, comme moi ce matin, où l’on veuille écrire un texte vertical pour les besoins d’un site internet ou une application web. Il n’y a pas de solution miracle mais après quelques recherches, voici les solutions que j’ai trouvé. (suite…)

Ajouter une icone pour signaler un lien sortant

Voici un petit code CSS tout simple qui vous permet d’ajouter une petite flèche à coté des liens pour signaler qu’ils pointent vers des liens externes. (suite…)

Comment créer un super site web à page unique avec jQuery

Les sites web à page unique ou One Page Navigation en anglais sont devenu à la mode surtout après que plusieurs marques de renommées  mondiales l’ont utilisés pour présenter de façon originale le lancement d’un produit ou un service.   (suite…)

Comment créer un menu flottant avec jQuery

Voici comment créer un menu flottant qui suit l’utilisateur lorsqu’il navigue sur le site. Le menu sera placé à gauche de notre site et lorsqu’on monte ou on descend, il sera toujours visible avec de jolies animations. (suite…)

Comment personnaliser les checkbox avec le CSS

S’il est très facile de changer l’apparence des champs de formulaire text et submit via le css, en revanche changer l’apparence des Checkbox n’est pas une chose aisée et pourtant comme on va le montrer dans la suite de cet article un peu de bidouillage et l’affaire est dans le sac. (suite…)