Dawn Theme Put link to the image banner and collage image
Solved
Hi Greetings,
I am Using Dawn Theme, And i want to put a link to the image banner and collage image.
Thanks
Accepted Solutions (2)
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Sections/collage.liquid
3. Update code below
{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-modal-video.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 -%}
<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
<div class="color-{{ section.settings.color_scheme }} gradient isolate">
<div class="page-width{% if section.settings.heading == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
<h2 class="collage-wrapper-title {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
<div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
{%- for block in section.blocks -%}
<div class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}" {{ block.shopify_attributes }}>
{%- case block.type -%}
{%- when 'image' -%}
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }}{% endif %}">
<div class="media media--transparent ratio"{% if block.settings.image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
{% if block.settings.url != blank %}<a href="{{- block.settings.url -}}">{%- endif -%}
{%- if block.settings.image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%}
{{ block.settings.image | image_url: width: 3000 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
{% if block.settings.url != blank %}</a>{%- endif -%}
</div>
</div>
{%- when 'product' -%}
{% render 'card-product',
card_product: block.settings.product,
media_aspect_ratio: 'adapt',
show_secondary_image: block.settings.second_image,
extend_height: true
%}
{%- when 'collection' -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: 'adapt',
columns: 2,
extend_height: true,
wrapper_class: section.settings.card_styles
%}
{%- when 'video' -%}
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}{{ section.settings.card_styles }} color-{{ settings.card_color_scheme }}{% endif %}">
<noscript>
<a href="{{ block.settings.video_url }}" class="collage-card__link{% if block.settings.image_padding %} collage-card-spacing{% endif %}">
<div class="media media--transparent ratio"{% if block.settings.cover_image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
{%- if block.settings.cover_image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{ block.settings.cover_image | image_url: width: 3000 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
</a>
</noscript>
<modal-opener class="no-js-hidden" data-modal="#PopupModal-{{ block.id }}">
<div class="deferred-media">
<button class="deferred-media__poster full-unstyled-link{% if block.settings.image_padding %} collage-card-spacing{% endif %}" type="button" aria-label="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}" aria-haspopup="dialog" data-media-id="{{ block.settings.video_url.id }}">
<div class="media media--transparent ratio"{% if block.settings.cover_image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
{%- if block.settings.cover_image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{ block.settings.cover_image | image_url: width: 3000 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
</button>
</div>
</modal-opener>
<modal-dialog id="PopupModal-{{ block.id }}" class="modal-video media-modal color-background-1">
<div class="modal-video__content" role="dialog" aria-label="{{ block.settings.description | escape }}" aria-modal="true" tabindex="-1">
<button id="ModalClose-{{ block.id }}" type="button" class="modal-video__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
<div class="modal-video__content-info">
<deferred-media class="modal-video__video template-popup">
<template>
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ block.settings.description | escape }}" ></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ block.settings.description | escape }}"></iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
</div>
</modal-dialog>
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.collage.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Multimedia collage",
"label": "t:sections.collage.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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "desktop_layout",
"options": [
{
"value": "left",
"label": "t:sections.collage.settings.desktop_layout.options__1.label"
},
{
"value": "right",
"label": "t:sections.collage.settings.desktop_layout.options__2.label"
}
],
"default": "left",
"label": "t:sections.collage.settings.desktop_layout.label"
},
{
"type": "select",
"id": "mobile_layout",
"options": [
{
"value": "collage",
"label": "t:sections.collage.settings.mobile_layout.options__1.label"
},
{
"value": "column",
"label": "t:sections.collage.settings.mobile_layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.collage.settings.mobile_layout.label"
},
{
"type": "select",
"id": "card_styles",
"options": [
{
"value": "none",
"label": "t:sections.collage.settings.card_styles.options__1.label"
},
{
"value": "product-card-wrapper",
"label": "t:sections.collage.settings.card_styles.options__2.label"
}
],
"default": "product-card-wrapper",
"info": "t:sections.collage.settings.card_styles.info",
"label": "t:sections.collage.settings.card_styles.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"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": "image",
"name": "t:sections.collage.blocks.image.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.collage.blocks.image.settings.image.label"
},
{
"type": "checkbox",
"id": "image_padding",
"default": false,
"label": "t:sections.collage.blocks.image.settings.image_padding.label",
"info": "t:sections.collage.blocks.image.settings.image_padding.info"
},
{
"type": "url",
"id": "url",
"label": "Link"
}
]
},
{
"type": "product",
"name": "t:sections.collage.blocks.product.name",
"settings": [
{
"type": "product",
"id": "product",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "checkbox",
"id": "second_image",
"default": false,
"label": "t:sections.collage.blocks.product.settings.second_image.label"
}
]
},
{
"type": "collection",
"name": "t:sections.collage.blocks.collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collage.blocks.collection.settings.collection.label"
}
]
},
{
"type": "video",
"name": "t:sections.collage.blocks.video.name",
"settings": [
{
"type": "image_picker",
"id": "cover_image",
"label": "t:sections.collage.blocks.video.settings.cover_image.label"
},
{
"type": "video_url",
"id": "video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"label": "t:sections.collage.blocks.video.settings.video_url.label",
"placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
"info": "t:sections.collage.blocks.video.settings.video_url.info"
},
{
"type": "text",
"id": "description",
"default": "Describe the video",
"label": "t:sections.collage.blocks.video.settings.description.label",
"info": "t:sections.collage.blocks.video.settings.description.info"
},
{
"type": "checkbox",
"id": "image_padding",
"default": false,
"label": "t:sections.collage.blocks.video.settings.image_padding.label",
"info": "t:sections.collage.blocks.video.settings.image_padding.info"
}
]
}
],
"max_blocks": 3,
"presets": [
{
"name": "t:sections.collage.presets.name",
"blocks": [
{
"type": "video"
},
{
"type": "product"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}
4. Sections/image-banner.liquid -> update code below
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- 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.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<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.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} 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 section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%- if section.settings.url_1 != blank -%}<a style="z-index: 5;" href="{{- section.settings.url_1 -}}"> </a>{%- endif -%}
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image.alt | escape
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%- if section.settings.url_2 != blank -%}<a style="z-index: 5;" href="{{- section.settings.url_2 -}}"> </a>{%- endif -%}
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<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 {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</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>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "url",
"id": "url_1",
"label": "Link 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "url",
"id": "url_2",
"label": "Link 2"
},
{
"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": "select",
"id": "image_height",
"options": [
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label",
"info": "t:sections.image-banner.settings.adapt_height_first_image.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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"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": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.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": "text",
"id": "heading",
"default": "Image banner",
"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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"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": "Button label",
"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": "Button label",
"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": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
Hi thank you for your help, upon updating the code it shows like this
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Sections/collage.liquid
3. Update code below
{{ 'collage.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-modal-video.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 -%}
<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}" media="print" onload="this.media='all'">
<div class="color-{{ section.settings.color_scheme }} gradient isolate">
<div class="page-width{% if section.settings.heading == blank %} no-heading{% endif %} section-{{ section.id }}-padding">
<h2 class="collage-wrapper-title {{ section.settings.heading_size }}">{{ section.settings.heading | escape }}</h2>
<div class="collage{% if section.settings.mobile_layout == 'collage' %} collage--mobile{% endif %}">
{%- for block in section.blocks -%}
<div class="collage__item collage__item--{{ block.type }} collage__item--{{ section.settings.desktop_layout }}" {{ block.shopify_attributes }}>
{%- case block.type -%}
{%- when 'image' -%}
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }}{% endif %}">
<div class="media media--transparent ratio"{% if block.settings.image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
{% if block.settings.url != blank %}<a href="{{- block.settings.url -}}">{%- endif -%}
{%- if block.settings.image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px)}{%- endcapture -%}
{{ block.settings.image | image_url: width: 3000 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
{% if block.settings.url != blank %}</a>{%- endif -%}
</div>
</div>
{%- when 'product' -%}
{% render 'card-product',
card_product: block.settings.product,
media_aspect_ratio: 'adapt',
show_secondary_image: block.settings.second_image,
extend_height: true
%}
{%- when 'collection' -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: 'adapt',
columns: 2,
extend_height: true,
wrapper_class: section.settings.card_styles
%}
{%- when 'video' -%}
<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}{{ section.settings.card_styles }} color-{{ settings.card_color_scheme }}{% endif %}">
<noscript>
<a href="{{ block.settings.video_url }}" class="collage-card__link{% if block.settings.image_padding %} collage-card-spacing{% endif %}">
<div class="media media--transparent ratio"{% if block.settings.cover_image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
{%- if block.settings.cover_image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{ block.settings.cover_image | image_url: width: 3000 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
</a>
</noscript>
<modal-opener class="no-js-hidden" data-modal="#PopupModal-{{ block.id }}">
<div class="deferred-media">
<button class="deferred-media__poster full-unstyled-link{% if block.settings.image_padding %} collage-card-spacing{% endif %}" type="button" aria-label="{{ 'sections.video.load_video' | t: description: block.settings.description | escape }}" aria-haspopup="dialog" data-media-id="{{ block.settings.video_url.id }}">
<div class="media media--transparent ratio"{% if block.settings.cover_image != blank %} style="--ratio-percent: {{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%"{% else %} style="--ratio-percent: 100%"{% endif %}>
<span class="deferred-media__poster-button motion-reduce">
{%- render 'icon-play' -%}
</span>
{%- if block.settings.cover_image != blank -%}
{%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
{{ block.settings.cover_image | image_url: width: 3000 | image_tag:
loading: 'lazy',
sizes: sizes,
widths: '550, 720, 990, 1100, 1500, 2200, 3000'
}}
{%- else -%}
{{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
{%- endif -%}
</div>
</button>
</div>
</modal-opener>
<modal-dialog id="PopupModal-{{ block.id }}" class="modal-video media-modal color-background-1">
<div class="modal-video__content" role="dialog" aria-label="{{ block.settings.description | escape }}" aria-modal="true" tabindex="-1">
<button id="ModalClose-{{ block.id }}" type="button" class="modal-video__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
<div class="modal-video__content-info">
<deferred-media class="modal-video__video template-popup">
<template>
{%- if block.settings.video_url.type == 'youtube' -%}
<iframe src="https://www.youtube.com/embed/{{ block.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ block.settings.description | escape }}" ></iframe>
{%- else -%}
<iframe src="https://player.vimeo.com/video/{{ block.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ block.settings.description | escape }}"></iframe>
{%- endif -%}
</template>
</deferred-media>
</div>
</div>
</modal-dialog>
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.collage.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Multimedia collage",
"label": "t:sections.collage.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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "desktop_layout",
"options": [
{
"value": "left",
"label": "t:sections.collage.settings.desktop_layout.options__1.label"
},
{
"value": "right",
"label": "t:sections.collage.settings.desktop_layout.options__2.label"
}
],
"default": "left",
"label": "t:sections.collage.settings.desktop_layout.label"
},
{
"type": "select",
"id": "mobile_layout",
"options": [
{
"value": "collage",
"label": "t:sections.collage.settings.mobile_layout.options__1.label"
},
{
"value": "column",
"label": "t:sections.collage.settings.mobile_layout.options__2.label"
}
],
"default": "collage",
"label": "t:sections.collage.settings.mobile_layout.label"
},
{
"type": "select",
"id": "card_styles",
"options": [
{
"value": "none",
"label": "t:sections.collage.settings.card_styles.options__1.label"
},
{
"value": "product-card-wrapper",
"label": "t:sections.collage.settings.card_styles.options__2.label"
}
],
"default": "product-card-wrapper",
"info": "t:sections.collage.settings.card_styles.info",
"label": "t:sections.collage.settings.card_styles.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"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": "image",
"name": "t:sections.collage.blocks.image.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.collage.blocks.image.settings.image.label"
},
{
"type": "checkbox",
"id": "image_padding",
"default": false,
"label": "t:sections.collage.blocks.image.settings.image_padding.label",
"info": "t:sections.collage.blocks.image.settings.image_padding.info"
},
{
"type": "url",
"id": "url",
"label": "Link"
}
]
},
{
"type": "product",
"name": "t:sections.collage.blocks.product.name",
"settings": [
{
"type": "product",
"id": "product",
"label": "t:sections.collage.blocks.product.settings.product.label"
},
{
"type": "checkbox",
"id": "second_image",
"default": false,
"label": "t:sections.collage.blocks.product.settings.second_image.label"
}
]
},
{
"type": "collection",
"name": "t:sections.collage.blocks.collection.name",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "t:sections.collage.blocks.collection.settings.collection.label"
}
]
},
{
"type": "video",
"name": "t:sections.collage.blocks.video.name",
"settings": [
{
"type": "image_picker",
"id": "cover_image",
"label": "t:sections.collage.blocks.video.settings.cover_image.label"
},
{
"type": "video_url",
"id": "video_url",
"accept": [
"youtube",
"vimeo"
],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"label": "t:sections.collage.blocks.video.settings.video_url.label",
"placeholder": "t:sections.collage.blocks.video.settings.video_url.placeholder",
"info": "t:sections.collage.blocks.video.settings.video_url.info"
},
{
"type": "text",
"id": "description",
"default": "Describe the video",
"label": "t:sections.collage.blocks.video.settings.description.label",
"info": "t:sections.collage.blocks.video.settings.description.info"
},
{
"type": "checkbox",
"id": "image_padding",
"default": false,
"label": "t:sections.collage.blocks.video.settings.image_padding.label",
"info": "t:sections.collage.blocks.video.settings.image_padding.info"
}
]
}
],
"max_blocks": 3,
"presets": [
{
"name": "t:sections.collage.presets.name",
"blocks": [
{
"type": "video"
},
{
"type": "product"
},
{
"type": "collection"
}
]
}
]
}
{% endschema %}
4. Sections/image-banner.liquid -> update code below
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- 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.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<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.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} 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 section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%- if section.settings.url_1 != blank -%}<a style="z-index: 5;" href="{{- section.settings.url_1 -}}"> </a>{%- endif -%}
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image.alt | escape
}}
</div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%- if section.settings.url_2 != blank -%}<a style="z-index: 5;" href="{{- section.settings.url_2 -}}"> </a>{%- endif -%}
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<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 {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</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>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "url",
"id": "url_1",
"label": "Link 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "url",
"id": "url_2",
"label": "Link 2"
},
{
"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": "select",
"id": "image_height",
"options": [
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label",
"info": "t:sections.image-banner.settings.adapt_height_first_image.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": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"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": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.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": "text",
"id": "heading",
"default": "Image banner",
"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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"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": "Button label",
"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": "Button label",
"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": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
Hi thank you for your help, upon updating the code it shows like this
Hi, link is working upon activating it my photo became like this
The original photo is this
Hi
The hyperlinking option is activated for 'Collage' section.
But when we link the image to a destination listing, the collage image becomes a blank image.
Any idea how to fix this?
Also this additional checkbox appears. Even if you check it, nothing happens but leave the blank images as is.
Thankful if there is any solution for this.
Community Blog Articles
Canadian merchants: Update account details by March 24, 2025 to continue us...
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
New learning path from Shopify Academy: How to create a digital marketing s...
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025