Table des matières : [ cacher ]
Mises à niveau de sites Web DIY avec Sydney
Comme vous le savez, ce site Web a commencé comme un passe-temps et s'est rapidement transformé en une activité à plein temps. Mon site Web présente mes créations originales, mes articles tendance , mes vêtements et ma décoration . En cours de route, j'ai appris des tonnes de choses sur la façon de personnaliser le code sur le « back-end » pour créer notre style en constante évolution. Le freestyle avec CSS, HTML et JS est une courbe d'apprentissage, mais peut être accompli avec du temps et beaucoup de patience. Je vous ai donc facilité la tâche. Sortons de notre programmation habituelle, réduisons-la et faisons un peu de programmation.
Code Shopify personnalisé gratuit ?!
Certains m'ont demandé des travaux personnalisés et ont proposé de payer mes services de conception de sites Web. Je suis flatté et j'utiliserai cela comme une opportunité de suivre les règles de Sydney's Collection . Il est tout à fait normal que nous répandions la positivité en vous fournissant une section Shopify personnalisée gratuite ! C'est très simple et j'ai hâte d'ajouter d'autres articles comme celui-ci à mes blogs .
Bannière d'image avec vidéo
La section shopify personnalisée que je vous propose est géniale ! Elle vous permet d'ajouter une bannière vidéo en boucle, un titre (H1), une description et des boutons. Le meilleur, c'est que le code s'ajuste automatiquement aux vues mobile, desktop et tablette. Il s'agit d'une section complète, nous n'allons pas modifier les sections existantes et risquer de casser quelque chose. Si vous rencontrez des problèmes avec ce code, vous pouvez simplement y revenir plus tard, il n'est pas nécessaire d'ajouter la section, mais elle sera disponible lorsque vous serez prêt à l'utiliser. Cela dit, au 1er juin 2024, cette section fonctionne très bien et est implémentée depuis début 2023.
Options de personnalisation
Une fois implémentée, vous verrez que la section comprend des options pour le lien vidéo, le titre, la description, l'image de couverture (ignorez ceci, aucune image de couverture n'est nécessaire pour la vidéo, car elle démarrera automatiquement). Nous pouvons également ajuster la couleur du texte et les couleurs des boutons. Choisissez la zone « CSS personnalisé » pour ajouter vos propres styles personnalisés comme l'ajustement des polices. c'est-à-dire.
H1 {taille de police : 40 px}
Cela changera la taille de la police de votre titre.
Code personnalisé de bannière vidéo
Depuis votre interface administrateur Shopify, sélectionnez le thème que vous souhaitez personnaliser, cliquez sur les trois points et sélectionnez « Modifier le code ». Dans le menu de gauche, sélectionnez « Sections » pour ouvrir le menu déroulant. Cliquez sur « Ajouter une nouvelle section ». Une fenêtre contextuelle s'affiche pour demander un titre, nommez la section « custom-video-banner ». N'utilisez pas d'espaces, utilisez « - ». Conservez la section sous le nom « .liquid ». Cliquez sur Suivant.
Dans la nouvelle section, il y aura du code par défaut, vous pouvez simplement le sélectionner et le supprimer, le code que je vous donne le remplace. Voici le code, copiez-le et collez-le dans la section vide, puis cliquez sur Enregistrer :
| {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% if block.type == 'video' %} <div class="videoBox" style=" {%- if block.settings.video_link == blank -%} background-image: url(' {{ block.settings.video_image | img_url: 'master' }} '); {%- endif -%} "> {%- if block.settings.video_link != blank -%} <div class="fullscreen-video-wrap"> <video class="video-js" lecture automatique en boucle preload="none" lecture en ligne en mode muet affiche="https: {{ block.settings.video_image | img_url: 'master' }} "> <source src=" {{ block.settings.video_link }} " type="vidéo/mp4"> </vidéo> </div> {% endif %} <div class="videoBoxInfo"> {% if block.settings.title != blank %} <h1 class="videoBoxInfoTitle" style="couleur: {{ block.settings.color_text }} "> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .vidéoBackground .imageBoxInfoDescription p { couleur : {{ block.settings.color_text }} !important; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id=" {{ block.id }} " style="couleur: {{ block.settings.color_text }} "> {{ block.settings.text }} </div> {% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} {{ block.settings.button_link }} {{ block.settings.button_label | escape }} </a> {% endif %} </div> </div> {% else %} <div class="imageBox" style="background-color: {{ block.settings.color_bg }} ; {%- if block.settings.image_bg != blank -%} background-image: url(' {{ block.settings.image_bg | img_url: 'master' }} '); {%- endif -%} "> <div class="imageBoxInfo"> {% if block.settings.title != blank %} <h1 class="imageBoxInfoTitle" style="couleur: {{ block.settings.color_text }} "> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .vidéoBackground .imageBoxInfoDescription p { couleur : {{ block.settings.color_text }} !important; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id=" {{ block.id }} " style="couleur: {{ block.settings.color_text }} "> {{ block.settings.text }} </div> {% endif %} {% if block.settings.button_link != blank and block.settings.button_label != blank %} {{ block.settings.button_link }} {{ block.settings.button_label | escape }} </a> {% endif %} </div> </div> {% endif %} {%- endfor -%} {% else %} <div class="placeholderNoblocks"> Cette section ne contient actuellement aucun contenu. Ajoutez du contenu à cette section en utilisant la barre latérale. </div> {%- endif -%} <style> .contenu principal .vidéoBackground { marge supérieure : -55 px ; } .vidéo d'arrière-plan { position : relative ; } .videoBackground .fullscreen-video-wrap { position : absolue ; haut : 0 ; gauche : 0 ; largeur minimale : 100 % ; largeur : 100 % ; hauteur : 100 % ; débordement : caché ; } .vidéo d'arrière-plan .fullscreen-video-wrap .vidéo-js { position : absolue ; haut : 0 ; gauche : 0 ; hauteur minimale : 100 % ; largeur minimale : 100 % ; largeur : 100 % ; hauteur : 100 % ; objet-ajustement : couverture ; } .videoBackground .fullscreen-video-wrap vidéo { hauteur minimale : 100 % ; largeur minimale : 100 % ; objet-ajustement : couverture ; } .vidéoBackground .vidéoBox { affichage : flex ; align-items:centre; justifier-contenu : flex-end ; flex-direction: colonne; rembourrage : 100 px 20 px 80 px ; background-size: couverture; background-position: centre; arrière-plan-répéter : pas de répétition ; hauteur minimale : 500 px ; hauteur maximale : 800 px ; hauteur : calc(100vh - 165px); position : relative ; } .vidéoBackground .imageBox { affichage : flex ; align-items:centre; justifier-contenu : flex-end ; flex-direction: colonne; rembourrage : 100 px 20 px 80 px ; background-size: couverture; background-position: centre; arrière-plan-répéter : pas de répétition ; position : relative ; hauteur minimale : calc(100 vh - 165 px) ; hauteur : auto ; } .vidéoBackground.vidéoBoxInfo, .vidéoBackground.imageBoxInfo { z-index: 2; marge : auto ; alignement du texte : centre ; } .vidéoBackground .overlay { contenu: ""; position : absolue ; haut : 0 ; droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : #000 ; z-index: 1; } .vidéoBackground .vidéoBoxInfoBtn, .vidéoBackground .imageBoxInfoBtn { -moz-user-select : aucun ; -ms-user-select : aucun ; -webkit-user-select : aucun ; sélection de l'utilisateur : aucun ; -webkit-appearance : aucun ; -moz-appearance : aucun ; apparence : aucune ; affichage : bloc en ligne ; largeur : auto ; décoration de texte : aucune ; alignement du texte : centre ; vertical-align: milieu; curseur : pointeur ; bordure : 1px solide transparente ; rayon de la bordure : 2 px ; rembourrage : 10 px 30 px ; style de police : normal ; poids de police : normal ; espacement des lettres : 0,06 em ; espace blanc : normal ; taille de police : 16 px ; marge supérieure : 20 px ; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { couleur: #FFF; taille de police : 65 px ; hauteur de ligne : 40 px ; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { largeur maximale : 500 px ; marge: 0 auto; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { taille de police : 17 px ; hauteur de ligne : 28 px ; } .vidéoBackground .placeholderNoblocks { alignement du texte : centre ; largeur maximale : 500 px ; marge: 0 auto; } @media écran et (largeur maximale : 767 px) { .contenu principal .vidéoBackground { marge supérieure : -35 px ; } .videoBackground .fullscreen-video-wrap { z-index: 3; } .vidéoBackground .vidéoBox { hauteur minimale : 300 px ; hauteur : 100 % ; position : relative ; rembourrage : 0 ; } .videoBackground .fullscreen-video-wrap { position : relative ; hauteur minimale : 300 px ; z-index: -2; } .videoBackground .videoBoxInfo { rembourrage : 2px 20px ; largeur : 100 % ; } </style> {% schema %} { "nom": { "fr": "Arrière-plan vidéo" }, "classe": "videoBackground", "max_blocks": 1, "blocs": [ { "type": "vidéo", "nom": "Vidéo", "paramètres": [ { "type": "url", "id": "lien_vidéo", "étiquette": { "fr": "Lien vidéo" } }, { "type": "image_picker", "id": "image_vidéo", "étiquette": { "fr": "Image de couverture" } }, { "type": "en-tête", "contenu": { "fr": "Texte" } }, { "type": "texte", "id": "titre", "étiquette": { "fr": "Titre" }, "par défaut" : "Diapositive vidéo" }, { "type": "texte enrichi", "id": "texte", "étiquette": { "fr": "Description" }, "défaut": { "fr": "<p>Utilisez ce texte pour partager des informations sur votre marque avec vos clients. Décrivez un produit, partagez des annonces ou accueillez les clients dans votre magasin.</p>" } }, { "type": "couleur", "id": "texte_couleur", "étiquette": { "fr": "Couleur du texte" }, "par défaut": "#ffffff" }, { "type": "texte", "id": "étiquette_bouton", "étiquette": { "fr": "Étiquette du bouton" } }, { "type": "url", "id": "bouton_lien", "étiquette": { "fr": "Lien du bouton" } }, { "type": "couleur", "id": "color_btn_bg", "étiquette": { "fr": "Couleur du bouton d'arrière-plan" }, "par défaut": "#ffffff" }, { "type": "couleur", "id": "color_btn_text", "étiquette": { "fr": "Couleur du texte du bouton" }, "par défaut": "#ffffff" } ] }, { "type": "image", "nom": "Image", "paramètres": [ { "type": "couleur", "id": "couleur_bg", "étiquette": { "fr": "Couleur d'arrière-plan (facultatif)" }, "par défaut": "#16165b" }, { "type": "image_picker", "id": "image_bg", "étiquette": { "fr": "ou utiliser une image (obligatoire)" } }, { "type": "plage", "id": "opacité_de_la_superposition", "étiquette": { "fr": "Opacité de superposition" }, "min": 0, "max": 99, "étape": 1, "unité": { "fr": "%" }, "par défaut" : 0 }, { "type": "en-tête", "contenu": { "fr": "Texte" } }, { "type": "texte", "id": "titre", "par défaut": "Diapositive d'image", "étiquette": { "fr": "Titre" } }, { "type": "texte enrichi", "id": "texte", "étiquette": { "fr": "Description" }, "défaut": { "fr": "<p>Utilisez ce texte pour partager des informations sur votre marque avec vos clients. Décrivez un produit, partagez des annonces ou accueillez les clients dans votre magasin.</p>" } }, { "type": "couleur", "id": "texte_couleur", "étiquette": { "fr": "Couleur du texte" }, "par défaut": "#ffffff" }, { "type": "texte", "id": "étiquette_bouton", "étiquette": { "fr": "Étiquette du bouton" } }, { "type": "url", "id": "bouton_lien", "étiquette": { "fr": "Lien du bouton" } }, { "type": "couleur", "id": "color_btn_bg", "étiquette": { "fr": "Couleur du bouton d'arrière-plan" }, "par défaut": "#ffffff" }, { "type": "couleur", "id": "color_btn_text", "étiquette": { "fr": "Couleur du texte du bouton" }, "par défaut": "#ffffff" } ] } ], « préréglages » : [ { "nom": { "fr": "Arrière-plan vidéo" }, "catégorie": { "fr": "Principal" }, "blocs": [ { "type": "vidéo" } ] } ] } {% endschema %} |
Section ajoutée !
Bon travail, la première partie sur deux est maintenant terminée. La dernière ligne devrait être la ligne 854 , vous pouvez tester le code en ajoutant votre lien vidéo. La meilleure façon de procéder est de télécharger votre vidéo dans votre « contenu » -> « fichiers » dans l'administrateur Shopify. À partir de là, vous pouvez simplement copier le lien vidéo et le coller dans cette nouvelle section.
Ajoutez-le à votre thème
Depuis l'éditeur de code, cliquez sur les trois points et sélectionnez Personnaliser le thème. Dans le menu de gauche, cliquez sur « Ajouter une section » et sélectionnez la section intitulée « Arrière-plan vidéo ». Vous l'avez ajouté à votre thème et vous pouvez maintenant le placer où vous le souhaitez et le personnaliser également. La vidéo sera lue en boucle.
Ajustement pour le mobile
Nous y sommes presque, mais comme vous pouvez le constater, la vidéo ne s'affiche correctement que sur la taille du bureau et est incorrecte sur mobile. Vous pouvez le vérifier en cliquant sur l'option « Affichage mobile » dans le personnalisateur de votre thème. La section est presque terminée, mais le titre et les boutons ne s'affichent pas. Ajoutons-les !
Pour effectuer cet ajustement, nous allons simplement ajouter un petit morceau de code à notre 'base.css'. Où se trouve 'base.css' ? Suivez les mêmes étapes que celles que nous avons utilisées pour trouver les 'sections'. Depuis votre interface d'administration Shopify, sélectionnez le thème que vous souhaitez personnaliser, cliquez sur les trois points et sélectionnez « Modifier le code » . Dans le menu de gauche, sélectionnez « Ressources » pour ouvrir le menu déroulant. Sélectionnez « base.css » , cela ouvrira le code. Faites défiler jusqu'en bas du fichier et collez ce qui suit, puis cliquez sur Enregistrer :
| @media écran et (largeur maximale : 767 px) {
.vidéoBackground .vidéoBox { rembourrage : 100px 20px 80px !important; } .videoBackground .fullscreen-video-wrap { position : absolue !important ; z-index : 1 !important ; } .videoBackground .videoBoxInfo { rembourrage : 10 px !important ; } } |
Code complet
Bien joué. Vous pouvez maintenant cliquer sur « Aperçu » et consulter votre nouvelle section de bannière vidéo personnalisée, tester les boutons, faire défiler et confirmer qu'elle fonctionne comme promis. Si vous utilisez Google Chrome, faites un clic droit sur le navigateur, sélectionnez « Inspecter », ajustez la taille de l'écran sur mobile et observez la magie. La section modifiera automatiquement la taille de la section pour les utilisateurs mobiles.
Pourquoi est-ce que je donne du code gratuit ?
Je ne suis pas affilié à Shopify, ni payé par Shopify, et je n'ai fait la promotion d'aucune marque sur ce blog, à part la mienne. Alors pourquoi est-ce que je donne du code gratuit ? Pourquoi pas ?! Je l'ai déjà dit et je le répète, je suis ici pour une seule chose, et c'est d'utiliser ma plateforme pour diffuser de la positivité, c'est vraiment aussi simple que ça. Vous avez suivi les étapes, créé la section et finalement cliqué sur « Publier », cela a fonctionné et vous avez eu ce sentiment. Vous avez expiré, levé les yeux et dit « OUI »... C'est pour ça, mon ami, que je l'ai fait.
Des questions ?
N'hésitez pas à commenter ou à m'envoyer un message à info@sydneyscolleciton.com.
Remarque : certains téléphones ne liront pas la vidéo s'ils sont en « mode faible consommation » car cela bloque le rendu de fichiers plus volumineux.
Une note rapide sur CSS
Vous êtes-vous déjà demandé pourquoi nous vous demandons toujours de faire défiler jusqu'en bas d'une section .css pour ajouter du code ? CSS signifie « Cascading Style Sheet » (feuille de style en cascade) , et cela permet au code le plus récent (ajouté tout en bas) d'être le code principal des informations saisies. Par exemple, si vous avez ajouté le même code deux fois et ajusté les informations dans le nouveau code, il aura la priorité, le code le plus récent sera toujours implémenté à moins que l'élément n'ait déjà été ciblé avec « !important ». Dans ce cas, soyez prudent lorsque vous ajoutez « !important » à votre code. « !important » force le code à rester le code principal de l'élément sélectionné, quel que soit ce qui est ajouté ensuite. Nous avons ciblé une section spécifique avec ce code, nous ne nous inquiétons donc pas de nos remplacements de « !important » ici. Plus vous en saurez.
