Native bouwenTutorial
Dawn uitbreiden zonder app, deel 1: banners, subcollecties en breadcrumbs
Diek Thunnissen8 sep 20269 min leestijd
Een aparte banner voor mobiel, een videobanner, subcollecties op de collectiepagina en breadcrumbs. Vier dingen die niet in Dawn zitten en waar je geen app voor hoeft te installeren. Vier eigen sections, met de volledige code.
Dawn is een goed thema met een paar gaten. Geen aparte banner voor mobiel, geen video als hero, geen subcollecties op een collectiepagina, geen breadcrumbs. Voor elk gat staat een app in de store, en elke app is een abonnement plus een script op je kritieke pad dat je niet bezit.
Wij lossen die gaten liever op met een eigen section. Die staat in je eigen bestand onder sections, leest de theme-instellingen die Dawn al heeft, en overleeft een thema-update omdat je niets in de bestanden van Dawn zelf aanpast. Alle vier de sections hieronder werken op Dawn en op de andere gratis Shopify-thema's die op dezelfde basis draaien: Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride en Spotlight.
Het patroon is elke keer hetzelfde. Nieuw bestand aanmaken via Online Store, Themes, Edit code, Add a new section. Code erin. Opslaan. Daarna verschijnt de section in de theme editor onder Add section en stel je hem daar in. Geen code-aanpassing per klant, geen deploy.
Videobanner met een aparte desktop- en mobiele video
Een video als hero die op desktop breed is en op mobiel staand. Dawn heeft wel een video-section, maar niet twee video's die per schermbreedte wisselen. Deze section doet dat met een media query: onder 750 pixels toont hij de mobiele video, daarboven de desktop-video. Is er geen mobiele video geüpload, dan valt hij terug op de desktop-video.
Maak het bestand sections/video-banner-custom.liquid en plak dit erin.
471 regels codeToon code +Verberg code −
{{ '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 %}In de theme editor kies je per video een hoogte. Adapt volgt de verhouding van de video zelf, small, medium en large gebruiken de vaste hoogtes van Dawn. De blokken heading, text en buttons werken zoals in de gewone image banner. Video's spelen automatisch, zonder geluid en zonder bediening, precies zoals een hero-video hoort.
Aparte banner-afbeelding voor desktop en mobiel
Hetzelfde principe, maar dan voor stilstaand beeld. Grote merken zetten op mobiel een ander beeld neer dan op desktop, omdat een liggend beeld met tekst links op een telefoon onleesbaar wordt. In Dawn kan dat niet zonder een tweede section te verbergen met CSS, en dat laadt beide beelden.
Maak sections/image-banner-custom.liquid. Deze section laadt per schermbreedte alleen het beeld dat getoond wordt, met de juiste widths en sizes zodat Shopify de goede formaten serveert.
547 regels codeToon code +Verberg code −
{{ '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 %}Twee dingen om te weten. Vul je Link URL in, dan wordt het hele beeld klikbaar en verdwijnen de content-blokken, dat is een bewuste keuze in de code. En voor mobiel werkt een beeld van 1:1 het best, dat staat ook als hint in de instelling.
Subcollecties op de collectiepagina
Een collectie Kleding met daaronder Truien, Broeken en Jassen. Dawn toont op de collectiepagina alleen producten, dus je hoofdcollectie is een lange lijst van alles. Met een metafield op de collectie en een eigen section toon je bovenaan de subcollecties als kaarten, met dezelfde card-collection snippet die Dawn zelf gebruikt.
Maak eerst het metafield aan onder Instellingen, Custom data, Collecties. Naam Subcollection List, namespace en key custom.subcollection_list, type List of collections. Daarna per hoofdcollectie de subcollecties aanvinken.
Dan de section, sections/collection-list-custom.liquid.
172 regels codeToon code +Verberg code −
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign subcollections_info = collection.metafields.custom.subcollection_list.value | parse_json
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and subcollections_info.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
<slider-component class="slider-mobile-gutter">
<ul class="collection-list contains-card contains-card--collection grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %}">
{%- for subcollection in subcollections_info -%}
{%- assign current_collection = collections[subcollection.handle] -%}
{%- if current_collection -%}
<li class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}">
{% render 'card-collection',
card_collection: current_collection,
media_aspect_ratio: section.settings.image_ratio,
columns: section.settings.columns_desktop
%}
</li>
{%- endif -%}
{%- endfor -%}
</ul>
</slider-component>
</div>
</div>
{% schema %}
{
"name": "Collection List Custom",
"tag": "section",
"class": "section section-collection-list",
"max_blocks": 15,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collection-list.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.collection-list.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.collection-list.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:sections.collection-list.settings.image_ratio.label",
"info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "background-1"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "t:sections.collection-list.settings.show_view_all.label"
},
{
"type": "header",
"content": "t:sections.collection-list.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.collection-list.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
]
}
],
"presets": [
{
"name": "Collections List Custom"
}
]
}
{% endschema %}Voeg de section in de theme editor toe aan de collectie-template, boven de productgrid. Wil je dat een hoofdcollectie zonder eigen producten alleen de subcollecties toont en geen lege grid, zet dan in sections/main-collection-product-grid.liquid de hele inhoud tussen deze conditie.
{% if collection.all_products_count > 0 %}
... rest of code...
{% endif %}Dat is de enige aanpassing in een bestand van Dawn zelf, en die raak je kwijt bij een thema-update. Zet hem terug of laat de lege grid staan, dat is een keuze van tien seconden.
Breadcrumbs uit je hoofdmenu
Breadcrumbs helpen op een shop met veel producten en collecties, maar Shopify weet zelf niet in welke collectie een klant een product bekijkt: een product zit in meerdere collecties tegelijk. Deze section lost dat op door de structuur uit je menu te halen. Het pad Home, Kleding, Truien, De Sweater komt uit de nesting van je hoofdmenu, tot drie niveaus diep.
Maak sections/breadcrumbs.liquid.
531 regels codeToon code +Verberg code −
{%- if section.settings.breadcrumbs_enabled -%}
{%- unless template == 'index' or template == 'cart' or template == '404' -%}
{% assign breadcrumbs_menu = linklists[section.settings.breadcrumbs_menu_definition].links %}
{% assign max_depth = 0 %}
{% if section.settings.prefer_shortest_path %}
{% assign previous_max_depth = 9 %}
{% else %}
{% assign previous_max_depth = 0 %}
{% endif %}
{% assign current_template_type = template | split: '.' | first %}
{% assign current_template = nil %}
{% assign current_template_parents = nil %}
{% assign link_found = false %}
{% assign link_depth1 = nil %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% comment %}Determine page identifier based on page type{% endcomment %}
{% case current_template_type %}
{% when 'product' %}
{% assign current_template = product %}
{% assign current_template_parents = product.collections %}
{% when 'collection' %}
{% assign current_template = collection %}
{% when 'page' %}
{% assign current_template = page %}
{% when 'blog' %}
{% assign current_template = blog %}
{% when 'article' %}
{% assign current_template = article %}
{% assign article_handle_parts = article.handle | split: '/' %}
{% assign blog_handle_extracted = article_handle_parts[0] %}
{% assign template_type_other = true %}
{% else %}
{% comment %}
For all Other template types:
- policies (no actual template)
- search
- list-collections
Use built-in variables request.path and page_title
{% endcomment %}
{% assign template_type_other = true %}
{% endcase %}
{% for link in breadcrumbs_menu %}
{% assign current_depth = 1 %}
{% if link.object %}
{% if link.object.handle and current_template.handle and link.object.handle == current_template.handle %}
{% if link_found == false %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = nil %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% elsif current_template_parents %}
{% for parent in current_template_parents %}
{% if link.object.handle and parent.handle and link.object.handle == parent.handle %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% break %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% elsif template_type_other %}
{% if current_template_type == 'article' %}
{% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% else %}
{% if link.object.title == page_title %}
{% if link_found == false %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = nil %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if link.links %}
{% for childlink in link.links %}
{% assign current_depth = 2 %}
{% if childlink.object %}
{% if childlink.object.handle and current_template.handle and childlink.object.handle == current_template.handle %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% elsif current_template_parents %}
{% for parent in current_template_parents %}
{% if childlink.object.handle and parent.handle and childlink.object.handle == parent.handle %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% break %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% elsif template_type_other %}
{% if current_template_type == 'article' %}
{% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% else %}
{% if link.object.title == page_title %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = nil %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% if childlink.links %}
{% for grandchildlink in childlink.links %}
{% if section.settings.prefer_shortest_path and link_found %}{% break %}{% endif %}
{% assign current_depth = 3 %}
{% if grandchildlink.object.handle and current_template.handle and grandchildlink.object.handle == current_template.handle %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% elsif current_template_parents %}
{% for parent in current_template_parents %}
{% if grandchildlink.object.handle and parent.handle and grandchildlink.object.handle == parent.handle %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% break %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% break %}
{% endif %}
{% endif %}
{% endfor %}
{% elsif template_type_other %}
{% if current_template_type == 'article' %}
{% if link.object.handle and blog_handle_extracted and link.object.handle == blog_handle_extracted %}
{% assign current_depth = current_depth | plus: 1 %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = grandchildlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% else %}
{% if link.object.title == page_title %}
{% if link_found == false %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% assign link_found = true %}
{% elsif section.settings.prefer_shortest_path and current_depth < previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign link_depth3 = nil %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% elsif section.settings.prefer_shortest_path == false and current_depth > previous_max_depth %}
{% assign link_depth1 = link %}
{% assign link_depth2 = childlink %}
{% assign max_depth = current_depth %}
{% assign previous_max_depth = max_depth %}
{% endif %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
<div class="page-width gradient color-{{ section.settings.color_scheme }}">
<nav aria-label="Breadcrumb" class="breadcrumbs ">
<ol class="breadcrumbs__list">
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ request.locale.root_url }}">Home</a></li>
{% if link_depth1 %}
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ link_depth1.url }}">{{ link_depth1.title }}</a></li>
{% endif %}
{% if link_depth2 %}
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ link_depth2.url }}">{{ link_depth2.title }}</a></li>
{% endif %}
{% if link_depth3 %}
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="{{ link_depth3.url }}">{{ link_depth3.title }}</a></li>
{% endif %}
{% if template_type_other %}
<li class="breadcrumbs__item" aria-current="page">{{ page_title }}</li>
{% else %}
<li class="breadcrumbs__item" aria-current="page">{{ current_template.title }}</li>
{% endif %}
</ol>
</nav>
{% if section.settings.enable_divider %}
<div id="breadcrumbs-divider"></div>
{% endif %}
</div>
{% endunless %}
{%- endif -%}
{% schema %}
{
"name": "Breadcrumbs",
"tag": "section",
"class": "section",
"settings": [
{
"type": "checkbox",
"id": "breadcrumbs_enabled",
"label": "Enable Breadcrumbs",
"default": true
},
{
"type": "link_list",
"id": "breadcrumbs_menu_definition",
"default": "main-menu",
"label": "Breadcrumbs Menu Definition"
},
{
"type": "checkbox",
"id": "prefer_shortest_path",
"label": "Use Shortest Path",
"default": false
},
{
"type": "select",
"id": "separator_shape",
"label": "Breadcrumb Separator Shape",
"options": [
{
"value": "triangle",
"label": "Triangle ( > )"
},
{
"value": "slash",
"label": "Slash ( / )"
}
],
"default": "triangle"
},
{
"type": "range",
"id": "font_size",
"label": "Font Size",
"min": 10,
"max": 20,
"step": 1,
"default": 14,
"unit": "px"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "enable_divider",
"label": "Enable Divider",
"default": false
},
{
"type": "color",
"id": "divider_color",
"label": "Divider Color",
"default": "#ccc"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 12
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 12
}
],
"presets": [
{
"name": "breadcrumbs"
}
]
}
{% endschema %}
<style>
.breadcrumbs {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
.breadcrumbs__list {
list-style-type: none;
margin: 0;
padding: 0;
font-size: {{ section.settings.font_size }}px;
}
.breadcrumbs__item {
display: inline-block;
}
.breadcrumbs__item:not(:last-child):after {
content: '';
display: inline-block;
margin: 0 .20em;
position: relative;
vertical-align: middle;
{% if section.settings.separator_shape == 'triangle' %}
border-style: solid;
border-width: .10em .10em 0 0;
height: .30em;
width: .30em;
transform: rotate(45deg);
top: -0.1em;
{% elsif section.settings.separator_shape == 'slash' %}
content: '/';
margin-left: .5em;
{% endif %}
}
.breadcrumbs__link {
cursor: pointer;
display: inline-block;
border: none;
box-shadow: none;
text-decoration: none;
text-underline-offset: 0.3rem;
color: rgb(var(--color-text));
/*font-size: 1.4rem;*/
font-family: inherit;
}
.breadcrumbs__link:hover {
text-decoration: underline;
text-underline-offset: 0.3rem;
color: rgb(var(--color-foreground));
}
#breadcrumbs-divider {
display: block;
height: 1px;
background-color: {{ section.settings.divider_color }};
}
</style>De section rendert niet vanuit de theme editor maar vanuit theme.liquid, direct onder de header, zodat hij op elke pagina staat behalve home, cart en 404.
{% section 'breadcrumbs' %}In de theme editor kies je daarna welk menu de structuur bepaalt (standaard main-menu), of je bij een product in meerdere collecties het kortste pad wilt, de scheidingstekens en een optionele lijn eronder. Waarom breadcrumbs in Shopify fundamenteel lastig zijn en wat je daaraan doet met collectie-context, komt in een apart stuk.
Wat je hiermee vermijdt
Vier apps minder betekent vier scripts minder op elke pagina, vier abonnementen minder en vier partijen minder die je thema mogen aanraken. De code staat in je eigen bestanden, de instellingen in de theme editor, en het enige wat je bij een thema-update opnieuw doet is die ene conditie in de productgrid terugzetten.
Veelgestelde vragen.
- Werken deze sections ook op een betaald thema?
- Meestal wel, maar niet gegarandeerd. De code leunt op de stylesheets en snippets van Dawn, zoals section-image-banner.css en card-collection. Een betaald thema heeft eigen namen voor die bestanden. Controleer de asset_url en render-regels bovenaan elke section en pas ze aan naar wat jouw thema heeft.
- Overleven deze aanpassingen een thema-update?
- De vier sections wel, omdat ze in eigen bestanden staan die Dawn niet overschrijft. De enige uitzondering is de conditie in main-collection-product-grid.liquid voor de subcollecties. Die zet je na een update opnieuw, of je laat hem weg.
- Waarom een metafield voor de subcollecties en geen blocks in de section?
- Omdat de lijst per collectie verschilt. Met blocks zou je per hoofdcollectie een aparte section-instelling nodig hebben. Een metafield op de collectie reist met de collectie mee, is te bewerken door wie de collecties beheert, en de section leest hem automatisch.
Diek ThunnissenFounder & lead developer. Bouwt, verbetert en migreert de Shopify-laag voor DTC- en B2B-merken. LinkedInPlan een gesprek →
