In Pipeline theme there is a collage option within banner image section. I was able to add a link option onto the collage settings- but the image doesn’t actually direct you to the link when clicked upon.
I would love to have the option to add a title as well!
Thank You
<!-- /sections/section-hero.liquid -->
{%- assign scroll_class = '' -%}
{% if section.settings.height == 'use_screen_full' %}
{%- assign scroll_class = 'has-scroll-arrow' -%}
{%- endif -%}
{% assign hero_content_class = 'hero__content' %}
{% if section.settings.width == 'wrapper--tiny' or section.settings.width == 'wrapper--narrow' %}
{% assign hero_content_class = 'hero__content hero__content--large' %}
{% endif %}
<div class="section--image fade-in-child js-overflow-container {{ scroll_class }}"
data-section-id="{{ section.id }}"
data-section-type="hero"
{% if section.settings.width == "wrapper--none" and section.settings.padding_top == 0 %} data-overlay-header {% endif %}
style="
--PT: {{ section.settings.padding_top }}px;
--PB: {{ section.settings.padding_bottom }}px;
--CONTENT-WIDTH: {{ section.settings.content_width }}px;">
<div class="{{ section.settings.width }} section-padding">
<div class="section__inner">
<div class="hero__content__wrapper {{ section.settings.text_align }}">
<div class="{{ hero_content_class }} {{ section.settings.color_bg }} js-overflow-content">
{%- assign animation_anchor = "[data-section-id='" | append: section.id | append: "']" -%}
{%- assign elements_counter = 0 -%}
<div class="text__standard {{ section.settings.text_color }} {% if section.settings.enable_overlay_text %} backdrop--hero{% endif %}" {% if section.settings.enable_overlay_text %} style="--bg: {{ section.settings.overlay_color }}; --opacity: {{ section.settings.overlay_opacity | times: 0.01 }};"{% endif %}>
{% for block in section.blocks %}
{% case block.type %}
{% when 'kicker' %}
{% unless block.settings.kicker == '' %}
{%- assign elements_counter = elements_counter | plus: 1 -%}
{%- assign font_size_class = block.settings.text_size | prepend: 'accent-size-' -%}
{%- assign flourish_class = '' -%}
{%- if block.settings.enable_line -%}
{%- assign flourish_class = 'block__kicker--flourished' -%}
{%- endif -%}
<div class="hero__kicker {{ font_size_class }} {{ flourish_class }}"
data-aos="hero"
data-aos-anchor="{{ animation_anchor }}"
data-aos-order="{{ elements_counter }}"
{{ block.shopify_attributes }}>
<p>{{ block.settings.kicker }}</p>
</div>
{% endunless %}
{% when 'heading' %}
{% unless block.settings.title == '' %}
{%- assign elements_counter = elements_counter | plus: 1 -%}
{% assign heading_size_class = block.settings.text_size | prepend: 'heading-size-' %}
<div class="hero__title {{ heading_size_class }}"
data-aos="hero"
data-aos-anchor="{{ animation_anchor }}"
data-aos-order="{{ elements_counter }}"
{{ block.shopify_attributes }}>
<p>{{ block.settings.title }}</p>
</div>
{% endunless %}
{% when 'text' %}
{% unless block.settings.richtext == '' %}
{%- assign elements_counter = elements_counter | plus: 1 -%}
{% assign font_size_class = block.settings.text_size | prepend: 'body-size-' %}
<div class="hero__description rte {{ font_size_class }}"
data-aos="hero"
data-aos-anchor="{{ animation_anchor }}"
data-aos-order="{{ elements_counter }}"
{{ block.shopify_attributes }}>
{{ block.settings.richtext }}
</div>
{% endunless %}
{% when 'button' %}
{% assign buttons_markup = '' %}
{% for i in (1..3) %}
{% assign btn_text = 'link_text_' | append: forloop.index %}
{% assign btn_text = block.settings[btn_text] %}
{% assign btn_link = 'link_' | append: forloop.index %}
{% assign btn_link = block.settings[btn_link] %}
{% assign btn_size = 'button_size_' | append: forloop.index %}
{% assign btn_size = block.settings[btn_size] %}
{% assign btn_style = 'button_style_' | append: forloop.index %}
{% assign btn_style = block.settings[btn_style] %}
{% assign btn_color = 'button_color_' | append: forloop.index %}
{% assign btn_color = block.settings[btn_color] %}
{% if btn_text != blank %}
{% assign elements_counter = elements_counter | plus: 1 %}
{% capture buttons_markup %}
{{ buttons_markup }}
<a
class="standard__cta hero__btn {{ btn_style }} {{ btn_color }} {{ btn_size }}"
href="{{ btn_link | default: '#' }}"
data-aos="hero"
data-aos-anchor="{{ animation_anchor }}"
data-aos-order="{{ elements_counter }}">
{{ btn_text | escape }}
</a>
{% endcapture %}
{% endif %}
{% endfor %}
<div class="hero__cta__wrapper" {{ block.shopify_attributes }}>
{{ buttons_markup }}
</div>
{% when 'image' %}
{%- assign elements_counter = elements_counter | plus: 1 -%}
<div class="standard__image"
style="width: {{ block.settings.image_max_limit | append: 'px' }}; max-width: 100%;"
data-aos="hero"
data-aos-anchor="{{ animation_anchor }}"
data-aos-order="{{ elements_counter }}"
{{ block.shopify_attributes }}>
{%- if block.settings.image_link != blank -%}<a href="{{ block.settings.image_link }}">{%- endif -%}
{%- assign wh_ratio = block.settings.image.aspect_ratio | default: 1 -%}
{%- capture sizes -%}
min({{ block.settings.image_max_limit }}px, 100vw)
{%- endcapture -%}
{% render 'image', img_object: block.settings.image, sizes: sizes, wh_ratio: wh_ratio, placeholder: 'logo', preload: preload, loading: loading %}
{%- if block.settings.image_link != blank -%}</a>{%- endif -%}
</div>
{% when 'countdown' %}
{%- render 'countdown-timer',
end_date: block.settings.end_date,
end_time: block.settings.end_time,
period: block.settings.period,
digit_size: block.settings.digit_size,
digit_size_mobile: block.settings.digit_size_mobile,
end_message: block.settings.end_message,
hide_on_complete: block.settings.hide_on_complete,
animation_order: elements_counter,
animation_anchor: animation_anchor
-%}
{% when 'spacer' %}
<div class="hero__spacer{% if block.settings.show_line %} hero__spacer--line{% endif %}"
data-aos="hero"
data-aos-anchor="{{ animation_anchor }}"
data-aos-order="{{ elements_counter }}"
style="--padding: {{ block.settings.spacer_padding | divided_by: 2 }}px;"
{{ block.shopify_attributes }}></div>
{% endcase %}
{% endfor %}
</div>
</div>
</div>
{% unless section.settings.enable_overlay_text %}
<div class="image-overlay" style="--bg: {{ section.settings.overlay_color }}; opacity: {{ section.settings.overlay_opacity | times: 0.01 }};"></div>
{% endunless %}
{% for block in section.blocks %}
{% case block.type %}
{% when 'collage' %}
<div class="standard__collage {{ block.settings.mobile_display_class }}"
style="
--COLLAGE-WIDTH: {{ block.settings.image_max_limit | append: 'px' }};
--COLLAGE-TOP: {{ block.settings.position_top | append: '%' }};
--COLLAGE-LEFT: {{ block.settings.position_left | append: '%' }};
"
{{ block.shopify_attributes }}>
{%- assign wh_ratio = block.settings.image.aspect_ratio | default: 1 -%}
{%- capture sizes -%}
min({{ block.settings.image_max_limit }}px, 100vw)
{%- endcapture -%}
{% render 'image', img_object: block.settings.image, sizes: sizes, wh_ratio: wh_ratio, placeholder: 'logo', preload: preload, loading: loading, loading_animation: false, class: block.settings.shape_class %}
</div>
{% endcase %}
{% endfor %}
{% if section.settings.link_text == '' and section.settings.link %}
<a class="link-over-image" href="{{ section.settings.link }}" aria-label="{{ section.settings.title | strip_html | escape }}"></a>
{% endif %}
{% if section.settings.preload_image %}
{%- assign preload = true -%}
{%- assign loading = 'eager' -%}
{%- assign fetchpriority = 'high' -%}
{% else %}
{%- assign preload = false -%}
{%- assign loading = 'lazy' -%}
{% endif %}
{%- assign alt = section.settings.image.alt | default: 'Banner Image' -%}
{% render 'image-parallax', img_object: section.settings.image, img_object_mobile: section.settings.mobile_image, frame_height_class: section.settings.height, alt: alt, preload: preload, loading: loading, fetchpriority: fetchpriority %}
{% if section.settings.height == 'use_screen_full' %}
<div class="scroll_icon_wrap">
<button data-scroll-down class="scroll_link bloop {{ section.settings.text_color }}" aria-label="{{ 'general.accessibility.scroll' | t }}">
<span class="scroll_icon">{% render 'icon-core-chevron-down' %}</span>
</button>
</div>
{% endif %}
</div>
</div>
</div>
{% schema %}
{
"name": "Image banner",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image"
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "use_screen_two_thirds",
"options": [
{ "value": "use_screen_full", "label": "Full screen height"},
{ "value": "use_screen_three_quarters", "label": "Three quarters of screen height"},
{ "value": "use_screen_two_thirds", "label": "Two thirds of screen height"},
{ "value": "use_screen_one_half", "label": "One half of screen height"},
{ "value": "use_screen_one_third", "label": "One third of screen height"},
{ "value": "use_screen_one_fifth", "label": "One fifth of screen height"},
{ "value": "use_pixels_800", "label": "800px" },
{ "value": "use_pixels_650", "label": "650px" },
{ "value": "use_pixels_500", "label": "500px" },
{ "value": "use_image", "label": "Image height"}
]
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"label": "Image overlay opacity",
"info": "Increase contrast for legible text.",
"default": 15
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#000"
},
{
"type": "checkbox",
"id": "enable_overlay_text",
"label": "Overlay behind text only",
"default": false
},
{
"type": "checkbox",
"id": "preload_image",
"label": "Prioritize image load",
"default": false,
"info": "Prioritize loading this image before other images. Helpful when this section is first on a page, harmful when this section is below other image sections."
},
{
"type": "header",
"content": "Text"
},
{
"type": "range",
"id": "content_width",
"label": "Width limit",
"unit": "px",
"min": 100,
"max": 2000,
"step": 50,
"default": 2000
},
{
"type": "select",
"id": "text_align",
"label": "Alignment",
"default": "align--middle-center",
"options": [
{ "value": "align--top-left", "label": "Top left"},
{ "value": "align--top-center", "label": "Top center"},
{ "value": "align--top-right", "label": "Top right"},
{ "value": "align--middle-left", "label": "Middle left"},
{ "value": "align--middle-center", "label": "Absolute center"},
{ "value": "align--middle-right", "label": "Middle right"},
{ "value": "align--bottom-left", "label": "Bottom left"},
{ "value": "align--bottom-center", "label": "Bottom center"},
{ "value": "align--bottom-right", "label": "Bottom right"}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "text--white",
"options": [
{ "value": "text--neutral", "label": "Normal text"},
{ "value": "text--white", "label": "White"},
{ "value": "text--primary", "label": "Primary accent"},
{ "value": "text--secondary", "label": "Secondary accent"},
{ "value": "text--black", "label": "Black"},
{ "value": "text--invert--primary", "label": "Primary dark accent"},
{ "value": "text--invert--secondary", "label": "Secondary dark accent"},
{ "value": "text--invert", "label": "Inverted text color"},
{ "value": "text--bright--primary", "label": "Primary bright accent"},
{ "value": "text--bright--secondary", "label": "Secondary bright accent"}
]
},
{
"type": "select",
"id": "color_bg",
"label": "Background color",
"default": "hero__content--transparent",
"options": [
{ "value": "hero__content--transparent", "label": "Transparent"},
{ "value": "palette--light bg--neutral", "label": "White"},
{ "value": "palette--light bg--accent", "label": "Light"},
{ "value": "palette--dark bg--invert", "label": "Dark"},
{ "value": "palette--dark bg--invert--accent", "label": "Dark accent"},
{ "value": "palette--bright bg--bright", "label": "Bright"},
{ "value": "palette--bright bg--bright--accent", "label": "Bright accent"}
]
},
{
"type": "header",
"content": "Section spacing"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wrapper--none",
"options": [
{ "value": "wrapper--none", "label": "Full width" },
{ "value": "wrapper--full", "label": "Full width padded" },
{ "value": "wrapper", "label": "Page width" },
{ "value": "wrapper--narrow", "label": "Page width narrow" },
{ "value": "wrapper--tiny", "label": "Page width extra narrow" }
]
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 180,
"step": 2,
"unit": "px",
"label": "Padding top",
"default": 0
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 180,
"step": 2,
"unit": "px",
"label": "Padding bottom",
"default": 0
}
],
"blocks": [
{
"type": "button",
"name": "Buttons",
"settings": [
{
"type": "header",
"content": "Button 1"
},
{
"type": "text",
"id": "link_text_1",
"label": "Text",
"default": "View products"
},
{
"type": "url",
"id": "link_1",
"label": "Link"
},
{
"type": "select",
"id": "button_size_1",
"label": "Size",
"default": "btn--long",
"options": [
{"value": "btn--small", "label": "Small button"},
{"value": "btn--medium", "label": "Medium button"},
{"value": "btn--large", "label": "Large button"},
{"value": "btn--long", "label": "Long button"}
]
},
{
"type": "select",
"id": "button_style_1",
"label": "Style",
"default": "btn",
"options": [
{ "value": "btn-text-thick-line", "label": "Capitalized text" },
{ "value": "btn", "label": "Solid button" },
{ "value": "btn--soft", "label": "Soft button" },
{ "value": "btn--outline", "label": "Outlined button" }
]
},
{
"type": "select",
"id": "button_color_1",
"label": "Color",
"default": "btn--white",
"options": [
{ "value": "btn--primary", "label": "Bright accent" },
{ "value": "btn--secondary", "label": "Secondary accent" },
{ "value": "btn--neutral", "label": "Text color" },
{ "value": "btn--black", "label": "Black" },
{ "value": "btn--white", "label": "White" }
]
},
{
"type": "header",
"content": "Button 2"
},
{
"type": "text",
"id": "link_text_2",
"label": "Text",
"default": "Learn more"
},
{
"type": "url",
"id": "link_2",
"label": "Link"
},
{
"type": "select",
"id": "button_size_2",
"label": "Size",
"default": "btn--long",
"options": [
{"value": "btn--small", "label": "Small button"},
{"value": "btn--medium", "label": "Medium button"},
{"value": "btn--large", "label": "Large button"},
{"value": "btn--long", "label": "Long button"}
]
},
{
"type": "select",
"id": "button_style_2",
"label": "Style",
"default": "btn-text-thick-line",
"options": [
{ "value": "btn-text-thick-line", "label": "Capitalized text" },
{ "value": "btn", "label": "Solid button" },
{ "value": "btn--soft", "label": "Soft button" },
{ "value": "btn--outline", "label": "Outlined button" }
]
},
{
"type": "select",
"id": "button_color_2",
"label": "Color",
"default": "btn--white",
"options": [
{ "value": "btn--primary", "label": "Bright accent" },
{ "value": "btn--secondary", "label": "Secondary accent" },
{ "value": "btn--neutral", "label": "Text color" },
{ "value": "btn--black", "label": "Black" },
{ "value": "btn--white", "label": "White" }
]
},
{
"type": "header",
"content": "Button 3"
},
{
"type": "text",
"id": "link_text_3",
"label": "Text"
},
{
"type": "url",
"id": "link_3",
"label": "Link"
},
{
"type": "select",
"id": "button_size_3",
"label": "Size",
"default": "btn--long",
"options": [
{"value": "btn--small", "label": "Small button"},
{"value": "btn--medium", "label": "Medium button"},
{"value": "btn--large", "label": "Large button"},
{"value": "btn--long", "label": "Long button"}
]
},
{
"type": "select",
"id": "button_style_3",
"label": "Style",
"default": "btn-text-thick-line",
"options": [
{ "value": "btn-text-thick-line", "label": "Capitalized text" },
{ "value": "btn", "label": "Solid button" },
{ "value": "btn--soft", "label": "Soft button" },
{ "value": "btn--outline", "label": "Outlined button" }
]
},
{
"type": "select",
"id": "button_color_3",
"label": "Color",
"default": "btn--white",
"options": [
{ "value": "btn--primary", "label": "Bright accent" },
{ "value": "btn--secondary", "label": "Secondary accent" },
{ "value": "btn--neutral", "label": "Text color" },
{ "value": "btn--black", "label": "Black" },
{ "value": "btn--white", "label": "White" }
]
}
]
},
{
"type": "kicker",
"name": "Kicker",
"settings": [
{
"type": "text",
"id": "kicker",
"label": "Kicker",
"default": "Introducing"
},
{
"type": "checkbox",
"id": "enable_line",
"label": "Enable kicker line",
"default": false
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 1,
"max": 15,
"step": 1,
"default": 4
}
]
},
{
"type": "heading",
"name": "Heading",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Image banner"
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 1,
"max": 15,
"step": 1,
"default": 10
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Text",
"default": "<p>This area is used to describe your store.</p>"
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 1,
"max": 15,
"step": 1,
"default":6
}
]
},
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_max_limit",
"min": 10,
"max": 900,
"step": 10,
"unit": "px",
"label": "Max width",
"default": 300
},
{
"type":"url",
"id":"image_link",
"label":"Link"
}
]
},
{
"type": "collage",
"name": "Collage",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image collage"
},
{
"type": "range",
"id": "image_max_limit",
"min": 10,
"max": 900,
"step": 10,
"unit": "px",
"label": "Image width",
"default": 300
},
{
"type":"url",
"id":"image_link",
"label":"Link"
},
{
"type": "select",
"id": "shape_class",
"label": "Shape",
"default": "",
"options": [
{"value": "", "label": "None"},
{"value": "rounded-lg", "label": "Rounded"},
{"value": "radius-keyhole", "label": "Keyhole"},
{"value": "rounded-full", "label": "Circle"},
{"value": "clip-sunburst", "label": "Sunburst"},
{"value": "clip-hexagon", "label": "Hexagon"},
{"value": "clip-octagon", "label": "Octagon"},
{"value": "clip-parallelogram", "label": "Parallelogram"},
{"value": "radius-blob-1", "label": "Blob 1"},
{"value": "radius-blob-2", "label": "Blob 2"},
{"value": "radius-blob-3", "label": "Blob 3"},
{"value": "radius-blob-4", "label": "Blob 4"},
{"value": "mask-stamp-sharp", "label": "Stamp sharp"},
{"value": "mask-stamp-rounded", "label": "Stamp rounded"},
{"value": "mask-ticket-stub", "label": "Ticket"}
]
},
{
"type": "header",
"content": "Image position"
},
{
"type": "range",
"id": "position_left",
"min": 0,
"max": 100,
"step": 1,
"label": "Horizontal",
"unit": "%",
"default": 50
},
{
"type": "range",
"id": "position_top",
"min": 0,
"max": 100,
"step": 1,
"label": "Vertical",
"unit": "%",
"default": 50
},
{
"type": "select",
"id": "mobile_display_class",
"label": "Show collage image",
"default": "",
"options": [
{"value": "", "label": "Mobile and desktop"},
{"value": "mobile-only","label": "Mobile only"},
{"value": "hidden-mobile", "label": "Desktop only"}
]
}
]
},
{
"type": "countdown",
"name": "Countdown",
"settings": [
{
"type": "text",
"id": "end_date",
"label": "End date",
"placeholder": "2023-12-31 23:59",
"default": "2024-12-31",
"info": "Use format \"YYYY-MM-DD\". Expiration date is based on the [store primary timezone](/admin/settings/general)."
},
{
"type": "text",
"id": "end_time",
"label": "End time",
"default": "11:59",
"placeholder": "11:59",
"info": "Use 12-hour time convention in format \"HH:MM\""
},
{
"type": "radio",
"id": "period",
"label": "AM/PM",
"default": "am",
"options": [
{ "value": "am", "label": "AM" },
{ "value": "pm", "label": "PM" }
]
},
{
"type": "inline_richtext",
"id": "end_message",
"label": "End of timer message",
"default": "Offer has expired"
},
{
"type": "checkbox",
"id": "hide_on_complete",
"label": "Hide section after end of timer",
"default": false
},
{
"type": "range",
"id": "digit_size",
"label": "Text size",
"min": 1,
"max": 15,
"step": 1,
"default": 8
},
{
"type": "range",
"id": "digit_size_mobile",
"label": "Mobile text size",
"min": 1,
"max": 10,
"step": 1,
"default": 6
}
]
},
{
"type": "spacer",
"name": "Spacer",
"settings": [
{
"type": "range",
"id": "spacer_padding",
"label": "Padding",
"unit": "px",
"min": 0,
"max": 100,
"step": 2,
"default": 40
},
{
"type": "checkbox",
"id": "show_line",
"label": "Show line",
"default": false
}
]
}
],
"presets": [
{
"name": "Image banner",
"category": "Image",
"blocks": [
{
"type": "kicker"
},
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
],
"disabled_on": {
"groups": ["header","aside"]
}
}
{% endschema %}