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é à temps plein. 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 beaucoup appris 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 nécessite une courbe d'apprentissage, mais peut être accompli avec du temps et beaucoup de patience. Je vous ai donc facilité la tâche. Faisons un pas en dehors de notre programmation habituelle, réduisons-la et faisons de la programmation.
Code Shopify personnalisé gratuit ?!
Certains ont posé des questions sur le travail personnalisé et ont proposé de payer pour mes services de conception de sites Web. Je suis flatté et j'en profiterai pour suivre les règles de Sydney's Collection . Il est tout à fait normal que nous répandions la positivité en vous proposant 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 offre est géniale ! Il vous permet d'ajouter une bannière vidéo en boucle, un titre (H1), une description et des boutons. La meilleure partie est que le code s'ajuste automatiquement aux vues sur mobile, ordinateur 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 mise en œuvre 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 et l'image de couverture (ignorez cela, 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 de la police. c'est à dire.
H1 {taille de police : 40 px}
Cela modifiera la taille de la police de votre titre.
Code personnalisé de bannière vidéo
Depuis votre 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'affichera demandant un titre, nommez la section « bannière vidéo personnalisée ». N'utilisez pas d'espaces, utilisez '-'. Conservez la section comme ' .liquid '. Cliquez sur Suivant.
Dans la nouvelle section, il y aura du code par défaut, vous pouvez simplement tout mettre en surbrillance et tout 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" lectures en ligne muettes poster="https : {{ block.settings.video_image | img_url: 'master' }} "> <source src=" {{ block.settings.video_link }} " type="video/mp4"> </vidéo> </div> {% endif %} <div class="videoBoxInfo"> {% if block.settings.title != blank %} <h1 class="videoBoxInfoTitle" style="color : {{ block.settings.color_text }} "> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { couleur : {{ block.settings.color_text }} !important; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id=" {{ block.id }} " style="color : {{ 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 -%} image d'arrière-plan : url(' {{ block.settings.image_bg | img_url: 'master' }} '); {%- endif -%} "> <div class="imageBoxInfo"> {% if block.settings.title != blank %} <h1 class="imageBoxInfoTitle" style="color : {{ block.settings.color_text }} "> {{ block.settings.title | escape }} </h1> {% endif %} {%- style -%} .videoBackground .imageBoxInfoDescription p { couleur : {{ block.settings.color_text }} !important; } {%- endstyle -%} {% if block.settings.text != blank %} <div class="imageBoxInfoDescription" id=" {{ block.id }} " style="color: {{ 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 n'inclut actuellement aucun contenu. Ajoutez du contenu à cette section à l'aide de la barre latérale. </div> {%- endif -%} <style> .main-content .videoBackground { marge supérieure : -55 px ; } .videoContexte { position : relative ; } .videoBackground .fullscreen-video-wrap { position : absolue ; haut : 0 ; gauche : 0 ; largeur minimale : 100 % ; largeur : 100 % ; hauteur : 100 % ; débordement caché; } .videoBackground .fullscreen-video-wrap .video-js { position : absolue ; haut : 0 ; gauche : 0 ; hauteur minimale : 100 % ; largeur minimale : 100 % ; largeur : 100 % ; hauteur : 100 % ; ajustement de l'objet : couverture ; } .videoBackground .fullscreen-video-wrap vidéo { hauteur minimale : 100 % ; largeur minimale : 100 % ; ajustement de l'objet : couverture ; } .videoBackground .videoBox { affichage : flexible ; align-items : centre ; justifier-contenu : flex-end ; direction flexible : colonne ; remplissage : 100 px, 20 px, 80 px ; taille de l'arrière-plan : couverture ; position d'arrière-plan : centre ; répétition d'arrière-plan : pas de répétition ; hauteur minimale : 500 px ; hauteur maximale : 800 px ; hauteur : calc(100vh - 165px) ; position : relative ; } .videoBackground .imageBox { affichage : flexible ; align-items : centre ; justifier-contenu : flex-end ; direction flexible : colonne ; remplissage : 100 px, 20 px, 80 px ; taille de l'arrière-plan : couverture ; position d'arrière-plan : centre ; répétition d'arrière-plan : pas de répétition ; position : relative ; hauteur min : calc(100vh - 165px) ; hauteur : automatique ; } .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo { indice z : 2 ; marge : auto ; alignement du texte : centre ; } .videoBackground .overlay { contenu: ""; position : absolue ; haut : 0 ; à droite : 0 ; bas : 0 ; gauche : 0 ; arrière-plan : #000 ; indice z : 1 ; } .videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn { -moz-user-select : aucun ; -ms-user-select : aucun ; -webkit-user-select : aucun ; sélection par l'utilisateur : aucun ; -apparence du webkit : aucun ; -apparence moz : aucune ; aspect : aucun ; affichage : bloc en ligne ; largeur : automatique ; décoration de texte : aucune ; alignement du texte : centre ; alignement vertical : milieu ; curseur : pointeur ; bordure : 1px solide transparent ; rayon de bordure : 2 px ; remplissage : 10px 30px ; style de police : normal ; poids de la police : normal ; espacement des lettres : 0,06em ; 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 automatique ; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { taille de police : 17 px ; hauteur de ligne : 28 px ; } .videoBackground .placeholderNoblocks { alignement du texte : centre ; largeur maximale : 500 px ; marge : 0 automatique ; } Écran @media et (largeur maximale : 767 px) { .main-content .videoBackground { marge supérieure : -35 px ; } .videoBackground .fullscreen-video-wrap { indice z : 3 ; } .videoBackground .videoBox { hauteur minimale : 300 px ; hauteur : 100 % ; position : relative ; remplissage : 0 ; } .videoBackground .fullscreen-video-wrap { position : relative ; hauteur minimale : 300 px ; indice z : -2 ; } .videoBackground .videoBoxInfo { remplissage : 2px 20px ; largeur : 100 % ; } </style> {% schema %} { "nom": { "fr": "Arrière-plan de la vidéo" }, "class": "videoBackground", "max_blocks": 1, "blocs": [ { "type": "vidéo", "name": "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" }, "default": "Diapositive vidéo" }, { "type": "texte riche", "identifiant": "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 des clients dans votre magasin.</p>" } }, { "type": "couleur", "id": "color_text", "étiquette": { "fr": "Couleur du texte" }, "par défaut": "#ffffff" }, { "type": "texte", "id": "bouton_étiquette", "é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": "color_bg", "étiquette": { "fr": "Couleur de fond (facultatif)" }, "par défaut": "#16165b" }, { "type": "image_picker", "id": "image_bg", "étiquette": { "fr": "ou utiliser une image (obligatoire)" } }, { "type": "plage", "id": "overlay_opacity", "étiquette": { "fr": "Opacité de superposition" }, "min": 0, "maximum": 99, "étape 1, "unité": { "fr": "%" }, "par défaut": 0 }, { "type": "en-tête", "contenu": { "fr": "Texte" } }, { "type": "texte", "id": "titre", "default": "Diapositive d'image", "étiquette": { "fr": "Titre" } }, { "type": "texte riche", "identifiant": "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 des clients dans votre magasin.</p>" } }, { "type": "couleur", "id": "color_text", "étiquette": { "fr": "Couleur du texte" }, "par défaut": "#ffffff" }, { "type": "texte", "id": "bouton_étiquette", "é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éconfigurations": [ { "nom": { "fr": "Arrière-plan de la vidéo" }, "catégorie": { "fr": "Principal" }, "blocs": [ { "type": "vidéo" } ] } ] } {% endschema %} |
Rubrique ajoutée !
Excellent travail, la première partie des deux est maintenant terminée. La dernière ligne doit être la ligne 854 , vous pouvez tester le code en ajoutant votre lien vidéo. La meilleure façon de le faire 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
Dans 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 pouvez désormais le placer où vous le souhaitez et le personnaliser également. La vidéo sera jouée en boucle.
S'adapter au 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 « Vue mobile » dans votre personnalisateur de thème. La section est presque terminée, mais le titre et les boutons ne s'affichent pas. Ajoutons-les !
Afin de procéder à cet ajustement, nous ajouterons simplement un petit morceau de code à notre 'base.css'. Où est « base.css » ? Suivez les mêmes étapes que celles utilisées pour trouver les « sections ». Dans 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 « Actifs » 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 :
| Écran @media et (largeur maximale : 767 px) {
.videoBackground .videoBox { remplissage : 100px 20px 80px !important; } .videoBackground .fullscreen-video-wrap { position : absolue !important ; z-index : 1 !important ; } .videoBackground .videoBoxInfo { remplissage : 10px !important; } } |
Code terminé
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 en fonction du mobile et observez la magie. La section modifiera automatiquement la taille de la section pour les téléspectateurs mobiles.
Pourquoi est-ce que je donne du code gratuit ?
Je ne suis ni affilié ni payé par Shopify, et je n'ai fait la promotion d'aucune marque sur ce blog, à l'exception de 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 chose, c'est d'utiliser ma plateforme pour répandre la positivité, c'est vraiment aussi simple que cela. 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 mon ami, c'est pourquoi je l'ai fait.
Des questions?
N'hésitez pas à commenter ou envoyez-moi 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 des 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 » , ce qui permet au code le plus récent (ajouté tout en bas) d'être le code principal des informations saisies. Par exemple, si vous ajoutez le même code deux fois et ajustez les informations dans le nouveau code, celui-ci sera prioritaire, le code le plus récent sera toujours implémenté sauf si l'élément a déjà été ciblé avec « !important ». Avec cela, 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 « ! Important » ici. Plus vous en savez.
