So fügen Sie kostenlos Hintergrundvideos in Shopify hinzu

Das Hinzufügen eines Hintergrundvideos zu Ihrer Shopify-Website erfordert Arbeit. Es kann manchmal das Frontend-Design Ihres Shops beschädigen. Um ein Hintergrundvideo kostenlos zu Ihrem Shopify-Shop hinzuzufügen, befolgen Sie die Schritte in diesem Blogbeitrag. Fügen Sie Videos ohne Verwendung einer App und ohne Beeinträchtigung des Shop-Designs hinzu.

Warum sollten Sie ein Video zu Ihrem Shopify-Shop hinzufügen?

Das Hinzufügen von Videos zu Ihrem E-Commerce-Shop bei Shopify kann Ihnen folgende Vorteile bringen:

Vorteile der Verwendung von Videos in einem E-Commerce-Shop -

• Steigerung von Konversionen und Verkäufen
• Verbesserung von Klicks und Shares
• Erhöhung des Engagements und Aufbau von Vertrauen
• Videos erregen schnell Aufmerksamkeit
• Reduzierte Retouren sind ein Bonus

Schritte zum Hinzufügen eines Hintergrundvideos zur Shopify-Website -

1. Um ein Hintergrundvideo zu Ihrem Shopify-Shop hinzuzufügen, melden Sie sich im Admin-Bereich an.
2. Gehen Sie in Ihrem Shopify-Adminbereich zu
3. Onlineshop > Themes.
4. Wählen Sie das Theme aus, das Sie bearbeiten möchten, und klicken Sie dann auf
5. Aktionen > Code bearbeiten.
6. Scrollen Sie zum Verzeichnis "Sections" (Abschnitte) und klicken Sie auf "add a new section" (neuen Abschnitt hinzufügen).
7. Benennen Sie Ihren Abschnitt "video-background" (Video-Hintergrund).
8. Ersetzen Sie den Inhalt durch den folgenden Code:

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

{% 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="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">

This code section does not presently include any web content. Add content to this section utilizing the sidebar.

   </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",

"de": "Videohintergrund"

},

"class": "videoBackground",

"max_blocks": 1,

"blocks": [

{

"type": "video",

"name": {

"en": "Video",

"de": "Video"

},

"settings": [

{

"type": "url",

"id": "video_link",

"label": {

"en": "Video link",

"de": "Videolink"

}

},

{

"type": "image_picker",

"id": "video_image",

"label": {

"en": "Cover image",

"de": "Titelbild"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity",

"de": "Deckkraft des Overlays"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%",

"de": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text",

"de": "Text"

}

},

{

"type": "text",

"id": "title",

"label": {

"en": "Heading",

"de": "Überschrift"

},

"default": "Video slide"

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description",

"de": "Beschreibung"

},

"default": {

"en": "<p>Utilize this content to share details concerning your brand with your clients. Define a product, share announcements or welcome customers to your store.</p>",

"de": "<p>Nutzen Sie diesen Inhalt, um Details zu Ihrer Marke mit Ihren Kunden zu teilen. Definieren Sie ein Produkt, teilen Sie Ankündigungen oder begrüßen Sie Kunden in Ihrem Geschäft.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color",

"de": "Textfarbe"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label",

"de": "Beschriftung der Schaltfläche"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link",

"de": "Link der Schaltfläche"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color",

"de": "Hintergrundfarbe der Schaltfläche"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color",

"de": "Textfarbe der Schaltfläche"

},

"default": "#ffffff"

}

]

},

{

"type": "image",

"name": {

"en": "Image",

"de": "Bild"

},

"settings": [

{

"type": "color",

"id": "color_bg",

"label": {

"en": "Background color (optional)",

"de": "Hintergrundfarbe (optional)"

},

"default": "#16165b"

},

{

"type": "image_picker",

"id": "image_bg",

"label": {

"en": "or use an image (required)",

"de": "oder ein Bild verwenden (erforderlich)"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity",

"de": "Deckkraft des Overlays"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%",

"de": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text",

"de": "Text"

}

},

{

"type": "text",

"id": "title",

"default": "Image slide",

"label": {

"en": "Heading",

"de": "Überschrift"

}

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description",

"de": "Beschreibung"

},

"default": {

"en": "<p>Utilize this text to convey data about your brand to your buyers. Describe a product, share announcements, or welcome consumers to your store.</p>",

"de": "<p>Nutzen Sie diesen Text, um Ihren Käufern Daten über Ihre Marke zu übermitteln. Beschreiben Sie ein Produkt, teilen Sie Ankündigungen oder begrüßen Sie Kunden in Ihrem Geschäft.</p>"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color",

"de": "Textfarbe"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label",

"de": "Beschriftung der Schaltfläche"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link",

"de": "Link der Schaltfläche"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color",

"de": "Hintergrundfarbe der Schaltfläche"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color",

"de": "Textfarbe der Schaltfläche"

},

"default": "#ffffff"

}

]

}

],

"presets": [

{

"name": {

"en": "Video Background",

"de": "Videohintergrund"

},

"category": {

"en": "Main",

"de": "Hauptbereich"

},

"blocks": [

{

"type": "video"

}

]

}

]

}

{% endschema %}

9. Klicken Sie auf Speichern

10. Gehen Sie zu den Einstellungen und klicken Sie auf Dateien

11. Laden Sie das Video hoch, das Sie als Hintergrund verwenden möchten

12. Kopieren Sie die Video-URL

13. Gehen Sie zum Online-Shop und klicken Sie neben dem gerade bearbeiteten Theme auf Anpassen

14. Klicken Sie links auf Abschnitt hinzufügen und wählen Sie Videohintergrund

15. Fügen Sie den Link ein und geben Sie die Details ein

16. Klicken Sie auf Speichern