Comment ajouter une vidéo d'arrière-plan gratuitement sur Shopify

L'ajout d'une vidéo d'arrière-plan à votre site web Shopify demande du travail. Cela peut parfois altérer le design de l'interface utilisateur de votre boutique. Pour ajouter gratuitement une vidéo d'arrière-plan à votre boutique Shopify, suivez les étapes de cet article de blog. Ajoutez une vidéo sans utiliser d'application et sans nuire au design de la boutique.

Pourquoi devriez-vous ajouter une vidéo à votre boutique Shopify ?

L'ajout de vidéos à votre boutique Shopify e-commerce peut vous apporter des avantages tels que :

Avantages de l'utilisation de la vidéo sur une boutique e-commerce -

• Augmenter les conversions et les ventes
• Améliorer les clics et les partages
• Renforcer l'engagement et établir la confiance
• Les vidéos attirent rapidement l'attention
• La réduction des retours est un avantage

Étapes pour ajouter une vidéo d'arrière-plan sur le site web Shopify -

1. Pour ajouter une vidéo d'arrière-plan à votre boutique Shopify, connectez-vous au panneau d'administration.
2. Depuis votre panneau d'administration Shopify, allez à
3. Boutique en ligne > Thèmes.
4. Choisissez le thème que vous souhaitez modifier, puis cliquez sur
5. Actions > Modifier le code.
6. Faites défiler jusqu'au répertoire Sections et cliquez sur ajouter une nouvelle section
7. Nommez votre section video-background
8. Remplacez le contenu par le code suivant

{%- 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" loop autoplay preload="none" muted playsinline

poster="https:{{ block.settings.video_image | img_url: 'master' }}">

<source src="{{ block.settings.video_link }}" type="video/mp4">

</video>

</div>

{% endif %}

 

<div class="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

<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 {

color: {{ 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 %}

<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

</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="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>

 

<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 {

color: {{ 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 %}

<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% endif %}

{%- endfor -%}

 

{% else %}

<div class="placeholderNoblocks">

Cette section de code ne contient actuellement aucun contenu web. Ajoutez du contenu à cette section en utilisant la barre latérale.

    </div>

{%- endif -%}

 

<style>

.main-content .videoBackground {

margin-top: -55px;

}

.videoBackground {

height: 100%;

position: relative;

}

.videoBackground .fullscreen-video-wrap {

position: absolute;

top: 0;

left: 0;

min-width: 100%;

width: 100%;

height: 100%;

overflow: hidden;

}

.videoBackground .fullscreen-video-wrap .video-js {

position: absolute;

top: 0;

left: 0;

min-height: 100%;

min-width: 100%;

width: 100%;

height: 100%;

object-fit: cover;

}

.videoBackground .fullscreen-video-wrap video {

min-height: 100%;

min-width: 100%;

object-fit: cover;

}

.videoBackground .videoBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

min-height: 500px;

max-height: 800px;

        height: calc(100vh - 165px);

position: relative;

}

.videoBackground .imageBox {

display: flex;

align-items: center;

justify-content: flex-end;

flex-direction: column;

padding: 100px 20px 80px;

background-size: cover;

background-position: center;

background-repeat: no-repeat;

position: relative;

min-height: calc(100vh - 165px);

height: auto;

}

.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {

z-index: 2;

text-align: center;

}

.videoBackground .overlay {

content:" ";

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: #000;

z-index: 1;

}

.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {

-moz-user-select: none;

-ms-user-select: none;

-webkit-user-select: none;

user-select: none;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

display: inline-block;

width: auto;

text-decoration: none;

text-align: center;

vertical-align: middle;

cursor: pointer;

border: 1px solid transparent;

border-radius: 2px;

padding: 8px 15px;

font-style: normal;

font-weight: 800;

text-transform: uppercase;

letter-spacing: 0.06em;

white-space: normal;

font-size: 14px;

margin-top: 20px;

}

.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {

color: #FFF;

font-size: 30px;

line-height: 40px;

}

.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {

max-width: 500px;

margin: 0 auto;

}

.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {

font-size: 18px;

line-height: 28px;

}

.videoBackground .placeholderNoblocks {

text-align: center;

max-width: 500px;

margin: 0 auto;

}

    @media screen and (max-width: 767px) {

.main-content .videoBackground {

margin-top: -35px;

}

.videoBackground .fullscreen-video-wrap {

z-index: 3;

}

.videoBackground .videoBox {

min-height: 500px;

height: 100%;

position: relative;

padding: 0;

}

.videoBackground .fullscreen-video-wrap {

position: relative;

min-height: 300px;

}

.videoBackground .videoBoxInfo {

padding: 40px 20px;

background: #000;

width: 100%;

}

    }

</style>

 

{% schema %}

{

"name": {

"en": "Video Background"

},

"class": "videoBackground",

"max_blocks": 1,

"blocks": [

{

"type": "video",

"name": "Vidéo",

"settings": [

{

"type": "url",

"id": "video_link",

"label": {

"en": "Lien vidéo"

}

},

{

"type": "image_picker",

"id": "video_image",

"label": {

"en": "Image de couverture"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Opacité de la superposition"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Texte"

}

},

{

"type": "text",

"id": "title",

"label": {

"en": "Titre"

},

"default": "Diapositive vidéo"

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Utilisez ce contenu pour partager des détails sur votre marque avec vos clients. Définissez un produit, partagez des annonces ou accueillez les clients dans votre boutique.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Couleur du texte"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Étiquette du bouton"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Lien du bouton"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Couleur du bouton d'arrière-plan"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Couleur du texte du bouton"

},

"default": "#ffffff"

}

]

},

{

"type": "image",

"name": "Image",

"settings": [

{

"type": "color",

"id": "color_bg",

"label": {

"en": "Couleur d'arrière-plan (facultatif)"

},

"default": "#16165b"

},

{

"type": "image_picker",

"id": "image_bg",

"label": {

"en": "ou utiliser une image (obligatoire)"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Opacité de la superposition"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Texte"

}

},

{

"type": "text",

"id": "title",

"default": "Diapositive d'image",

"label": {

"en": "Titre"

}

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "<p>Utilisez ce texte pour transmettre des données sur votre marque à vos acheteurs. Décrivez un produit, partagez des annonces ou accueillez les consommateurs dans votre boutique.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Couleur du texte"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Étiquette du bouton"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Lien du bouton"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Couleur du bouton d'arrière-plan"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Couleur du texte du bouton"

},

"default": "#ffffff"

}

]

}

],

"presets": [

{

"name": {

"en": "Arrière-plan vidéo"

},

"category": {

"en": "Principal"

},

"blocks": [

{

"type": "vidéo"

}

]

}

]

}

{% endschema %}

9. Cliquez sur Enregistrer

10. Allez dans les paramètres et cliquez sur fichiers

11. Téléchargez la vidéo que vous souhaitez utiliser comme arrière-plan

12. Copiez l'URL de la vidéo

13. Allez dans Boutique en ligne, et à côté du thème que vous venez de modifier, cliquez sur personnaliser

14. Sur la gauche, cliquez sur Ajouter une section et choisissez arrière-plan-vidéo

15. Collez le lien et remplissez les détails

16. Cliquez sur enregistrer