Upgrade je Shopify Dawn-thema Banner, zonder premium kosten!

‍

Heb jij moeite om in het Dawn-thema een mooie banner te creëren die óók op mobiel strak oogt? Ik herken het probleem. Daarom heb ik een nieuwe video gemaakt waarin ik stap voor stap laat zien hoe je een custom desktop- én mobiele banner maakt, net zoals grote merken (denk aan Body & Fit).Het beste nieuws? Je hebt geen duur premium thema nodig, alleen een beetje slimme code. In mijn video deel ik exact hoe je dat doet, met duidelijke uitleg en voorbeeldcode.

Compatibele thema’s: Deze code zou moeten werken voor alle gratis Shopify-thema’s (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

‍

Maak sectie image-banner-custom.liquid

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

{%- liquid
 assign desktop_image = section.settings.image
 assign mobile_image = section.settings.image_2
 assign desktop_height = section.settings.desktop_image_height
 assign mobile_height = section.settings.mobile_image_height

 assign desktop_sizes = '100vw'
 assign mobile_sizes = '100vw'
 assign desktop_widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
 assign mobile_widths = '375, 550, 750, 1100'

 if section.settings.image_behavior == 'ambient'
   assign desktop_sizes = '120vw'
   assign mobile_sizes = '120vw'
   assign desktop_widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
   assign mobile_widths = '450, 660, 900, 1320'
 elsif section.settings.image_behavior == 'fixed' or section.settings.image_behavior == 'zoom-in'
   assign desktop_sizes = '100vw'
   assign mobile_sizes = '100vw'
 endif

 assign fetch_priority = 'auto'
 if section.index == 1
   assign fetch_priority = 'high'
 endif
-%}

<div class="banner__desktop">
 <div
   id="Banner-{{ section.id }}"
   class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--{{ desktop_height }}{% if settings.animations_reveal_on_scroll %}{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} scroll-trigger animate--fade-in{% endif %}"
 >
   {%- if desktop_image != blank -%}
     {%- if section.settings.image_link != blank -%}
       <a href="{{ section.settings.image_link }}" class="banner__link">
     {%- endif -%}
     <div class="banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
       {%- liquid
         assign image_height_desktop = desktop_image.width | divided_by: desktop_image.aspect_ratio
       -%}
       {{
         desktop_image
         | image_url: width: 3840
         | image_tag:
           width: desktop_image.width,
           height: image_height_desktop,
           class: '',
           sizes: desktop_sizes,
           widths: desktop_widths,
           fetchpriority: fetch_priority
       }}
     </div>
     {%- if section.settings.image_link != blank -%}
       </a>
     {%- endif -%}
   {%- else -%}
     <div class="banner__media media placeholder{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
       {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
     </div>
   {%- endif -%}
 
   <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">
       {%- if section.settings.image_link == blank -%}
         {%- 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 -%}
       {%- endif -%}
     </div>
   </div>
   
 </div>
</div>

<div class="banner__mobile">
 <div
   id="Banner-{{ section.id }}"
   class="banner banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ mobile_height }}{% if settings.animations_reveal_on_scroll %}{% if section.settings.show_text_below and section.settings.image_link == blank %} banner--mobile-bottom{% endif %}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %} scroll-trigger animate--fade-in{% endif %}"
 >
   {%- if mobile_image != blank -%}
     <div class="banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
       {%- liquid
         assign image_height_mobile = mobile_image.width | divided_by: mobile_image.aspect_ratio
       -%}
       {{
         mobile_image
         | image_url: width: 1100
         | image_tag:
           width: mobile_image.width,
           height: image_height_mobile,
           class: '',
           sizes: mobile_sizes,
           widths: mobile_widths,
           fetchpriority: fetch_priority
       }}
     </div>
   {%- else -%}
     <div class="banner__media media placeholder{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
       {{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
     </div>
   {%- endif -%}

   {%- if section.settings.image_link != blank -%}
     <a href="{{ section.settings.image_link }}" class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
   {%- else -%}
     <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 %}">
   {%- endif -%}
     <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
       {%- if section.settings.image_link == blank -%}
         {%- 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 -%}
       {%- endif -%}
     </div>
   {%- if section.settings.image_link != blank -%}
     </a>
   {%- else -%}
     </div>
   {%- endif -%}
       
 </div>
</div>

<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__link {
     display: block;
     z-index: 3;
 }
</style>
   
{% schema %}
 {
   "name": "Image Banner Custom",
   "tag": "section",
   "class": "section",
   "disabled_on": {
     "groups": ["header", "footer"]
   },
   "settings": [
     {
       "type": "image_picker",
       "id": "image",
       "label": "Desktop image"
     },
     {
       "type": "image_picker",
       "id": "image_2",
       "label": "Mobile image"
     },
     {
       "type": "range",
       "id": "image_overlay_opacity",
       "min": 0,
       "max": 100,
       "step": 10,
       "unit": "%",
       "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
       "default": 0
     },
     {
       "type": "color_scheme",
       "id": "color_scheme",
       "label": "t:sections.all.colors.label",
       "default": "scheme-1"
     },
     {
       "type": "url",
       "id": "image_link",
       "label": "Link URL",
       "info": "Add a link to make the images clickable. Cannot be used with banner content."
     },
     {
       "type": "header",
       "content": "t:sections.all.animation.content"
     },
     {
       "type": "select",
       "id": "image_behavior",
       "options": [
         {
           "value": "none",
           "label": "t:sections.all.animation.image_behavior.options__1.label"
         },
         {
           "value": "ambient",
           "label": "t:sections.all.animation.image_behavior.options__2.label"
         },
         {
           "value": "fixed",
           "label": "t:sections.all.animation.image_behavior.options__3.label"
         },
         {
           "value": "zoom-in",
           "label": "t:sections.all.animation.image_behavior.options__4.label"
         }
       ],
       "default": "none",
       "label": "t:sections.all.animation.image_behavior.label"
     },
     {
       "type": "header",
       "content": "t:sections.collage.settings.desktop_layout.label"
     },
     {
       "type": "select",
       "id": "desktop_image_height",
       "options": [
         {
           "value": "small",
           "label": "t:sections.image-banner.settings.image_height.options__2.label"
         },
         {
           "value": "medium",
           "label": "t:sections.image-banner.settings.image_height.options__3.label"
         },
         {
           "value": "large",
           "label": "t:sections.image-banner.settings.image_height.options__4.label"
         }
       ],
       "default": "medium",
       "label": "Desktop image height",
       "info": "t:sections.image-banner.settings.image_height.info"
     },
     {
       "type": "select",
       "id": "desktop_content_position",
       "options": [
         {
           "value": "top-left",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
         },
         {
           "value": "top-center",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
         },
         {
           "value": "top-right",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
         },
         {
           "value": "middle-left",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
         },
         {
           "value": "middle-center",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
         },
         {
           "value": "middle-right",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
         },
         {
           "value": "bottom-left",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
         },
         {
           "value": "bottom-center",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
         },
         {
           "value": "bottom-right",
           "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
         }
       ],
       "default": "middle-center",
       "label": "t:sections.image-banner.settings.desktop_content_position.label"
     },
     {
       "type": "checkbox",
       "id": "show_text_box",
       "default": true,
       "label": "t:sections.image-banner.settings.show_text_box.label"
     },
     {
       "type": "select",
       "id": "desktop_content_alignment",
       "options": [
         {
           "value": "left",
           "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
         },
         {
           "value": "center",
           "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
         },
         {
           "value": "right",
           "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
         }
       ],
       "default": "center",
       "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
     },
     {
       "type": "header",
       "content": "t:sections.image-banner.settings.mobile.content"
     },
     {
       "type": "select",
       "id": "mobile_image_height",
       "options": [
         {
           "value": "small",
           "label": "t:sections.image-banner.settings.image_height.options__2.label"
         },
         {
           "value": "medium",
           "label": "t:sections.image-banner.settings.image_height.options__3.label"
         },
         {
           "value": "large",
           "label": "t:sections.image-banner.settings.image_height.options__4.label"
         }
       ],
       "default": "medium",
       "label": "Mobile image height",
       "info": "For best results, use an image with a 1:1 aspect ratio."
     },
     {
       "type": "select",
       "id": "mobile_content_alignment",
       "options": [
         {
           "value": "left",
           "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
         },
         {
           "value": "center",
           "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
         },
         {
           "value": "right",
           "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
         }
       ],
       "default": "center",
       "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
     },
     {
       "type": "checkbox",
       "id": "show_text_below",
       "default": true,
       "label": "t:sections.image-banner.settings.show_text_below.label"
     }
   ],
   "blocks": [
     {
       "type": "heading",
       "name": "t:sections.image-banner.blocks.heading.name",
       "limit": 1,
       "settings": [
         {
           "type": "inline_richtext",
           "id": "heading",
           "default": "t:sections.image-banner.blocks.heading.settings.heading.default",
           "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
         },
         {
           "type": "select",
           "id": "heading_size",
           "options": [
             {
               "value": "h2",
               "label": "t:sections.all.heading_size.options__1.label"
             },
             {
               "value": "h1",
               "label": "t:sections.all.heading_size.options__2.label"
             },
             {
               "value": "h0",
               "label": "t:sections.all.heading_size.options__3.label"
             },
             {
               "value": "hxl",
               "label": "t:sections.all.heading_size.options__4.label"
             },
             {
               "value": "hxxl",
               "label": "t:sections.all.heading_size.options__5.label"
             }
           ],
           "default": "h1",
           "label": "t:sections.all.heading_size.label"
         }
       ]
     },
     {
       "type": "text",
       "name": "t:sections.image-banner.blocks.text.name",
       "limit": 1,
       "settings": [
         {
           "type": "inline_richtext",
           "id": "text",
           "default": "t:sections.image-banner.blocks.text.settings.text.default",
           "label": "t:sections.image-banner.blocks.text.settings.text.label"
         },
         {
           "type": "select",
           "id": "text_style",
           "options": [
             {
               "value": "body",
               "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
             },
             {
               "value": "subtitle",
               "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
             },
             {
               "value": "caption-with-letter-spacing",
               "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
             }
           ],
           "default": "body",
           "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
         }
       ]
     },
     {
       "type": "buttons",
       "name": "t:sections.image-banner.blocks.buttons.name",
       "limit": 1,
       "settings": [
         {
           "type": "text",
           "id": "button_label_1",
           "default": "t:sections.image-banner.blocks.buttons.settings.button_label_1.default",
           "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
           "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
         },
         {
           "type": "url",
           "id": "button_link_1",
           "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
         },
         {
           "type": "checkbox",
           "id": "button_style_secondary_1",
           "default": false,
           "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
         },
         {
           "type": "text",
           "id": "button_label_2",
           "default": "t:sections.image-banner.blocks.buttons.settings.button_label_2.default",
           "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
           "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
         },
         {
           "type": "url",
           "id": "button_link_2",
           "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
         },
         {
           "type": "checkbox",
           "id": "button_style_secondary_2",
           "default": false,
           "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
         }
       ]
     }
   ],
   "presets": [
     {
       "name": "Image Banner Custom",
       "blocks": [
         {
           "type": "heading"
         },
         {
           "type": "text"
         },
         {
           "type": "buttons"
         }
       ]
     }
   ]
 }
{% endschema %}