Mettons à jour notre site Web en ajoutant une bordure personnalisée à nos images à l'aide du champ CSS personnalisé dans la section bannière d'image. Avec ce code gratuit, vous pouvez facilement afficher une bordure autour de vos images sur mobile. Nous pouvons ajuster le code pour créer une bordure avec votre propre couleur via un code hexadécimal ou un script, et pouvons ajuster la largeur de la bordure.

Cette méthode fonctionne pour le thème Shopify Dawn et devrait être compatible avec tout thème qui inclut des champs CSS personnalisés dans leurs sections Shopify prédéfinies. Naturellement, vous pouvez coller le code au bas de votre base.css sous assets dans votre éditeur de code. À la toute fin, je vous montrerai comment ajuster notre code pour la couleur et le remplissage à votre guise.

Remarque : c'est ici que je vous dis de simplement ignorer le mur de texte suivant et de suivre les images, mais si vous êtes ici pour passer du temps, lisez la suite ! Il n'y a rien à vendre dans ce blog, c'est gratuit pour vous, nous utilisons des publicités sécurisées pour aider à la maintenance du site Web, donc votre temps ici est précieux.

Poignée de main et superposition de code.

Accueillir!

Si vous avez parcouru la collection de Sydney et que vous êtes tombé sur mes journaux de code, bienvenue ! Vous vous demandez peut-être pourquoi une marque de commerce électronique et de style de vie propose du code. Eh bien, surprise, cela correspond à la marque ! Nous trouvons toujours des moyens uniques de diffuser la positivité. Si vous suivez les réseaux sociaux de Sydney, vous savez que nous adorons offrir des cadeaux gratuits.

Alors non, il ne s'agit pas seulement d'une mini-bibliothèque , de décoration intérieure et de bricolage ; il s'agit d'un style de vie . Considérez ceci comme un message de notre part : il existe des millions de façons de diffuser la positivité sans aucun coût pour vous !

Pourquoi un code CSS personnalisé gratuit ?

J'ai reçu plusieurs demandes de renseignements sur la façon dont j'ai obtenu ce look, j'ai donc décidé qu'il était temps de partager le code avec vous. Bien sûr, c'est gratuit, mais si vous recherchez une conception Web détaillée, envoyez-nous un message et nous pourrons donner vie à votre vision.

Cette tâche est simple : il s'agit d'un simple copier-coller. Je vous recommande de dupliquer votre thème avant d'effectuer des modifications. Une fois que vous êtes satisfait de vos ajouts, vous pouvez les publier.

Comment ajouter une bordure à la section Bannière d'image dans Shopify :

Suivez les images que j'ai fournies pour faciliter le processus. Bien que vous puissiez effectuer des ajustements sur le bureau cible, pour cette entrée de journal, je souhaite me concentrer uniquement sur les ajustements mobiles, car je suis satisfait de la largeur actuelle du bureau.

Étape 1 :

Depuis votre interface administrateur Shopify, sélectionnez le thème que vous souhaitez personnaliser et cliquez sur Personnaliser. Comme vous pouvez le voir ci-dessous, nous ne personnalisons pas le thème en direct (bouton noir). Il est recommandé de cliquer sur ces trois points et de dupliquer le thème, afin que nous puissions travailler sur le back-end et ne pas interférer avec le site en direct. J'aime renommer mes thèmes au fur et à mesure, par exemple, mon thème en direct obtient un « (ACT) » ajouté au nom pour « actif », et mon doublon reçoit « (DEV) » pour le développement.

Étape 2 :

Dans le menu de votre éditeur de thème, sous « Modèle », passez la souris et la croix bleue apparaîtra avec le texte « ajouter une section », cliquez dessus.

Étape 3 :

Dans le menu déroulant, sélectionnez « bannière d’image ».

Les sections incluses avec les sites Web Shopify sont dynamiques dans le sens où vous pouvez les déplacer sur votre page d'un simple clic et glisser, alors placez votre bannière d'image où vous le souhaitez dans votre modèle.

Étape 4 :

Cliquez sur le texte de la bannière d'image dans l'éditeur (celui illustré ci-dessus) pour accéder au personnalisateur de la section. Faites défiler vers le bas et voyez le menu déroulant pour « CSS personnalisé ».

Étape 5 :

Copiez et collez ce code dans le CSS personnalisé :

@media écran et (largeur maximale : 749 px) {
.banner__content {
box-shadow : 0 0 0 6px encart blanc ;
}
}

Faites défiler vers le bas pour obtenir des informations détaillées sur la façon de personnaliser la couleur et la taille.

Étape 6 :

Confirmez vos modifications et cliquez sur ENREGISTRER. Vous verrez maintenant la bordure blanche autour de votre section de bannière d'image !

Tout est fait

Vous pouvez maintenant publier votre thème et votre nouvelle bordure de bannière d'image blanche personnalisée sera mise en ligne. Gardez à l'esprit que lorsque vous utilisez le champ CSS personnalisé dans une section, le code n'affectera que les éléments de cette section.

Si vous souhaitez que le code s'applique à toutes les sections de bannières d'images, ajoutez-le aux ressources situées au bas de votre fichier base.css ou theme.css (par exemple, base.css pour le thème Dawn). Prévisualisez toujours votre thème et confirmez les modifications avant de le publier.

Si vous souhaitez apporter des modifications à une bannière d'image spécifique sans utiliser le champ CSS personnalisé, vous pouvez cibler l'élément spécifique et appliquer le même code.

Comment ajuster le code

Analysons ce petit morceau de code, de cette façon, vous pourrez le revoir et faire les ajustements que vous souhaitez....

@media écran et (largeur maximale : 749 px) {
.banner__content {
box-shadow : 0 0 0 6px encart blanc ;
}
}

@media screen et (max-width: 749px) -> Ceci cible les appareils mobiles et tout appareil dont l'écran mesure moins de 749 pixels de large.

.banner__content -> c'est l'élément que nous ciblons.

box-shadow: 0 0 0 6px white inset; -> 'box-shadow' est notre bordure, et 6 pixels est notre largeur par défaut. Nous avons défini la couleur d'insertion sur blanc. C'est ici que le plaisir commence. Vous pouvez remplacer le mot « blanc » par presque n'importe quel code couleur hexadécimal pour correspondre au thème et à l'image de marque de votre site Web. Vous pouvez remplacer 6 px par la largeur de bordure souhaitée.

Conclusion

Et voilà, vous avez votre propre CSS personnalisé pour une bordure autour de la section « Bannière d'image » dans Shopify. Consultez nos blogs DIY et Lifestyle, et n'oubliez pas que nous avons également de superbes cadeaux disponibles. Que vous codiez, créiez ou offriez des cadeaux, tant que vous apportez de la positivité, vous êtes le bienvenu ici chez Sydney's.

Retour au blog