Hoe maak je desktop en mobiel video banner voor Shopify

In deze tutorial leer je hoe je een videobanner aan je Shopify-winkel kunt toevoegen. Hiermee kun je je merk op een interactieve en dynamische manier presenteren. De code die je hiervoor gaat gebruiken is compatibel met alle gratis Shopify-thema’s, waaronder Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride en Spotlight.

Je kunt je eigen video in de banner plaatsen en daaronder eventueel een stukje custom code toevoegen om het helemaal naar jouw smaak aan te passen. Zo maak je jouw webshop nog unieker!

‍

Maak nieuw sectie file video-banner-custom.liquid

‍

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.desktop_video_height == 'adapt' -%}
 {%- style -%}
   @media screen and (min-width: 750px) {
     #Banner-{{ section.id }}::before,
     #Banner-{{ section.id }} .banner__media::before {
       padding-bottom: {{ 1 | divided_by: section.settings.desktop_video.aspect_ratio | times: 100 }}%;
       content: '';
       display: block;
     }
   }
 {%- endstyle -%}
{%- endif -%}

{%- if section.settings.mobile_video_height == 'adapt' -%}
 {%- style -%}
   @media screen and (max-width: 749px) {
     #Banner-{{ section.id }}::before,
     #Banner-{{ section.id }} .banner__media::before,
     #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
       padding-bottom: {{ 1 | divided_by: section.settings.mobile_video.aspect_ratio | times: 100 }}%;
       content: '';
       display: block;
     }
   }
 {%- endstyle -%}
{%- endif -%}

{%- style -%}
 @media screen and (max-width: 749px) {
 
     .banner__desktop {
         display: none !important;
     }
     .banner__mobile {
         display: block !important;
     }
 }
 @media screen and (min-width: 750px) {
 
     .banner__mobile {
         display: none !important;
     }
     .banner__desktop {
         display: block !important;
     }
 }
 .banner__desktop .banner__media.media.banner__media-video video, .banner__mobile .banner__media.media.banner__media-video video {
   top: 50%;
   transform: translateY(-50%);
   height: auto;
 }
{%- endstyle -%}

<div class="banner__desktop">
 <div
   id="Banner-{{ section.id }}"
   class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.desktop_video_height }}{% if section.settings.desktop_video_height == 'adapt' %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
 >
   <div class="banner__media media banner__media-video">
     {%- if section.settings.desktop_video != blank -%}
       {{ section.settings.desktop_video
       | video_tag:
         autoplay: true,
         loop: true,
         muted: true,
         controls: false
       }}
     {%- else -%}
       <div class="banner__media media placeholder">
         {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
       </div>
     {%- endif -%}
   </div>
   <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
     <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
       {%- for block in section.blocks -%}
         {%- case block.type -%}
           {%- when 'heading' -%}
             <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
               {{ block.settings.heading }}
             </h2>
           {%- when 'text' -%}
             <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
               <p>{{ block.settings.text }}</p>
             </div>
           {%- when 'buttons' -%}
             <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
               {%- if block.settings.button_label_1 != blank -%}
                 <a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
               {%- endif -%}
               {%- if block.settings.button_label_2 != blank -%}
                 <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
               {%- endif -%}
             </div>
         {%- endcase -%}
       {%- endfor -%}
     </div>
   </div>
 </div>
</div>

<div class="banner__mobile">
 <div
   id="Banner-{{ section.id }}"
   class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.mobile_video_height }}{% if section.settings.mobile_video_height == 'adapt' %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
 >
   <div class="banner__media media banner__media-video">
     {%- if section.settings.mobile_video != blank -%}
       {{ section.settings.mobile_video
       | video_tag:
         autoplay: true,
         loop: true,
         muted: true,
         controls: false
       }}
 
     {%- elsif section.settings.desktop_video != blank -%}
       {{ section.settings.desktop_video
       | video_tag:
         autoplay: true,
         loop: true,
         muted: true,
         controls: false
       }}
     {%- else -%}
       <div class="banner__media media placeholder">
         {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
       </div>
     {%- endif -%}
   </div>
   <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
     <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
       {%- for block in section.blocks -%}
         {%- case block.type -%}
           {%- when 'heading' -%}
             <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
               {{ block.settings.heading }}
             </h2>
           {%- when 'text' -%}
             <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
               <p>{{ block.settings.text }}</p>
             </div>
           {%- when 'buttons' -%}
             <div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
               {%- if block.settings.button_label_1 != blank -%}
                 <a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
               {%- endif -%}
               {%- if block.settings.button_label_2 != blank -%}
                 <a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
               {%- endif -%}
             </div>
         {%- endcase -%}
       {%- endfor -%}
     </div>
   </div>
 </div>
</div>

{% schema %}
{
 "name": "Video Banner",
 "tag": "section",
 "class": "section",
 "disabled_on": {
   "groups": ["header", "footer"]
 },
 "settings": [
   {
     "type": "header",
     "content": "Desktop settings"
   },
   {
     "type": "video",
     "id": "desktop_video",
     "label": "Desktop video"
   },
   {
     "type": "select",
     "id": "desktop_video_height",
     "options": [
       {
         "value": "adapt",
         "label": "Adapt to video"
       },
       {
         "value": "small",
         "label": "Small"
       },
       {
         "value": "medium",
         "label": "Medium"
       },
       {
         "value": "large",
         "label": "Large"
       }
     ],
     "default": "medium",
     "label": "Desktop Video height"
   },
   {
     "type": "select",
     "id": "desktop_content_position",
     "options": [
       {
         "value": "top-left",
         "label": "Top left"
       },
       {
         "value": "top-center",
         "label": "Top center"
       },
       {
         "value": "top-right",
         "label": "Top right"
       },
       {
         "value": "middle-left",
         "label": "Middle left"
       },
       {
         "value": "middle-center",
         "label": "Middle center"
       },
       {
         "value": "middle-right",
         "label": "Middle right"
       },
       {
         "value": "bottom-left",
         "label": "Bottom left"
       },
       {
         "value": "bottom-center",
         "label": "Bottom center"
       },
       {
         "value": "bottom-right",
         "label": "Bottom right"
       }
     ],
     "default": "middle-center",
     "label": "Desktop content position"
   },
   {
     "type": "checkbox",
     "id": "show_text_box",
     "default": true,
     "label": "Show text box"
   },
   {
     "type": "select",
     "id": "desktop_content_alignment",
     "options": [
       {
         "value": "left",
         "label": "Left"
       },
       {
         "value": "center",
         "label": "Center"
       },
       {
         "value": "right",
         "label": "Right"
       }
     ],
     "default": "center",
     "label": "Desktop content alignment"
   },
   {
     "type": "header",
     "content": "Mobile settings"
   },
   {
     "type": "video",
     "id": "mobile_video",
     "label": "Mobile video"
   },
   {
     "type": "select",
     "id": "mobile_video_height",
     "options": [
       {
         "value": "adapt",
         "label": "Adapt to video"
       },
       {
         "value": "small",
         "label": "Small"
       },
       {
         "value": "medium",
         "label": "Medium"
       },
       {
         "value": "large",
         "label": "Large"
       }
     ],
     "default": "medium",
     "label": "Mobile Video height"
   },
   {
     "type": "select",
     "id": "mobile_content_alignment",
     "options": [
       {
         "value": "left",
         "label": "Left"
       },
       {
         "value": "center",
         "label": "Center"
       },
       {
         "value": "right",
         "label": "Right"
       }
     ],
     "default": "center",
     "label": "Mobile content alignment"
   },
   {
     "type": "checkbox",
     "id": "show_text_below",
     "default": true,
     "label": "Show text below video on mobile"
   },
   {
     "type": "header",
     "content": "General settings"
   },
   {
     "type": "color_scheme",
     "id": "color_scheme",
     "label": "Color scheme",
     "default": "scheme-1"
   }
 ],
 "blocks": [
   {
     "type": "heading",
     "name": "Heading",
     "limit": 1,
     "settings": [
       {
         "type": "inline_richtext",
         "id": "heading",
         "default": "Video banner",
         "label": "Heading"
       },
       {
         "type": "select",
         "id": "heading_size",
         "options": [
           {
             "value": "h2",
             "label": "Small"
           },
           {
             "value": "h1",
             "label": "Medium"
           },
           {
             "value": "h0",
             "label": "Large"
           }
         ],
         "default": "h1",
         "label": "Heading size"
       }
     ]
   },
   {
     "type": "text",
     "name": "Text",
     "limit": 1,
     "settings": [
       {
         "type": "inline_richtext",
         "id": "text",
         "default": "Give customers details about the banner video or content in general.",
         "label": "Text"
       },
       {
         "type": "select",
         "id": "text_style",
         "options": [
           {
             "value": "body",
             "label": "Body"
           },
           {
             "value": "subtitle",
             "label": "Subtitle"
           },
           {
             "value": "caption-with-letter-spacing",
             "label": "Caption with letter spacing"
           }
         ],
         "default": "body",
         "label": "Text style"
       }
     ]
   },
   {
     "type": "buttons",
     "name": "Buttons",
     "limit": 1,
     "settings": [
       {
         "type": "text",
         "id": "button_label_1",
         "default": "Button label",
         "label": "First button label",
         "info": "Leave blank to hide the button"
       },
       {
         "type": "url",
         "id": "button_link_1",
         "label": "First button link"
       },
       {
         "type": "checkbox",
         "id": "button_style_secondary_1",
         "default": false,
         "label": "Use secondary button style for first button"
       },
       {
         "type": "text",
         "id": "button_label_2",
         "default": "Button label",
         "label": "Second button label",
         "info": "Leave blank to hide the button"
       },
       {
         "type": "url",
         "id": "button_link_2",
         "label": "Second button link"
       },
       {
         "type": "checkbox",
         "id": "button_style_secondary_2",
         "default": false,
         "label": "Use secondary button style for second button"
       }
     ]
   }
 ],
 "presets": [
   {
     "name": "Video Banner",
     "blocks": [
       {
         "type": "heading"
       },
       {
         "type": "text"
       },
       {
         "type": "buttons"
       }
     ]
   }
 ]
}
{% endschema %}