Adding Banner Image To Product Grid In Collection Template

[albertloekito]

How can I add a banner image within the product grid in the collection template? (see below)

I added this code to my collection template {%- if forloop.index == 1 -%} and it places the images on the second product grid instead of the first one, how do I put the images on the first one? (see below)

@LitExtension

[LitExtension · Accepted solution]

Hi @albertloekito,

Sorry, you didn't tag me, so I didn't get the notification before.

Please change all code:

<div data-section-id="{{ section.id }}" data-section-type="collection-template" data-ajax-filtering="{{ section.settings.ajax_products }}" data-filter-section-id="{{ section.id }}" data-components="accordion,modal,price-range" data-cc-animate>
{% paginate collection.products by section.settings.coll_num_per_page_int %}

{%- liquid
if section.settings.show_image_behind_heading and collection.image
assign header_image_enabled = true
else
assign header_image_enabled = false
endif
assign current_sort = collection.sort_by | default: collection.default_sort_by

assign show_filters = section.settings.enable_filtering
if collection.filters == empty
assign show_filters = true
endif
-%}

{%- liquid
if section.settings.enable_subcoll and section.settings.subcoll_menu != blank
assign current_link_parent = false
for link in linklists[section.settings.subcoll_menu].links
if link.links != empty
if link.type == 'collection_link' and link.object.handle == collection.handle
assign current_link_parent = link
break
elsif link.type == 'catalog_link' and collection.handle == 'all'
assign current_link_parent = link
break
endif
endif
if link.links != blank and current_link_parent == false
for child_link in link.links
if child_link.type == 'collection_link' and child_link.object.handle == collection.handle
if child_link.links == empty
assign current_link_parent = link
else
assign current_link_parent = child_link
endif
break
endif
if child_link.type == 'catalog_link' and collection.handle == 'all'
if child_link.links == empty
assign current_link_parent = link
else
assign current_link_parent = child_link
endif
break
endif
if child_link.links != blank and current_link_parent == false
for child_child_link in child_link.links
if child_child_link.type == 'collection_link' and child_child_link.object.handle == collection.handle
assign current_link_parent = child_link
break
elsif child_child_link.type == 'catalog_link' and collection.handle == 'all'
assign current_link_parent = child_link
break
endif
endfor
endif
endfor
endif
endfor
endif
-%}

{%- if current_link_parent -%}
{%- assign subcoll_count = 0 -%}
{% capture subcollection_html %}
{% if section.settings.subcoll_style == 'buttons' %}
<div class="container">
<div class="subcollection-links subcollection-links--buttons align-center lightly-spaced-row-above{% if header_image_enabled %} image-overlay__over{% endif %}">
{%- for link in current_link_parent.links -%}
{%- unless link.object.handle == collection.handle or link.type != 'collection_link' -%}
{%- assign subcoll_count = subcoll_count | plus: 1 -%}
<a class="btn btn--tertiary" href="{{ link.url }}">{{ link.title | escape }}</a>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{% else %}
{% unless section.settings.subcoll_gall_full_width %}
<div class="container container--not-mobile lightly-spaced-row-above lightly-spaced-row-above--not-mobile">
{% endunless %}
<div class="subcollection-links subcollection-links--gallery {% if section.settings.subcoll_gall_full_width %}subcollection-links--is-full-width{% endif %} {% if section.settings.subcoll_gall_mobile_layout == 'hide' %}desktop-only{% endif %} {% if header_image_enabled %}subcollection-links--under-image-header{% endif %}">
<div class="gallery slick-slider-overlay-dots {% if section.settings.subcoll_gall_enable_margin %} gallery--with-margins{% endif %}{% if section.settings.subcoll_gall_full_width and section.settings.subcoll_gall_enable_margin %} gallery--with-vertical-outer-padding{% endif %}"
data-mobile-item-count="{{ section.settings.subcoll_gall_mobile_layout }}">
{%- for link in current_link_parent.links -%}
{%- unless link.object.handle == collection.handle or link.type != 'collection_link' -%}
{%- assign subcoll_count = subcoll_count | plus: 1 -%}
<div class="gallery__item
gallery__item--shape-fixed
gallery__item--shape-{{ section.settings.subcoll_gall_shape }}
gallery__item-{{ forloop.index }}
image-overlay
image-overlay--bg-{{ section.settings.subcoll_gall_overlay_style }}
image-overlay--edge-boxes
lazyload--placeholder
{% unless section.settings.subcoll_gall_full_width and section.settings.subcoll_gall_enable_margin == false %}image-overlay--edge-boxes--pad-to-corner{% endunless %}
">
<a class="image-overlay__image-link" href="{{ link.url }}">
{%- liquid
if link.object.featured_image
assign subcoll_image = link.object.featured_image
else
assign subcoll_image = false
endif
-%}
{%- if subcoll_image -%}
<div class="gallery__image rimage-outer-wrapper rimage-background lazyload--manual fade-in"
data-bgset="{% render 'bgset', image: subcoll_image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.image_position }}">
<noscript>
<div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: subcoll_image.aspect_ratio | times: 100 }}%">
<img src="{{ subcoll_image | img_url: '512x512' }}" alt="{{ subcoll_image.alt | escape }}" class="rimage__image">
</div>
</noscript>
</div>
{%- else -%}
<div class="gallery__image placeholder-image dark">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}

<div class="overlay-text overlay--v-{{ section.settings.subcoll_gall_text_alignment | split: ' ' | first }} overlay--h-{{ section.settings.subcoll_gall_text_alignment | split: ' ' | last }} image-overlay__over">
<div class="overlay-text__inner">
<div class="overlay-text__text">
<h2 class="overlay-text__title h4-style">{{ link.title }}</h2>
</div>
</div>
</div>
</a>
</div>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{% unless section.settings.subcoll_gall_full_width %}
</div>
{% endunless %}
{% endif %}
{% endcapture %}
{%- liquid
if subcoll_count < 2
assign subcollection_html = ''
endif
-%}
{%- endif -%}

{% if header_image == blank and collection.handle == 'sale-boots-booties' or collection.handle == 'trend-toecaps' or collection.handle == 'warm-up-for-winter-sale' or collection.handle == 'sneaker-boots' or collection.handle == 'sale-clogs-mules' or collection.handle == 'pointed-toe' or collection.handle == 'layers' or collection.handle == 'denim-lovers' or collection.handle == 'think-pink' or collection.handle == 'fresh-picks-for-you' or collection.handle == 'lug-soles' or collection.handle == 'holiday-dressing' or collection.handle == 'stylist-picks' or collection.handle == 'camo-prints' or collection.handle == 'cozy-essentials' or collection.handle == 'going-natural' or collection.handle == 'metallics' or collection.handle == 'good-sport' or collection.handle == 'top-rated' or collection.handle == 'premium-leather' or collection.handle == 'wedding-collection' or collection.handle == 'sale-sandals' or collection.handle == 'sale-wedges-heels' or collection.handle == 'sale-boots-mules' or collection.handle == 'sale-sneakers-flats' or collection.handle == 'final-sale' or collection.handle == 'go-west' or collection.handle == 'trend-edit' %}
<div class="container">
<h1 class="pagetitle-collection">{{ collection.title | escape }}</h1> </div>
{% else %}

{% if header_image_enabled %}
<div class="page-header page-header--with-background page-header--background-desktop-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper">
<div class="rimage-background lazyload fade-in"
data-bgset="{% render 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"></div>
<div class="page-header-background-mobile-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper">
<div class="rimage-background lazyload fade-in"
data-bgset="{% render 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"></div>
<div class="overlay-text overlay-text--inline overlay--v-center overlay--h-center image-overlay__over" data-cc-animate data-cc-animate-delay="0.2s">
<div class="overlay-text__inner">
<div class="overlay-text__text">

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
<div class="overlay-text__rte rte cf align-center reading-width large-text">{{ collection.description }}</div>
{% endif %}

{%- if current_link_parent and section.settings.subcoll_style == 'buttons' -%}
{{ subcollection_html }}
{%- endif -%}{% endif %}
</div>
</div>
</div>
</div>
</div>
{% else %}
{{ subcollection_html }}
<div class="page-header page-header--with-upper-spacing">
<div class="container">
<h1 class="pagetitle h3-style">{{ collection.title | escape }}</h1>

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
<div class="rte cf align-center reading-width">{{ collection.description }}</div>
{% endif %}
</div>
</div>
{% endif %}

{%- if current_link_parent and header_image_enabled and section.settings.subcoll_style != 'buttons' -%}
{{ subcollection_html }}
{%- endif -%}

<div class="container{% if settings.use_fullwidth_layout %} container--no-max{% endif %}">
<div class="utility-bar" data-ajax-container data-ajax-scroll-to>
<div class="utility-bar__left">
{% if section.settings.coll_show_sort or show_filters %}
<a href="#" class="toggle-btn utility-bar__item{% if section.settings.collapse_tag_sidebar_by_default == false %} toggle-btn--revealed-desktop{% endif %}{% if show_filters == false %} mobile-only{% endif %}" data-toggle-filters>
<span class="button-icon">{% render 'svg-filter' %}</span>
<span>{{ 'collections.filtering.filter' | t }}</span>
{% liquid
assign filter_count = 0
for filter in collection.filters
assign filter_count = filter_count | plus: filter.active_values.size
if filter.type == 'price_range'
if filter.min_value.value != nil or filter.max_value.value != nil
assign filter_count = filter_count | plus: 1
endif
endif
endfor
%}
{% if filter_count > 0 %}
<span class="toggle-btn__count">({{ filter_count }})</span>
{% endif %}
<span class="toggle-btn__chevron ltr-icon">{% render 'svg-chevron-right', stroke_width: 1.3 %}</span>
</a>
{% endif %}
</div>

{% if section.settings.show_total and paginate.items > 0 %}
<div class="utility-bar__centre">
<div class="utility-bar__item">{{ 'collections.general.product_count' | t: count: paginate.items }}</div>
</div>
{% endif %}

<div class="utility-bar__right">
{% if section.settings.coll_show_sort %}
<span class="utility-bar__item desktop-only">
<div class="link-dropdown link-dropdown--right-aligned">
<div class="visually-hidden" id="sort-dropdown-heading">{{ 'collections.sorting.title' | t | escape }}</div>
<button class="link-dropdown__button notabutton" aria-expanded="false" aria-controls="sort-dropdown-options" aria-describedby="sort-dropdown-heading">
<span class="link-dropdown__button-text">
{%- for option in collection.sort_options -%}
{%- if current_sort == option.value -%}
{{ option.name | escape }}
{%- break -%}
{%- endif -%}
{%- endfor -%}
</span>
<span class="link-dropdown__button-icon">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</button>
<div class="link-dropdown__options" id="sort-dropdown-options">
{%- for option in collection.sort_options -%}
{% unless option.value contains 'created-ascending' or option.value contains 'created-descending' or option.value contains 'best-selling' %}
{%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%}
<a href="{{ request.path | sort_by: option.value | escape }}" class="link-dropdown__link{% if current_sort == option.value %} link-dropdown__link--active{% endif %}">{{ option.name | escape }}</a>
{%- endif -%}
{% endunless %}
{%- endfor -%}
</div>
</div>
</span>
{% endif %}
<span class="utility-bar__item mobile-only">
<div class="layout-switchers">
<a class="layout-switch layout-switch--two-columns{% if settings.prod_thumb_mob_per_row == '2' %} layout-switch--active{% endif %}" href="#">{%- render 'svg-grid', stroke_width: 1.3 -%}</a>
<a class="layout-switch layout-switch--one-column{% if settings.prod_thumb_mob_per_row == '1' %} layout-switch--active{% endif %}" href="#">{%- render 'svg-box', stroke_width: 1.3 -%}</a>
</div>
</span>
</div>
</div>

{% if collection.handle == "final-sale" %}
<div class="size-btn-group">
<a href="/collections/final-sale/size-6+size-6-5"><span class="size-button1" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">6 - 6.5</span></a>
<a href="/collections/final-sale/size-7+size-7-5"><span class="size-button2" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">7 - 7.5</span></a>
<a href="/collections/final-sale/size-8+size-8-5"><span class="size-button3" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">8 - 8.5</span></a>
<a href="/collections/final-sale/size-9+size-9-5"><span class="size-button4" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">9 - 9.5</span></a>
<a href="/collections/final-sale/size-10+size-11"><span class="size-button5" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">10 - 11</span></a>
<a href="/collections/final-sale"><span class="size-button6" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">Show All</span></a>
</div>
{% endif %}
{% if canonical_url contains 'size-6+size-6-5' %}
<style>
.size-button1 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-7+size-7-5' %}
<style>
.size-button2 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-8+size-8-5' %}
<style>
.size-button3 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-9+size-9-5' %}
<style>
.size-button4 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-10+size-11' %}
<style>
.size-button5 {
background-color:#eecbca !important;
}
</style>
{% endif %}
<div class="filter-container filter-container--side{% if section.settings.collapse_tag_sidebar_by_default == false %} filter-container--show-filters-desktop{% endif %}" data-ajax-container>
{% if section.settings.enable_filtering %}
<a class="filter-shade" href="#" data-toggle-filters></a>
<div class="filters">
<div class="filters__inner{% if section.settings.enable_sticky_filter %} sticky-content-container{% endif %}">
{% render 'pt-current-filters' %}
{% render 'filter-menu' %}
{% comment %}
<div class="filters__heading">
<h4 class="filters__heading-text">{{ 'collections.filtering.heading' | t }}</h4>
<a class="filters__close" href="#" data-toggle-filters>{% render 'svg-x', stroke_width: 1.3 %}</a>
</div>
{% capture active_filters_html %}
<div class="filter-group filter-group--applied">
<div class="filter-group__heading">
<div class="filter-group__heading__text">{{ 'collections.filtering.applied_filters' | t }}</div>
</div>
<div class="filter-group__items">
{%- for filter in collection.filters -%}
{%- for value in filter.active_values -%}
{%- if value.param_name != 'filter.v.availability' -%}
<a class="filter-group__applied-item" href="{{ value.url_to_remove }}">
<span class="filter-group__applied-item__text">{{ value.label | escape }}</span>
<span class="filter-group__applied-item__icon">{% render 'svg-x', stroke_width: 1.3 %}</span>
</a>
{%- endif -%}
{%- endfor -%}
{%- if filter.type == 'price_range' -%}
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
<a class="filter-group__applied-item" href="{{ filter.url_to_remove }}">
<span class="filter-group__applied-item__text">
{% if filter.min_value.value %}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{% endif %} - {% if filter.max_value.value %}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{% endif %}
</span>
<span class="filter-group__applied-item__icon">{% render 'svg-x', stroke_width: 1.3 %}</span>
</a>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<div class="filter-group__clear-row">
<a class="filter-group__clear-link" href="{{ collection.url }}">{{ 'collections.filtering.clear_all' | t }}</a>
</div>
</div>
</div>
{% endcapture %}
{%- if active_filters_html contains 'filter-group__applied-item' -%}
{{ active_filters_html }}
{%- endif -%}
<form id="CollectionFilterForm">
{%- comment -%}
Preserve automatic vendor/type collections & sorting
{%- endcomment -%}
{%- if collection.current_vendor or collection.current_type -%}
<input type="hidden" name="q" value="{{ collection.current_vendor }}{{ collection.current_type }}">
{%- endif -%}
{%- for filter in collection.filters -%}
{%- if filter.param_name == 'filter.v.availability' -%}
<div class="filter-group filter-group--availability">
<div class="filter-toggle filter-toggle--inline">
<span class="filter-toggle__group-label">{{ 'collections.filtering.out_of_stock_label' | t }}</span>
<div class="filter-toggle__options">
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-1"
type="radio"
name="{{ filter.param_name }}"
value=""
{% if filter.active_values == empty %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.show_label' | t }}</span>
</label>
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-2"
type="radio"
name="{{ filter.param_name }}"
value="1"
{% if filter.active_values != empty and filter.active_values.first.value == '1' %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.hide_label' | t }}</span>
</label>
</div>
</div>
</div>
{%- else -%}
{%- liquid
if settings.swatch_enabled and settings.swatch_option_name contains filter.label and filter.type == "list"
assign filter_group_is_swatch = true
else
assign filter_group_is_swatch = false
endif
if section.settings.collapse_filters_method == 'all'
assign collapse_filters = true
elsif section.settings.collapse_filters_method == 'none'
assign collapse_filters = false
elsif section.settings.collapse_filters_method contains 'over-'
assign limit = section.settings.collapse_filters_method | split: '-' | last | plus: 0
if filter.values.size > limit
assign collapse_filters = true
else
assign collapse_filters = false
endif
endif
-%}
<div class="filter-group{% if filter_group_is_swatch %} filter-group--swatch{% if section.settings.filter_two_columns_swatches %} filter-group--two-column-layout{% endif %}{% elsif section.settings.filter_two_columns and filter.type == "list" %} filter-group--two-column-layout{% endif %}">
<a href="#" class="filter-group__heading{% if collapse_filters %} toggle-target-toggler--is-hidden{% endif %}" data-toggle-target=".filter-group--{{ forloop.index | plus: 1 }}">
<div class="filter-group__heading__text">{{ filter.label | escape }}</div>
<span class="filter-group__heading__indicator">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</a>
<div class="filter-group__items filter-group--{{ forloop.index | plus: 1 }} toggle-target{% if collapse_filters %} toggle-target--hidden{% endif %}">
<div class="toggle-target-container">
{% case filter.type %}
{% when "list" %}
{%- for value in filter.values -%}
<label class="filter-group__item{% if value.active %} filter-group__item--active{% endif %}{% if value.count == 0 and value.active == false %} filter-group__item--disabled{% endif %}" data-tag="{{ value.label | handle }}">
{% if filter_group_is_swatch %}<span class="filter-group__item__swatch{% if settings.swatch_images %} lazyload{% endif %}" {% if settings.swatch_images %}data-bgset="{{ value.label | handle | append: '.png' | file_img_url: '48x48', crop: 'center' }}"{% else %}style="background-color:{{ value.label | downcase | remove: ' ' | escape }}"{% endif %}></span>{% endif %}
<input class="filter-group__checkbox"
id="Filter-{{ value.param_name }}-{{ value.value | handle }}"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value | escape }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}>
<span class="filter-group__item__text">{{ value.label }}</span>
{% if section.settings.show_filter_counts and filter_group_is_swatch == false %}
<span class="filter-group__item__count">{{ value.count }}</span>
{% endif %}
</label>
{%- endfor -%}
{% when "price_range" %}
{% render 'price-range', filter: filter %}
{% endcase %}
</div>
</div>
</div>
{%- endif -%}
{%- endfor -%}
{% if section.settings.coll_show_sort %}
<div class="filter-group mobile-only">
<a href="#" class="filter-group__heading" data-toggle-target=".filter-group--sort">
<div class="filter-group__heading__text">{{ 'collections.sorting.title' | t }}</div>
<span class="filter-group__heading__indicator">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</a>
<div class="filter-group__items filter-group--sort toggle-target">
<div class="toggle-target-container">
{%- for option in collection.sort_options -%}
{%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%}
<label class="filter-group__item{% if current_sort == option.value %} filter-group__item--active{% endif %}">
<input class="filter-group__checkbox"
id="Filter-Sort-{{ option.value }}"
type="radio"
name="sort_by"
value="{{ option.value }}"
{% if current_sort == option.value %}checked{% endif %}>
<span class="filter-group__item__text">{{ option.name | escape }}</span>
</label>
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
{% endif %}
<noscript>
<button type="submit" class="btn">{{ 'collections.filtering.submit' | t }}</button>
</noscript>
</form>
{% endcomment %}
</div>
</div>
{% endif %}

<div class="filters-adjacent collection-listing">
{% if collection.products.size == 0 %}
<h5 class="align-centre fully-spaced-row">{{ 'collections.general.no_matches' | t }}</h5>
{% else %}
<div class="product-list product-list--per-row-{{ section.settings.grid }} product-list--per-row-mob-{{ settings.prod_thumb_mob_per_row }} product-list--per-row-mob-{{ settings.prod_thumb_mob_per_row }} product-list--image-shape-{{ settings.prod_thumb_shape }}">
{%- liquid
if settings.prod_thumb_shape == 'portrait-23'
assign chosen_aspect_ratio = 0.67
elsif settings.prod_thumb_shape == 'portrait-45'
assign chosen_aspect_ratio = 0.8
elsif settings.prod_thumb_shape == 'square'
assign chosen_aspect_ratio = 1.0
elsif settings.prod_thumb_shape == 'landscape-54'
assign chosen_aspect_ratio = 1.25
elsif settings.prod_thumb_shape == 'landscape-32'
assign chosen_aspect_ratio = 1.50
elsif settings.prod_thumb_shape == 'tallest'
assign chosen_aspect_ratio = 99
for product in collection.products
if product.featured_media.preview_image.aspect_ratio < chosen_aspect_ratio
assign chosen_aspect_ratio = product.featured_media.preview_image.aspect_ratio
endif
endfor
else
assign chosen_aspect_ratio = 0
for product in collection.products
if product.featured_media.preview_image.aspect_ratio > chosen_aspect_ratio
assign chosen_aspect_ratio = product.featured_media.preview_image.aspect_ratio
endif
endfor
endif
-%}
{% for product in collection.products %}
{% if collection.handle == 'new-arrivals' %}
{%- if forloop.index == 1 -%}
<div data-product-id="{{ product.id }}" class="product-block">
<a href="https://yellowboxshoes.com/collections/all-sale">
<img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
</div>
{%- endif -%}{%- endif -%}
{% render 'product-block', product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>

<div class="container pagination-row" data-ajax-container>{% render 'pagination-control', paginate: paginate %}</div>

{% endpaginate %}

{% if collection.description != blank and section.settings.coll_desc_pos == 'below' %}
<div class="container container--reading-width fully-spaced-row" data-cc-animate>
<div class="rte cf">{{ collection.description }}</div>
</div>
{% endif %}
</div>


{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "checkbox",
"id": "show_image_behind_heading",
"label": "Show collection image behind heading",
"default": true
},
{
"type": "select",
"id": "heading_image_height",
"label": "Heading image height",
"options": [
{
"value": "small",
"label": "Compact"
},
{
"value": "medium",
"label": "Small"
},
{
"value": "large",
"label": "Medium"
},
{
"value": "huge",
"label": "Large"
}
],
"default": "medium"
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "coll_num_per_page_int",
"min": 16,
"max": 50,
"step": 2,
"label": "Number of products to show per page",
"default": 24
},
{
"type": "range",
"id": "grid",
"label": "Products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show product vendors",
"default": false
},
{
"type": "checkbox",
"id": "show_total",
"label": "Show product total",
"default": true
},
{
"type": "select",
"id": "coll_desc_pos",
"label": "Description position",
"default": "above",
"options": [
{
"value": "above",
"label": "Below collection title"
},
{
"value": "below",
"label": "Below products"
}
]
},
{
"type": "header",
"content": "Filters"
},
{
"type": "checkbox",
"id": "enable_filtering",
"label": "Enable filtering",
"info": "[Customize filters](\/admin\/menus)",
"default": true
},
{
"type": "checkbox",
"id": "collapse_tag_sidebar_by_default",
"label": "Collapse filter column",
"default": false
},
{
"type": "select",
"id": "collapse_filters_method",
"label": "Filter row collapse",
"default": "over-12",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "over-6",
"label": "Over 6 items"
},
{
"value": "over-12",
"label": "Over 12 items"
},
{
"value": "over-18",
"label": "Over 18 items"
},
{
"value": "all",
"label": "All rows"
}
]
},
{
"type": "checkbox",
"id": "show_filter_counts",
"label": "Show filter counts",
"default": false
},
{
"type": "checkbox",
"id": "show_disabled_filters",
"label": "Show filters with zero results",
"default": true
},
{
"type": "checkbox",
"id": "ajax_products",
"label": "Filter and sort collections without loading a new page",
"default": true,
"info": "Some apps require this to be disabled"
},
{
"type": "checkbox",
"id": "auto_apply_hide_unavailable",
"label": "On selecting a filter, automatically apply 'Hide out of stock'",
"default": false,
"info": "Requires Availability filter to be enabled"
},
{
"type": "checkbox",
"id": "enable_sticky_filter",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "checkbox",
"id": "filter_two_columns",
"label": "Two column filter values",
"default": false
},
{
"type": "checkbox",
"id": "coll_show_sort",
"label": "Show sorting dropdown",
"default": true
},
{
"type": "checkbox",
"id": "coll_show_feat",
"label": "Show 'Featured' in sorting dropdown",
"default": false
},
{
"type": "header",
"content": "Subcollections"
},
{
"type": "paragraph",
"content": "The current collection is located in the menu, and any other collections within that dropdown menu are displayed. [Read more](https://cleancanvas.co.uk/support/symmetry/subcollections)"
},
{
"type": "checkbox",
"id": "enable_subcoll",
"label": "Enable subcollections",
"info": "A menu must be selected below",
"default": true
},
{
"type": "link_list",
"id": "subcoll_menu",
"label": "Subcollections menu",
"info": "This is usually your main menu",
"default": "main-menu"
},
{
"type": "select",
"id": "subcoll_style",
"label": "Subcollections style",
"default": "buttons",
"options": [
{
"value": "buttons",
"label": "Buttons"
},
{
"value": "gallery",
"label": "Gallery"
}
]
},
{
"type": "header",
"content": "Subcollection gallery layout"
},
{
"type": "select",
"id": "subcoll_gall_shape",
"label": "Image shape",
"default": "sq",
"options": [
{
"value": "l-21",
"label": "Landscape (2x1)"
},
{
"value": "l-64",
"label": "Landscape (6x4)"
},
{
"value": "l-5x4",
"label": "Landscape (5x4)"
},
{
"value": "sq",
"label": "Square (1x1)"
},
{
"value": "p-4x5",
"label": "Portrait (4x5)"
}
]
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"id": "subcoll_gall_enable_margin",
"type": "checkbox",
"label": "Add spacing",
"default": true
},
{
"id": "subcoll_gall_full_width",
"type": "checkbox",
"label": "Full page width",
"default": false
},
{
"id": "subcoll_gall_overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "select",
"id": "subcoll_gall_text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center center",
"label": "Middle"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "select",
"id": "subcoll_gall_mobile_layout",
"label": "Mobile layout",
"info": "Mobile layout always uses 5x4 images",
"default": "2",
"options": [
{
"value": "1",
"label": "1 item"
},
{
"value": "2",
"label": "2 items"
},
{
"value": "hide",
"label": "Hide"
}
]
}
]
}
{% endschema %}

Hope it helps!

[LitExtension · Accepted solution]

Hi @albertloekito,

I got the wrong information, I think you are trying to show the full banner.

Are you wanting this? show only 1 image for positions 3 and 4

Please change code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 2 -%}
    <div data-product-id="{{ product.id }}" class="product-block" style="width: 50%">
      <a href="https://yellowboxshoes.com/collections/all-sale">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
    </div>
  {%- endif -%}
{%- endif -%}

Hope it helps!

[LitExtension · Accepted solution]

Hi @albertloekito,

Please change all code:

{% if collection.handle == 'new-arrivals' %}
          {%- if forloop.index == 2 and paginate.current_page == 1 -%}
            <div data-product-id="{{ product.id }}" class="product-block" style="width: 50%">
              <a href="https://yellowboxshoes.com/collections/all-sale">
              <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
            </div>
          {%- endif -%}
        {%- endif -%}

Hope it helps!

[LitExtension]

Hi @albertloekito,

Please change code:

{%- if forloop.index == 1 -%}

=>

{%- if forloop.index == 0 -%}

or you can change the number to your liking, it will display according to the change

[albertloekito]

Hi @LitExtension 

When I change the code to {%- if forloop.index == 0 -%} the banner images is not showing up

you can see the link below and go to > New arrivals collection page

https://9np004rtouhi7cef-1608220771.shopifypreview.com

Thank you

[LitExtension]

Hi @albertloekito,

Please send me the full code, I will check it for you

[albertloekito]

Here you go

----------------------------------------------------------------

<div data-section-id="{{ section.id }}" data-section-type="collection-template" data-ajax-filtering="{{ section.settings.ajax_products }}" data-filter-section-id="{{ section.id }}" data-components="accordion,modal,price-range" data-cc-animate>
{% paginate collection.products by section.settings.coll_num_per_page_int %}

{%- liquid
if section.settings.show_image_behind_heading and collection.image
assign header_image_enabled = true
else
assign header_image_enabled = false
endif
assign current_sort = collection.sort_by | default: collection.default_sort_by

assign show_filters = section.settings.enable_filtering
if collection.filters == empty
assign show_filters = true
endif
-%}

{%- liquid
if section.settings.enable_subcoll and section.settings.subcoll_menu != blank
assign current_link_parent = false
for link in linklists[section.settings.subcoll_menu].links
if link.links != empty
if link.type == 'collection_link' and link.object.handle == collection.handle
assign current_link_parent = link
break
elsif link.type == 'catalog_link' and collection.handle == 'all'
assign current_link_parent = link
break
endif
endif
if link.links != blank and current_link_parent == false
for child_link in link.links
if child_link.type == 'collection_link' and child_link.object.handle == collection.handle
if child_link.links == empty
assign current_link_parent = link
else
assign current_link_parent = child_link
endif
break
endif
if child_link.type == 'catalog_link' and collection.handle == 'all'
if child_link.links == empty
assign current_link_parent = link
else
assign current_link_parent = child_link
endif
break
endif
if child_link.links != blank and current_link_parent == false
for child_child_link in child_link.links
if child_child_link.type == 'collection_link' and child_child_link.object.handle == collection.handle
assign current_link_parent = child_link
break
elsif child_child_link.type == 'catalog_link' and collection.handle == 'all'
assign current_link_parent = child_link
break
endif
endfor
endif
endfor
endif
endfor
endif
-%}

{%- if current_link_parent -%}
{%- assign subcoll_count = 0 -%}
{% capture subcollection_html %}
{% if section.settings.subcoll_style == 'buttons' %}
<div class="container">
<div class="subcollection-links subcollection-links--buttons align-center lightly-spaced-row-above{% if header_image_enabled %} image-overlay__over{% endif %}">
{%- for link in current_link_parent.links -%}
{%- unless link.object.handle == collection.handle or link.type != 'collection_link' -%}
{%- assign subcoll_count = subcoll_count | plus: 1 -%}
<a class="btn btn--tertiary" href="{{ link.url }}">{{ link.title | escape }}</a>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{% else %}
{% unless section.settings.subcoll_gall_full_width %}
<div class="container container--not-mobile lightly-spaced-row-above lightly-spaced-row-above--not-mobile">
{% endunless %}
<div class="subcollection-links subcollection-links--gallery {% if section.settings.subcoll_gall_full_width %}subcollection-links--is-full-width{% endif %} {% if section.settings.subcoll_gall_mobile_layout == 'hide' %}desktop-only{% endif %} {% if header_image_enabled %}subcollection-links--under-image-header{% endif %}">
<div class="gallery slick-slider-overlay-dots {% if section.settings.subcoll_gall_enable_margin %} gallery--with-margins{% endif %}{% if section.settings.subcoll_gall_full_width and section.settings.subcoll_gall_enable_margin %} gallery--with-vertical-outer-padding{% endif %}"
data-mobile-item-count="{{ section.settings.subcoll_gall_mobile_layout }}">
{%- for link in current_link_parent.links -%}
{%- unless link.object.handle == collection.handle or link.type != 'collection_link' -%}
{%- assign subcoll_count = subcoll_count | plus: 1 -%}
<div class="gallery__item
gallery__item--shape-fixed
gallery__item--shape-{{ section.settings.subcoll_gall_shape }}
gallery__item-{{ forloop.index }}
image-overlay
image-overlay--bg-{{ section.settings.subcoll_gall_overlay_style }}
image-overlay--edge-boxes
lazyload--placeholder
{% unless section.settings.subcoll_gall_full_width and section.settings.subcoll_gall_enable_margin == false %}image-overlay--edge-boxes--pad-to-corner{% endunless %}
">
<a class="image-overlay__image-link" href="{{ link.url }}">
{%- liquid
if link.object.featured_image
assign subcoll_image = link.object.featured_image
else
assign subcoll_image = false
endif
-%}
{%- if subcoll_image -%}
<div class="gallery__image rimage-outer-wrapper rimage-background lazyload--manual fade-in"
data-bgset="{% render 'bgset', image: subcoll_image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.image_position }}">
<noscript>
<div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: subcoll_image.aspect_ratio | times: 100 }}%">
<img src="{{ subcoll_image | img_url: '512x512' }}" alt="{{ subcoll_image.alt | escape }}" class="rimage__image">
</div>
</noscript>
</div>
{%- else -%}
<div class="gallery__image placeholder-image dark">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}

<div class="overlay-text overlay--v-{{ section.settings.subcoll_gall_text_alignment | split: ' ' | first }} overlay--h-{{ section.settings.subcoll_gall_text_alignment | split: ' ' | last }} image-overlay__over">
<div class="overlay-text__inner">
<div class="overlay-text__text">
<h2 class="overlay-text__title h4-style">{{ link.title }}</h2>
</div>
</div>
</div>
</a>
</div>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{% unless section.settings.subcoll_gall_full_width %}
</div>
{% endunless %}
{% endif %}
{% endcapture %}
{%- liquid
if subcoll_count < 2
assign subcollection_html = ''
endif
-%}
{%- endif -%}

{% if header_image == blank and collection.handle == 'sale-boots-booties' or collection.handle == 'trend-toecaps' or collection.handle == 'warm-up-for-winter-sale' or collection.handle == 'sneaker-boots' or collection.handle == 'sale-clogs-mules' or collection.handle == 'pointed-toe' or collection.handle == 'layers' or collection.handle == 'denim-lovers' or collection.handle == 'think-pink' or collection.handle == 'fresh-picks-for-you' or collection.handle == 'lug-soles' or collection.handle == 'holiday-dressing' or collection.handle == 'stylist-picks' or collection.handle == 'camo-prints' or collection.handle == 'cozy-essentials' or collection.handle == 'going-natural' or collection.handle == 'metallics' or collection.handle == 'good-sport' or collection.handle == 'top-rated' or collection.handle == 'premium-leather' or collection.handle == 'wedding-collection' or collection.handle == 'sale-sandals' or collection.handle == 'sale-wedges-heels' or collection.handle == 'sale-boots-mules' or collection.handle == 'sale-sneakers-flats' or collection.handle == 'final-sale' or collection.handle == 'go-west' or collection.handle == 'trend-edit' %}
<div class="container">
<h1 class="pagetitle-collection">{{ collection.title | escape }}</h1> </div>
{% else %}

{% if header_image_enabled %}
<div class="page-header page-header--with-background page-header--background-desktop-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper">
<div class="rimage-background lazyload fade-in"
data-bgset="{% render 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"></div>
<div class="page-header-background-mobile-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper">
<div class="rimage-background lazyload fade-in"
data-bgset="{% render 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"></div>
<div class="overlay-text overlay-text--inline overlay--v-center overlay--h-center image-overlay__over" data-cc-animate data-cc-animate-delay="0.2s">
<div class="overlay-text__inner">
<div class="overlay-text__text">

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
<div class="overlay-text__rte rte cf align-center reading-width large-text">{{ collection.description }}</div>
{% endif %}

{%- if current_link_parent and section.settings.subcoll_style == 'buttons' -%}
{{ subcollection_html }}
{%- endif -%}{% endif %}
</div>
</div>
</div>
</div>
</div>
{% else %}
{{ subcollection_html }}
<div class="page-header page-header--with-upper-spacing">
<div class="container">
<h1 class="pagetitle h3-style">{{ collection.title | escape }}</h1>

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
<div class="rte cf align-center reading-width">{{ collection.description }}</div>
{% endif %}
</div>
</div>
{% endif %}

{%- if current_link_parent and header_image_enabled and section.settings.subcoll_style != 'buttons' -%}
{{ subcollection_html }}
{%- endif -%}

<div class="container{% if settings.use_fullwidth_layout %} container--no-max{% endif %}">
<div class="utility-bar" data-ajax-container data-ajax-scroll-to>
<div class="utility-bar__left">
{% if section.settings.coll_show_sort or show_filters %}
<a href="#" class="toggle-btn utility-bar__item{% if section.settings.collapse_tag_sidebar_by_default == false %} toggle-btn--revealed-desktop{% endif %}{% if show_filters == false %} mobile-only{% endif %}" data-toggle-filters>
<span class="button-icon">{% render 'svg-filter' %}</span>
<span>{{ 'collections.filtering.filter' | t }}</span>
{% liquid
assign filter_count = 0
for filter in collection.filters
assign filter_count = filter_count | plus: filter.active_values.size
if filter.type == 'price_range'
if filter.min_value.value != nil or filter.max_value.value != nil
assign filter_count = filter_count | plus: 1
endif
endif
endfor
%}
{% if filter_count > 0 %}
<span class="toggle-btn__count">({{ filter_count }})</span>
{% endif %}
<span class="toggle-btn__chevron ltr-icon">{% render 'svg-chevron-right', stroke_width: 1.3 %}</span>
</a>
{% endif %}
</div>

{% if section.settings.show_total and paginate.items > 0 %}
<div class="utility-bar__centre">
<div class="utility-bar__item">{{ 'collections.general.product_count' | t: count: paginate.items }}</div>
</div>
{% endif %}

<div class="utility-bar__right">
{% if section.settings.coll_show_sort %}
<span class="utility-bar__item desktop-only">
<div class="link-dropdown link-dropdown--right-aligned">
<div class="visually-hidden" id="sort-dropdown-heading">{{ 'collections.sorting.title' | t | escape }}</div>
<button class="link-dropdown__button notabutton" aria-expanded="false" aria-controls="sort-dropdown-options" aria-describedby="sort-dropdown-heading">
<span class="link-dropdown__button-text">
{%- for option in collection.sort_options -%}
{%- if current_sort == option.value -%}
{{ option.name | escape }}
{%- break -%}
{%- endif -%}
{%- endfor -%}
</span>
<span class="link-dropdown__button-icon">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</button>
<div class="link-dropdown__options" id="sort-dropdown-options">
{%- for option in collection.sort_options -%}
{% unless option.value contains 'created-ascending' or option.value contains 'created-descending' or option.value contains 'best-selling' %}
{%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%}
<a href="{{ request.path | sort_by: option.value | escape }}" class="link-dropdown__link{% if current_sort == option.value %} link-dropdown__link--active{% endif %}">{{ option.name | escape }}</a>
{%- endif -%}
{% endunless %}
{%- endfor -%}
</div>
</div>
</span>
{% endif %}
<span class="utility-bar__item mobile-only">
<div class="layout-switchers">
<a class="layout-switch layout-switch--two-columns{% if settings.prod_thumb_mob_per_row == '2' %} layout-switch--active{% endif %}" href="#">{%- render 'svg-grid', stroke_width: 1.3 -%}</a>
<a class="layout-switch layout-switch--one-column{% if settings.prod_thumb_mob_per_row == '1' %} layout-switch--active{% endif %}" href="#">{%- render 'svg-box', stroke_width: 1.3 -%}</a>
</div>
</span>
</div>
</div>

{% if collection.handle == "final-sale" %}
<div class="size-btn-group">
<a href="/collections/final-sale/size-6+size-6-5"><span class="size-button1" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">6 - 6.5</span></a>
<a href="/collections/final-sale/size-7+size-7-5"><span class="size-button2" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">7 - 7.5</span></a>
<a href="/collections/final-sale/size-8+size-8-5"><span class="size-button3" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">8 - 8.5</span></a>
<a href="/collections/final-sale/size-9+size-9-5"><span class="size-button4" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">9 - 9.5</span></a>
<a href="/collections/final-sale/size-10+size-11"><span class="size-button5" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">10 - 11</span></a>
<a href="/collections/final-sale"><span class="size-button6" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">Show All</span></a>
</div>
{% endif %}
{% if canonical_url contains 'size-6+size-6-5' %}
<style>
.size-button1 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-7+size-7-5' %}
<style>
.size-button2 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-8+size-8-5' %}
<style>
.size-button3 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-9+size-9-5' %}
<style>
.size-button4 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-10+size-11' %}
<style>
.size-button5 {
background-color:#eecbca !important;
}
</style>
{% endif %}
<div class="filter-container filter-container--side{% if section.settings.collapse_tag_sidebar_by_default == false %} filter-container--show-filters-desktop{% endif %}" data-ajax-container>
{% if section.settings.enable_filtering %}
<a class="filter-shade" href="#" data-toggle-filters></a>
<div class="filters">
<div class="filters__inner{% if section.settings.enable_sticky_filter %} sticky-content-container{% endif %}">
{% render 'pt-current-filters' %}
{% render 'filter-menu' %}
{% comment %}
<div class="filters__heading">
<h4 class="filters__heading-text">{{ 'collections.filtering.heading' | t }}</h4>
<a class="filters__close" href="#" data-toggle-filters>{% render 'svg-x', stroke_width: 1.3 %}</a>
</div>
{% capture active_filters_html %}
<div class="filter-group filter-group--applied">
<div class="filter-group__heading">
<div class="filter-group__heading__text">{{ 'collections.filtering.applied_filters' | t }}</div>
</div>
<div class="filter-group__items">
{%- for filter in collection.filters -%}
{%- for value in filter.active_values -%}
{%- if value.param_name != 'filter.v.availability' -%}
<a class="filter-group__applied-item" href="{{ value.url_to_remove }}">
<span class="filter-group__applied-item__text">{{ value.label | escape }}</span>
<span class="filter-group__applied-item__icon">{% render 'svg-x', stroke_width: 1.3 %}</span>
</a>
{%- endif -%}
{%- endfor -%}
{%- if filter.type == 'price_range' -%}
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
<a class="filter-group__applied-item" href="{{ filter.url_to_remove }}">
<span class="filter-group__applied-item__text">
{% if filter.min_value.value %}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{% endif %} - {% if filter.max_value.value %}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{% endif %}
</span>
<span class="filter-group__applied-item__icon">{% render 'svg-x', stroke_width: 1.3 %}</span>
</a>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<div class="filter-group__clear-row">
<a class="filter-group__clear-link" href="{{ collection.url }}">{{ 'collections.filtering.clear_all' | t }}</a>
</div>
</div>
</div>
{% endcapture %}
{%- if active_filters_html contains 'filter-group__applied-item' -%}
{{ active_filters_html }}
{%- endif -%}
<form id="CollectionFilterForm">
{%- comment -%}
Preserve automatic vendor/type collections & sorting
{%- endcomment -%}
{%- if collection.current_vendor or collection.current_type -%}
<input type="hidden" name="q" value="{{ collection.current_vendor }}{{ collection.current_type }}">
{%- endif -%}
{%- for filter in collection.filters -%}
{%- if filter.param_name == 'filter.v.availability' -%}
<div class="filter-group filter-group--availability">
<div class="filter-toggle filter-toggle--inline">
<span class="filter-toggle__group-label">{{ 'collections.filtering.out_of_stock_label' | t }}</span>
<div class="filter-toggle__options">
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-1"
type="radio"
name="{{ filter.param_name }}"
value=""
{% if filter.active_values == empty %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.show_label' | t }}</span>
</label>
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-2"
type="radio"
name="{{ filter.param_name }}"
value="1"
{% if filter.active_values != empty and filter.active_values.first.value == '1' %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.hide_label' | t }}</span>
</label>
</div>
</div>
</div>
{%- else -%}
{%- liquid
if settings.swatch_enabled and settings.swatch_option_name contains filter.label and filter.type == "list"
assign filter_group_is_swatch = true
else
assign filter_group_is_swatch = false
endif
if section.settings.collapse_filters_method == 'all'
assign collapse_filters = true
elsif section.settings.collapse_filters_method == 'none'
assign collapse_filters = false
elsif section.settings.collapse_filters_method contains 'over-'
assign limit = section.settings.collapse_filters_method | split: '-' | last | plus: 0
if filter.values.size > limit
assign collapse_filters = true
else
assign collapse_filters = false
endif
endif
-%}
<div class="filter-group{% if filter_group_is_swatch %} filter-group--swatch{% if section.settings.filter_two_columns_swatches %} filter-group--two-column-layout{% endif %}{% elsif section.settings.filter_two_columns and filter.type == "list" %} filter-group--two-column-layout{% endif %}">
<a href="#" class="filter-group__heading{% if collapse_filters %} toggle-target-toggler--is-hidden{% endif %}" data-toggle-target=".filter-group--{{ forloop.index | plus: 1 }}">
<div class="filter-group__heading__text">{{ filter.label | escape }}</div>
<span class="filter-group__heading__indicator">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</a>
<div class="filter-group__items filter-group--{{ forloop.index | plus: 1 }} toggle-target{% if collapse_filters %} toggle-target--hidden{% endif %}">
<div class="toggle-target-container">
{% case filter.type %}
{% when "list" %}
{%- for value in filter.values -%}
<label class="filter-group__item{% if value.active %} filter-group__item--active{% endif %}{% if value.count == 0 and value.active == false %} filter-group__item--disabled{% endif %}" data-tag="{{ value.label | handle }}">
{% if filter_group_is_swatch %}<span class="filter-group__item__swatch{% if settings.swatch_images %} lazyload{% endif %}" {% if settings.swatch_images %}data-bgset="{{ value.label | handle | append: '.png' | file_img_url: '48x48', crop: 'center' }}"{% else %}style="background-color:{{ value.label | downcase | remove: ' ' | escape }}"{% endif %}></span>{% endif %}
<input class="filter-group__checkbox"
id="Filter-{{ value.param_name }}-{{ value.value | handle }}"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value | escape }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}>
<span class="filter-group__item__text">{{ value.label }}</span>
{% if section.settings.show_filter_counts and filter_group_is_swatch == false %}
<span class="filter-group__item__count">{{ value.count }}</span>
{% endif %}
</label>
{%- endfor -%}
{% when "price_range" %}
{% render 'price-range', filter: filter %}
{% endcase %}
</div>
</div>
</div>
{%- endif -%}
{%- endfor -%}
{% if section.settings.coll_show_sort %}
<div class="filter-group mobile-only">
<a href="#" class="filter-group__heading" data-toggle-target=".filter-group--sort">
<div class="filter-group__heading__text">{{ 'collections.sorting.title' | t }}</div>
<span class="filter-group__heading__indicator">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</a>
<div class="filter-group__items filter-group--sort toggle-target">
<div class="toggle-target-container">
{%- for option in collection.sort_options -%}
{%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%}
<label class="filter-group__item{% if current_sort == option.value %} filter-group__item--active{% endif %}">
<input class="filter-group__checkbox"
id="Filter-Sort-{{ option.value }}"
type="radio"
name="sort_by"
value="{{ option.value }}"
{% if current_sort == option.value %}checked{% endif %}>
<span class="filter-group__item__text">{{ option.name | escape }}</span>
</label>
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
{% endif %}
<noscript>
<button type="submit" class="btn">{{ 'collections.filtering.submit' | t }}</button>
</noscript>
</form>
{% endcomment %}
</div>
</div>
{% endif %}

<div class="filters-adjacent collection-listing">
{% if collection.products.size == 0 %}
<h5 class="align-centre fully-spaced-row">{{ 'collections.general.no_matches' | t }}</h5>
{% else %}
<div class="product-list product-list--per-row-{{ section.settings.grid }} product-list--per-row-mob-{{ settings.prod_thumb_mob_per_row }} product-list--per-row-mob-{{ settings.prod_thumb_mob_per_row }} product-list--image-shape-{{ settings.prod_thumb_shape }}">
{%- liquid
if settings.prod_thumb_shape == 'portrait-23'
assign chosen_aspect_ratio = 0.67
elsif settings.prod_thumb_shape == 'portrait-45'
assign chosen_aspect_ratio = 0.8
elsif settings.prod_thumb_shape == 'square'
assign chosen_aspect_ratio = 1.0
elsif settings.prod_thumb_shape == 'landscape-54'
assign chosen_aspect_ratio = 1.25
elsif settings.prod_thumb_shape == 'landscape-32'
assign chosen_aspect_ratio = 1.50
elsif settings.prod_thumb_shape == 'tallest'
assign chosen_aspect_ratio = 99
for product in collection.products
if product.featured_media.preview_image.aspect_ratio < chosen_aspect_ratio
assign chosen_aspect_ratio = product.featured_media.preview_image.aspect_ratio
endif
endfor
else
assign chosen_aspect_ratio = 0
for product in collection.products
if product.featured_media.preview_image.aspect_ratio > chosen_aspect_ratio
assign chosen_aspect_ratio = product.featured_media.preview_image.aspect_ratio
endif
endfor
endif
-%}
{% for product in collection.products %}
{% render 'product-block', product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
{% if collection.handle == 'new-arrivals' %}
{%- if forloop.index == 1 -%}
<div data-product-id="{{ product.id }}" class="product-block">
<a href="https://yellowboxshoes.com/collections/all-sale">
<img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
</div>
{%- endif -%}{%- endif -%}{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>

<div class="container pagination-row" data-ajax-container>{% render 'pagination-control', paginate: paginate %}</div>

{% endpaginate %}

{% if collection.description != blank and section.settings.coll_desc_pos == 'below' %}
<div class="container container--reading-width fully-spaced-row" data-cc-animate>
<div class="rte cf">{{ collection.description }}</div>
</div>
{% endif %}
</div>

{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "checkbox",
"id": "show_image_behind_heading",
"label": "Show collection image behind heading",
"default": true
},
{
"type": "select",
"id": "heading_image_height",
"label": "Heading image height",
"options": [
{
"value": "small",
"label": "Compact"
},
{
"value": "medium",
"label": "Small"
},
{
"value": "large",
"label": "Medium"
},
{
"value": "huge",
"label": "Large"
}
],
"default": "medium"
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "coll_num_per_page_int",
"min": 16,
"max": 50,
"step": 2,
"label": "Number of products to show per page",
"default": 24
},
{
"type": "range",
"id": "grid",
"label": "Products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show product vendors",
"default": false
},
{
"type": "checkbox",
"id": "show_total",
"label": "Show product total",
"default": true
},
{
"type": "select",
"id": "coll_desc_pos",
"label": "Description position",
"default": "above",
"options": [
{
"value": "above",
"label": "Below collection title"
},
{
"value": "below",
"label": "Below products"
}
]
},
{
"type": "header",
"content": "Filters"
},
{
"type": "checkbox",
"id": "enable_filtering",
"label": "Enable filtering",
"info": "[Customize filters](\/admin\/menus)",
"default": true
},
{
"type": "checkbox",
"id": "collapse_tag_sidebar_by_default",
"label": "Collapse filter column",
"default": false
},
{
"type": "select",
"id": "collapse_filters_method",
"label": "Filter row collapse",
"default": "over-12",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "over-6",
"label": "Over 6 items"
},
{
"value": "over-12",
"label": "Over 12 items"
},
{
"value": "over-18",
"label": "Over 18 items"
},
{
"value": "all",
"label": "All rows"
}
]
},
{
"type": "checkbox",
"id": "show_filter_counts",
"label": "Show filter counts",
"default": false
},
{
"type": "checkbox",
"id": "show_disabled_filters",
"label": "Show filters with zero results",
"default": true
},
{
"type": "checkbox",
"id": "ajax_products",
"label": "Filter and sort collections without loading a new page",
"default": true,
"info": "Some apps require this to be disabled"
},
{
"type": "checkbox",
"id": "auto_apply_hide_unavailable",
"label": "On selecting a filter, automatically apply 'Hide out of stock'",
"default": false,
"info": "Requires Availability filter to be enabled"
},
{
"type": "checkbox",
"id": "enable_sticky_filter",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "checkbox",
"id": "filter_two_columns",
"label": "Two column filter values",
"default": false
},
{
"type": "checkbox",
"id": "coll_show_sort",
"label": "Show sorting dropdown",
"default": true
},
{
"type": "checkbox",
"id": "coll_show_feat",
"label": "Show 'Featured' in sorting dropdown",
"default": false
},
{
"type": "header",
"content": "Subcollections"
},
{
"type": "paragraph",
"content": "The current collection is located in the menu, and any other collections within that dropdown menu are displayed. [Read more](https://cleancanvas.co.uk/support/symmetry/subcollections)"
},
{
"type": "checkbox",
"id": "enable_subcoll",
"label": "Enable subcollections",
"info": "A menu must be selected below",
"default": true
},
{
"type": "link_list",
"id": "subcoll_menu",
"label": "Subcollections menu",
"info": "This is usually your main menu",
"default": "main-menu"
},
{
"type": "select",
"id": "subcoll_style",
"label": "Subcollections style",
"default": "buttons",
"options": [
{
"value": "buttons",
"label": "Buttons"
},
{
"value": "gallery",
"label": "Gallery"
}
]
},
{
"type": "header",
"content": "Subcollection gallery layout"
},
{
"type": "select",
"id": "subcoll_gall_shape",
"label": "Image shape",
"default": "sq",
"options": [
{
"value": "l-21",
"label": "Landscape (2x1)"
},
{
"value": "l-64",
"label": "Landscape (6x4)"
},
{
"value": "l-5x4",
"label": "Landscape (5x4)"
},
{
"value": "sq",
"label": "Square (1x1)"
},
{
"value": "p-4x5",
"label": "Portrait (4x5)"
}
]
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"id": "subcoll_gall_enable_margin",
"type": "checkbox",
"label": "Add spacing",
"default": true
},
{
"id": "subcoll_gall_full_width",
"type": "checkbox",
"label": "Full page width",
"default": false
},
{
"id": "subcoll_gall_overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "select",
"id": "subcoll_gall_text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center center",
"label": "Middle"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "select",
"id": "subcoll_gall_mobile_layout",
"label": "Mobile layout",
"info": "Mobile layout always uses 5x4 images",
"default": "2",
"options": [
{
"value": "1",
"label": "1 item"
},
{
"value": "2",
"label": "2 items"
},
{
"value": "hide",
"label": "Hide"
}
]
}
]
}
{% endschema %}

[albertloekito]

Hi @LitExtension 

Did you have a chance to look at the code that I posted?

Thank you

[LitExtension · Accepted solution]

Hi @albertloekito,

Sorry, you didn't tag me, so I didn't get the notification before.

Please change all code:

<div data-section-id="{{ section.id }}" data-section-type="collection-template" data-ajax-filtering="{{ section.settings.ajax_products }}" data-filter-section-id="{{ section.id }}" data-components="accordion,modal,price-range" data-cc-animate>
{% paginate collection.products by section.settings.coll_num_per_page_int %}

{%- liquid
if section.settings.show_image_behind_heading and collection.image
assign header_image_enabled = true
else
assign header_image_enabled = false
endif
assign current_sort = collection.sort_by | default: collection.default_sort_by

assign show_filters = section.settings.enable_filtering
if collection.filters == empty
assign show_filters = true
endif
-%}

{%- liquid
if section.settings.enable_subcoll and section.settings.subcoll_menu != blank
assign current_link_parent = false
for link in linklists[section.settings.subcoll_menu].links
if link.links != empty
if link.type == 'collection_link' and link.object.handle == collection.handle
assign current_link_parent = link
break
elsif link.type == 'catalog_link' and collection.handle == 'all'
assign current_link_parent = link
break
endif
endif
if link.links != blank and current_link_parent == false
for child_link in link.links
if child_link.type == 'collection_link' and child_link.object.handle == collection.handle
if child_link.links == empty
assign current_link_parent = link
else
assign current_link_parent = child_link
endif
break
endif
if child_link.type == 'catalog_link' and collection.handle == 'all'
if child_link.links == empty
assign current_link_parent = link
else
assign current_link_parent = child_link
endif
break
endif
if child_link.links != blank and current_link_parent == false
for child_child_link in child_link.links
if child_child_link.type == 'collection_link' and child_child_link.object.handle == collection.handle
assign current_link_parent = child_link
break
elsif child_child_link.type == 'catalog_link' and collection.handle == 'all'
assign current_link_parent = child_link
break
endif
endfor
endif
endfor
endif
endfor
endif
-%}

{%- if current_link_parent -%}
{%- assign subcoll_count = 0 -%}
{% capture subcollection_html %}
{% if section.settings.subcoll_style == 'buttons' %}
<div class="container">
<div class="subcollection-links subcollection-links--buttons align-center lightly-spaced-row-above{% if header_image_enabled %} image-overlay__over{% endif %}">
{%- for link in current_link_parent.links -%}
{%- unless link.object.handle == collection.handle or link.type != 'collection_link' -%}
{%- assign subcoll_count = subcoll_count | plus: 1 -%}
<a class="btn btn--tertiary" href="{{ link.url }}">{{ link.title | escape }}</a>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{% else %}
{% unless section.settings.subcoll_gall_full_width %}
<div class="container container--not-mobile lightly-spaced-row-above lightly-spaced-row-above--not-mobile">
{% endunless %}
<div class="subcollection-links subcollection-links--gallery {% if section.settings.subcoll_gall_full_width %}subcollection-links--is-full-width{% endif %} {% if section.settings.subcoll_gall_mobile_layout == 'hide' %}desktop-only{% endif %} {% if header_image_enabled %}subcollection-links--under-image-header{% endif %}">
<div class="gallery slick-slider-overlay-dots {% if section.settings.subcoll_gall_enable_margin %} gallery--with-margins{% endif %}{% if section.settings.subcoll_gall_full_width and section.settings.subcoll_gall_enable_margin %} gallery--with-vertical-outer-padding{% endif %}"
data-mobile-item-count="{{ section.settings.subcoll_gall_mobile_layout }}">
{%- for link in current_link_parent.links -%}
{%- unless link.object.handle == collection.handle or link.type != 'collection_link' -%}
{%- assign subcoll_count = subcoll_count | plus: 1 -%}
<div class="gallery__item
gallery__item--shape-fixed
gallery__item--shape-{{ section.settings.subcoll_gall_shape }}
gallery__item-{{ forloop.index }}
image-overlay
image-overlay--bg-{{ section.settings.subcoll_gall_overlay_style }}
image-overlay--edge-boxes
lazyload--placeholder
{% unless section.settings.subcoll_gall_full_width and section.settings.subcoll_gall_enable_margin == false %}image-overlay--edge-boxes--pad-to-corner{% endunless %}
">
<a class="image-overlay__image-link" href="{{ link.url }}">
{%- liquid
if link.object.featured_image
assign subcoll_image = link.object.featured_image
else
assign subcoll_image = false
endif
-%}
{%- if subcoll_image -%}
<div class="gallery__image rimage-outer-wrapper rimage-background lazyload--manual fade-in"
data-bgset="{% render 'bgset', image: subcoll_image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.image_position }}">
<noscript>
<div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: subcoll_image.aspect_ratio | times: 100 }}%">
<img src="{{ subcoll_image | img_url: '512x512' }}" alt="{{ subcoll_image.alt | escape }}" class="rimage__image">
</div>
</noscript>
</div>
{%- else -%}
<div class="gallery__image placeholder-image dark">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}

<div class="overlay-text overlay--v-{{ section.settings.subcoll_gall_text_alignment | split: ' ' | first }} overlay--h-{{ section.settings.subcoll_gall_text_alignment | split: ' ' | last }} image-overlay__over">
<div class="overlay-text__inner">
<div class="overlay-text__text">
<h2 class="overlay-text__title h4-style">{{ link.title }}</h2>
</div>
</div>
</div>
</a>
</div>
{%- endunless -%}
{%- endfor -%}
</div>
</div>
{% unless section.settings.subcoll_gall_full_width %}
</div>
{% endunless %}
{% endif %}
{% endcapture %}
{%- liquid
if subcoll_count < 2
assign subcollection_html = ''
endif
-%}
{%- endif -%}

{% if header_image == blank and collection.handle == 'sale-boots-booties' or collection.handle == 'trend-toecaps' or collection.handle == 'warm-up-for-winter-sale' or collection.handle == 'sneaker-boots' or collection.handle == 'sale-clogs-mules' or collection.handle == 'pointed-toe' or collection.handle == 'layers' or collection.handle == 'denim-lovers' or collection.handle == 'think-pink' or collection.handle == 'fresh-picks-for-you' or collection.handle == 'lug-soles' or collection.handle == 'holiday-dressing' or collection.handle == 'stylist-picks' or collection.handle == 'camo-prints' or collection.handle == 'cozy-essentials' or collection.handle == 'going-natural' or collection.handle == 'metallics' or collection.handle == 'good-sport' or collection.handle == 'top-rated' or collection.handle == 'premium-leather' or collection.handle == 'wedding-collection' or collection.handle == 'sale-sandals' or collection.handle == 'sale-wedges-heels' or collection.handle == 'sale-boots-mules' or collection.handle == 'sale-sneakers-flats' or collection.handle == 'final-sale' or collection.handle == 'go-west' or collection.handle == 'trend-edit' %}
<div class="container">
<h1 class="pagetitle-collection">{{ collection.title | escape }}</h1> </div>
{% else %}

{% if header_image_enabled %}
<div class="page-header page-header--with-background page-header--background-desktop-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper">
<div class="rimage-background lazyload fade-in"
data-bgset="{% render 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"></div>
<div class="page-header-background-mobile-only image-overlay image-overlay--bg-{{ section.settings.overlay_style }} page-header--padded-{{ section.settings.heading_image_height }} rimage-wrapper">
<div class="rimage-background lazyload fade-in"
data-bgset="{% render 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"></div>
<div class="overlay-text overlay-text--inline overlay--v-center overlay--h-center image-overlay__over" data-cc-animate data-cc-animate-delay="0.2s">
<div class="overlay-text__inner">
<div class="overlay-text__text">

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
<div class="overlay-text__rte rte cf align-center reading-width large-text">{{ collection.description }}</div>
{% endif %}

{%- if current_link_parent and section.settings.subcoll_style == 'buttons' -%}
{{ subcollection_html }}
{%- endif -%}{% endif %}
</div>
</div>
</div>
</div>
</div>
{% else %}
{{ subcollection_html }}
<div class="page-header page-header--with-upper-spacing">
<div class="container">
<h1 class="pagetitle h3-style">{{ collection.title | escape }}</h1>

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
<div class="rte cf align-center reading-width">{{ collection.description }}</div>
{% endif %}
</div>
</div>
{% endif %}

{%- if current_link_parent and header_image_enabled and section.settings.subcoll_style != 'buttons' -%}
{{ subcollection_html }}
{%- endif -%}

<div class="container{% if settings.use_fullwidth_layout %} container--no-max{% endif %}">
<div class="utility-bar" data-ajax-container data-ajax-scroll-to>
<div class="utility-bar__left">
{% if section.settings.coll_show_sort or show_filters %}
<a href="#" class="toggle-btn utility-bar__item{% if section.settings.collapse_tag_sidebar_by_default == false %} toggle-btn--revealed-desktop{% endif %}{% if show_filters == false %} mobile-only{% endif %}" data-toggle-filters>
<span class="button-icon">{% render 'svg-filter' %}</span>
<span>{{ 'collections.filtering.filter' | t }}</span>
{% liquid
assign filter_count = 0
for filter in collection.filters
assign filter_count = filter_count | plus: filter.active_values.size
if filter.type == 'price_range'
if filter.min_value.value != nil or filter.max_value.value != nil
assign filter_count = filter_count | plus: 1
endif
endif
endfor
%}
{% if filter_count > 0 %}
<span class="toggle-btn__count">({{ filter_count }})</span>
{% endif %}
<span class="toggle-btn__chevron ltr-icon">{% render 'svg-chevron-right', stroke_width: 1.3 %}</span>
</a>
{% endif %}
</div>

{% if section.settings.show_total and paginate.items > 0 %}
<div class="utility-bar__centre">
<div class="utility-bar__item">{{ 'collections.general.product_count' | t: count: paginate.items }}</div>
</div>
{% endif %}

<div class="utility-bar__right">
{% if section.settings.coll_show_sort %}
<span class="utility-bar__item desktop-only">
<div class="link-dropdown link-dropdown--right-aligned">
<div class="visually-hidden" id="sort-dropdown-heading">{{ 'collections.sorting.title' | t | escape }}</div>
<button class="link-dropdown__button notabutton" aria-expanded="false" aria-controls="sort-dropdown-options" aria-describedby="sort-dropdown-heading">
<span class="link-dropdown__button-text">
{%- for option in collection.sort_options -%}
{%- if current_sort == option.value -%}
{{ option.name | escape }}
{%- break -%}
{%- endif -%}
{%- endfor -%}
</span>
<span class="link-dropdown__button-icon">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</button>
<div class="link-dropdown__options" id="sort-dropdown-options">
{%- for option in collection.sort_options -%}
{% unless option.value contains 'created-ascending' or option.value contains 'created-descending' or option.value contains 'best-selling' %}
{%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%}
<a href="{{ request.path | sort_by: option.value | escape }}" class="link-dropdown__link{% if current_sort == option.value %} link-dropdown__link--active{% endif %}">{{ option.name | escape }}</a>
{%- endif -%}
{% endunless %}
{%- endfor -%}
</div>
</div>
</span>
{% endif %}
<span class="utility-bar__item mobile-only">
<div class="layout-switchers">
<a class="layout-switch layout-switch--two-columns{% if settings.prod_thumb_mob_per_row == '2' %} layout-switch--active{% endif %}" href="#">{%- render 'svg-grid', stroke_width: 1.3 -%}</a>
<a class="layout-switch layout-switch--one-column{% if settings.prod_thumb_mob_per_row == '1' %} layout-switch--active{% endif %}" href="#">{%- render 'svg-box', stroke_width: 1.3 -%}</a>
</div>
</span>
</div>
</div>

{% if collection.handle == "final-sale" %}
<div class="size-btn-group">
<a href="/collections/final-sale/size-6+size-6-5"><span class="size-button1" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">6 - 6.5</span></a>
<a href="/collections/final-sale/size-7+size-7-5"><span class="size-button2" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">7 - 7.5</span></a>
<a href="/collections/final-sale/size-8+size-8-5"><span class="size-button3" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">8 - 8.5</span></a>
<a href="/collections/final-sale/size-9+size-9-5"><span class="size-button4" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">9 - 9.5</span></a>
<a href="/collections/final-sale/size-10+size-11"><span class="size-button5" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">10 - 11</span></a>
<a href="/collections/final-sale"><span class="size-button6" style="width:150px; margin-right:20px; border: 1px solid black; text-align: center;">Show All</span></a>
</div>
{% endif %}
{% if canonical_url contains 'size-6+size-6-5' %}
<style>
.size-button1 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-7+size-7-5' %}
<style>
.size-button2 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-8+size-8-5' %}
<style>
.size-button3 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-9+size-9-5' %}
<style>
.size-button4 {
background-color:#eecbca !important;
}
</style>
{% endif %}
{% if canonical_url contains 'size-10+size-11' %}
<style>
.size-button5 {
background-color:#eecbca !important;
}
</style>
{% endif %}
<div class="filter-container filter-container--side{% if section.settings.collapse_tag_sidebar_by_default == false %} filter-container--show-filters-desktop{% endif %}" data-ajax-container>
{% if section.settings.enable_filtering %}
<a class="filter-shade" href="#" data-toggle-filters></a>
<div class="filters">
<div class="filters__inner{% if section.settings.enable_sticky_filter %} sticky-content-container{% endif %}">
{% render 'pt-current-filters' %}
{% render 'filter-menu' %}
{% comment %}
<div class="filters__heading">
<h4 class="filters__heading-text">{{ 'collections.filtering.heading' | t }}</h4>
<a class="filters__close" href="#" data-toggle-filters>{% render 'svg-x', stroke_width: 1.3 %}</a>
</div>
{% capture active_filters_html %}
<div class="filter-group filter-group--applied">
<div class="filter-group__heading">
<div class="filter-group__heading__text">{{ 'collections.filtering.applied_filters' | t }}</div>
</div>
<div class="filter-group__items">
{%- for filter in collection.filters -%}
{%- for value in filter.active_values -%}
{%- if value.param_name != 'filter.v.availability' -%}
<a class="filter-group__applied-item" href="{{ value.url_to_remove }}">
<span class="filter-group__applied-item__text">{{ value.label | escape }}</span>
<span class="filter-group__applied-item__icon">{% render 'svg-x', stroke_width: 1.3 %}</span>
</a>
{%- endif -%}
{%- endfor -%}
{%- if filter.type == 'price_range' -%}
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
<a class="filter-group__applied-item" href="{{ filter.url_to_remove }}">
<span class="filter-group__applied-item__text">
{% if filter.min_value.value %}{{ filter.min_value.value | money }}{%- else -%}{{ 0 | money }}{% endif %} - {% if filter.max_value.value %}{{ filter.max_value.value | money }}{%- else -%}{{ filter.range_max | money }}{% endif %}
</span>
<span class="filter-group__applied-item__icon">{% render 'svg-x', stroke_width: 1.3 %}</span>
</a>
{%- endif -%}
{%- endif -%}
{%- endfor -%}
<div class="filter-group__clear-row">
<a class="filter-group__clear-link" href="{{ collection.url }}">{{ 'collections.filtering.clear_all' | t }}</a>
</div>
</div>
</div>
{% endcapture %}
{%- if active_filters_html contains 'filter-group__applied-item' -%}
{{ active_filters_html }}
{%- endif -%}
<form id="CollectionFilterForm">
{%- comment -%}
Preserve automatic vendor/type collections & sorting
{%- endcomment -%}
{%- if collection.current_vendor or collection.current_type -%}
<input type="hidden" name="q" value="{{ collection.current_vendor }}{{ collection.current_type }}">
{%- endif -%}
{%- for filter in collection.filters -%}
{%- if filter.param_name == 'filter.v.availability' -%}
<div class="filter-group filter-group--availability">
<div class="filter-toggle filter-toggle--inline">
<span class="filter-toggle__group-label">{{ 'collections.filtering.out_of_stock_label' | t }}</span>
<div class="filter-toggle__options">
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-1"
type="radio"
name="{{ filter.param_name }}"
value=""
{% if filter.active_values == empty %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.show_label' | t }}</span>
</label>
<label class="filter-toggle__input-label">
<input class="filter-toggle__input"
id="Filter-{{ filter.param_name }}-2"
type="radio"
name="{{ filter.param_name }}"
value="1"
{% if filter.active_values != empty and filter.active_values.first.value == '1' %}checked{% endif %}>
<span class="filter-toggle__input-label-text">{{ 'collections.filtering.hide_label' | t }}</span>
</label>
</div>
</div>
</div>
{%- else -%}
{%- liquid
if settings.swatch_enabled and settings.swatch_option_name contains filter.label and filter.type == "list"
assign filter_group_is_swatch = true
else
assign filter_group_is_swatch = false
endif
if section.settings.collapse_filters_method == 'all'
assign collapse_filters = true
elsif section.settings.collapse_filters_method == 'none'
assign collapse_filters = false
elsif section.settings.collapse_filters_method contains 'over-'
assign limit = section.settings.collapse_filters_method | split: '-' | last | plus: 0
if filter.values.size > limit
assign collapse_filters = true
else
assign collapse_filters = false
endif
endif
-%}
<div class="filter-group{% if filter_group_is_swatch %} filter-group--swatch{% if section.settings.filter_two_columns_swatches %} filter-group--two-column-layout{% endif %}{% elsif section.settings.filter_two_columns and filter.type == "list" %} filter-group--two-column-layout{% endif %}">
<a href="#" class="filter-group__heading{% if collapse_filters %} toggle-target-toggler--is-hidden{% endif %}" data-toggle-target=".filter-group--{{ forloop.index | plus: 1 }}">
<div class="filter-group__heading__text">{{ filter.label | escape }}</div>
<span class="filter-group__heading__indicator">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</a>
<div class="filter-group__items filter-group--{{ forloop.index | plus: 1 }} toggle-target{% if collapse_filters %} toggle-target--hidden{% endif %}">
<div class="toggle-target-container">
{% case filter.type %}
{% when "list" %}
{%- for value in filter.values -%}
<label class="filter-group__item{% if value.active %} filter-group__item--active{% endif %}{% if value.count == 0 and value.active == false %} filter-group__item--disabled{% endif %}" data-tag="{{ value.label | handle }}">
{% if filter_group_is_swatch %}<span class="filter-group__item__swatch{% if settings.swatch_images %} lazyload{% endif %}" {% if settings.swatch_images %}data-bgset="{{ value.label | handle | append: '.png' | file_img_url: '48x48', crop: 'center' }}"{% else %}style="background-color:{{ value.label | downcase | remove: ' ' | escape }}"{% endif %}></span>{% endif %}
<input class="filter-group__checkbox"
id="Filter-{{ value.param_name }}-{{ value.value | handle }}"
type="checkbox"
name="{{ value.param_name }}"
value="{{ value.value | escape }}"
{% if value.active %}checked{% endif %}
{% if value.count == 0 and value.active == false %}disabled{% endif %}>
<span class="filter-group__item__text">{{ value.label }}</span>
{% if section.settings.show_filter_counts and filter_group_is_swatch == false %}
<span class="filter-group__item__count">{{ value.count }}</span>
{% endif %}
</label>
{%- endfor -%}
{% when "price_range" %}
{% render 'price-range', filter: filter %}
{% endcase %}
</div>
</div>
</div>
{%- endif -%}
{%- endfor -%}
{% if section.settings.coll_show_sort %}
<div class="filter-group mobile-only">
<a href="#" class="filter-group__heading" data-toggle-target=".filter-group--sort">
<div class="filter-group__heading__text">{{ 'collections.sorting.title' | t }}</div>
<span class="filter-group__heading__indicator">{% render 'svg-chevron-down', stroke_width: 1.3 %}</span>
</a>
<div class="filter-group__items filter-group--sort toggle-target">
<div class="toggle-target-container">
{%- for option in collection.sort_options -%}
{%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%}
<label class="filter-group__item{% if current_sort == option.value %} filter-group__item--active{% endif %}">
<input class="filter-group__checkbox"
id="Filter-Sort-{{ option.value }}"
type="radio"
name="sort_by"
value="{{ option.value }}"
{% if current_sort == option.value %}checked{% endif %}>
<span class="filter-group__item__text">{{ option.name | escape }}</span>
</label>
{%- endif -%}
{%- endfor -%}
</div>
</div>
</div>
{% endif %}
<noscript>
<button type="submit" class="btn">{{ 'collections.filtering.submit' | t }}</button>
</noscript>
</form>
{% endcomment %}
</div>
</div>
{% endif %}

<div class="filters-adjacent collection-listing">
{% if collection.products.size == 0 %}
<h5 class="align-centre fully-spaced-row">{{ 'collections.general.no_matches' | t }}</h5>
{% else %}
<div class="product-list product-list--per-row-{{ section.settings.grid }} product-list--per-row-mob-{{ settings.prod_thumb_mob_per_row }} product-list--per-row-mob-{{ settings.prod_thumb_mob_per_row }} product-list--image-shape-{{ settings.prod_thumb_shape }}">
{%- liquid
if settings.prod_thumb_shape == 'portrait-23'
assign chosen_aspect_ratio = 0.67
elsif settings.prod_thumb_shape == 'portrait-45'
assign chosen_aspect_ratio = 0.8
elsif settings.prod_thumb_shape == 'square'
assign chosen_aspect_ratio = 1.0
elsif settings.prod_thumb_shape == 'landscape-54'
assign chosen_aspect_ratio = 1.25
elsif settings.prod_thumb_shape == 'landscape-32'
assign chosen_aspect_ratio = 1.50
elsif settings.prod_thumb_shape == 'tallest'
assign chosen_aspect_ratio = 99
for product in collection.products
if product.featured_media.preview_image.aspect_ratio < chosen_aspect_ratio
assign chosen_aspect_ratio = product.featured_media.preview_image.aspect_ratio
endif
endfor
else
assign chosen_aspect_ratio = 0
for product in collection.products
if product.featured_media.preview_image.aspect_ratio > chosen_aspect_ratio
assign chosen_aspect_ratio = product.featured_media.preview_image.aspect_ratio
endif
endfor
endif
-%}
{% for product in collection.products %}
{% if collection.handle == 'new-arrivals' %}
{%- if forloop.index == 1 -%}
<div data-product-id="{{ product.id }}" class="product-block">
<a href="https://yellowboxshoes.com/collections/all-sale">
<img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
</div>
{%- endif -%}{%- endif -%}
{% render 'product-block', product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>

<div class="container pagination-row" data-ajax-container>{% render 'pagination-control', paginate: paginate %}</div>

{% endpaginate %}

{% if collection.description != blank and section.settings.coll_desc_pos == 'below' %}
<div class="container container--reading-width fully-spaced-row" data-cc-animate>
<div class="rte cf">{{ collection.description }}</div>
</div>
{% endif %}
</div>


{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "checkbox",
"id": "show_image_behind_heading",
"label": "Show collection image behind heading",
"default": true
},
{
"type": "select",
"id": "heading_image_height",
"label": "Heading image height",
"options": [
{
"value": "small",
"label": "Compact"
},
{
"value": "medium",
"label": "Small"
},
{
"value": "large",
"label": "Medium"
},
{
"value": "huge",
"label": "Large"
}
],
"default": "medium"
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "coll_num_per_page_int",
"min": 16,
"max": 50,
"step": 2,
"label": "Number of products to show per page",
"default": 24
},
{
"type": "range",
"id": "grid",
"label": "Products per row",
"min": 2,
"max": 5,
"step": 1,
"default": 4
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show product vendors",
"default": false
},
{
"type": "checkbox",
"id": "show_total",
"label": "Show product total",
"default": true
},
{
"type": "select",
"id": "coll_desc_pos",
"label": "Description position",
"default": "above",
"options": [
{
"value": "above",
"label": "Below collection title"
},
{
"value": "below",
"label": "Below products"
}
]
},
{
"type": "header",
"content": "Filters"
},
{
"type": "checkbox",
"id": "enable_filtering",
"label": "Enable filtering",
"info": "[Customize filters](\/admin\/menus)",
"default": true
},
{
"type": "checkbox",
"id": "collapse_tag_sidebar_by_default",
"label": "Collapse filter column",
"default": false
},
{
"type": "select",
"id": "collapse_filters_method",
"label": "Filter row collapse",
"default": "over-12",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "over-6",
"label": "Over 6 items"
},
{
"value": "over-12",
"label": "Over 12 items"
},
{
"value": "over-18",
"label": "Over 18 items"
},
{
"value": "all",
"label": "All rows"
}
]
},
{
"type": "checkbox",
"id": "show_filter_counts",
"label": "Show filter counts",
"default": false
},
{
"type": "checkbox",
"id": "show_disabled_filters",
"label": "Show filters with zero results",
"default": true
},
{
"type": "checkbox",
"id": "ajax_products",
"label": "Filter and sort collections without loading a new page",
"default": true,
"info": "Some apps require this to be disabled"
},
{
"type": "checkbox",
"id": "auto_apply_hide_unavailable",
"label": "On selecting a filter, automatically apply 'Hide out of stock'",
"default": false,
"info": "Requires Availability filter to be enabled"
},
{
"type": "checkbox",
"id": "enable_sticky_filter",
"label": "Enable stick on scroll",
"default": true
},
{
"type": "checkbox",
"id": "filter_two_columns",
"label": "Two column filter values",
"default": false
},
{
"type": "checkbox",
"id": "coll_show_sort",
"label": "Show sorting dropdown",
"default": true
},
{
"type": "checkbox",
"id": "coll_show_feat",
"label": "Show 'Featured' in sorting dropdown",
"default": false
},
{
"type": "header",
"content": "Subcollections"
},
{
"type": "paragraph",
"content": "The current collection is located in the menu, and any other collections within that dropdown menu are displayed. [Read more](https://cleancanvas.co.uk/support/symmetry/subcollections)"
},
{
"type": "checkbox",
"id": "enable_subcoll",
"label": "Enable subcollections",
"info": "A menu must be selected below",
"default": true
},
{
"type": "link_list",
"id": "subcoll_menu",
"label": "Subcollections menu",
"info": "This is usually your main menu",
"default": "main-menu"
},
{
"type": "select",
"id": "subcoll_style",
"label": "Subcollections style",
"default": "buttons",
"options": [
{
"value": "buttons",
"label": "Buttons"
},
{
"value": "gallery",
"label": "Gallery"
}
]
},
{
"type": "header",
"content": "Subcollection gallery layout"
},
{
"type": "select",
"id": "subcoll_gall_shape",
"label": "Image shape",
"default": "sq",
"options": [
{
"value": "l-21",
"label": "Landscape (2x1)"
},
{
"value": "l-64",
"label": "Landscape (6x4)"
},
{
"value": "l-5x4",
"label": "Landscape (5x4)"
},
{
"value": "sq",
"label": "Square (1x1)"
},
{
"value": "p-4x5",
"label": "Portrait (4x5)"
}
]
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"id": "subcoll_gall_enable_margin",
"type": "checkbox",
"label": "Add spacing",
"default": true
},
{
"id": "subcoll_gall_full_width",
"type": "checkbox",
"label": "Full page width",
"default": false
},
{
"id": "subcoll_gall_overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "select",
"id": "subcoll_gall_text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center center",
"label": "Middle"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "select",
"id": "subcoll_gall_mobile_layout",
"label": "Mobile layout",
"info": "Mobile layout always uses 5x4 images",
"default": "2",
"options": [
{
"value": "1",
"label": "1 item"
},
{
"value": "2",
"label": "2 items"
},
{
"value": "hide",
"label": "Hide"
}
]
}
]
}
{% endschema %}

Hope it helps!

[albertloekito]

@LitExtension  No worries, thank you for the code it looks great now, can I ask you 2 more questions if you don't mind

1. Let's say I want to add the banner on the 3rd and 4th images (as a wide banner) how can I do that?

2. Is it possible to show the banner on every specific collection page, let's say I want to show it on all new arrivals collection pages in this case I have 5 pages.

Thank you

[LitExtension]

Hi @albertloekito,

Please send me the preview link, I will check it

[albertloekito]

Hi @LitExtension here you go, please check on new arrivals collection page. Thank you

https://ozm1k77wkjlocrch-1608220771.shopifypreview.com

[LitExtension]

Hi @albertloekito,

Please add code here:

Code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 3 -%}
    <div data-product-id="{{ product.id }}" class="product-block" style="width: 100%">
      <a href="https://yellowboxshoes.com/collections/all-sale">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
    </div>
  {%- endif -%}
  {%- if forloop.index == 4 -%}
    <div data-product-id="{{ product.id }}" class="product-block" style="width: 100%">
      <a href="https://yellowboxshoes.com/collections/all-sale">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
    </div>
  {%- endif -%}
{%- endif -%}

Hope it helps!

[albertloekito]

Hi @LitExtension Sorry it did not work, see below

https://59ucm304k9f421j1-1608220771.shopifypreview.com

[LitExtension]

Hi @albertloekito,

Please change code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 4 -%}
    <div data-product-id="{{ product.id }}" class="product-block" style="width: 100%">
      <a href="https://yellowboxshoes.com/collections/all-sale">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
    </div>
    <div data-product-id="{{ product.id }}" class="product-block" style="width: 100%">
      <a href="https://yellowboxshoes.com/collections/all-sale">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
    </div>
  {%- endif -%}
{%- endif -%}

Hope it helps!

[albertloekito]

Hi @LitExtension Sorry still not working

https://2lvpuu3rsk05tioy-1608220771.shopifypreview.com

I try to make something like this below, so product 3 and 4 have full banner

https://sokoglam.com/collections/cleansing-balms

[LitExtension · Accepted solution]

Hi @albertloekito,

I got the wrong information, I think you are trying to show the full banner.

Are you wanting this? show only 1 image for positions 3 and 4

Please change code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 2 -%}
    <div data-product-id="{{ product.id }}" class="product-block" style="width: 50%">
      <a href="https://yellowboxshoes.com/collections/all-sale">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
    </div>
  {%- endif -%}
{%- endif -%}

Hope it helps!

[albertloekito]

Hi @LitExtension The code works great, and sorry one last thing

Can I show the banner only on the first page of the collection?

[LitExtension · Accepted solution]

Hi @albertloekito,

Please change all code:

{% if collection.handle == 'new-arrivals' %}
          {%- if forloop.index == 2 and paginate.current_page == 1 -%}
            <div data-product-id="{{ product.id }}" class="product-block" style="width: 50%">
              <a href="https://yellowboxshoes.com/collections/all-sale">
              <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g..."></a>
            </div>
          {%- endif -%}
        {%- endif -%}

Hope it helps!

[albertloekito]

Hi @LitExtension it works great, Thank you so much for all your help, appreciate it.

[albertloekito]

Hi @LitExtension Sorry forgot to ask you one more thing, how do I put a text overlay on the images?

I try to create a text container but the text is not on top of the images.

[LitExtension]

Hi @albertloekito,

You can add text and send me a link preview, I will check it

[albertloekito]

Hi @LitExtension Here's the link

https://o3rys3kj7da9h2rq-1608220771.shopifypreview.com

[LitExtension · Accepted solution]

Hi @albertloekito,

Please change code image:

<a href="https://yellowboxshoes.com/collections/all-sale" style="position: relative;display: block;">
      <img src="https://cdn.shopify.com/s/files/1/0016/0822/0771/files/2023-01-13_WeekendSOS-_promo-starts__Mobile.g...">
    <div style="
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
    ">text</div>
</a>

Hope it helps!

[albertloekito]

Hi @LitExtension , it works great

Once again thank you for all your help.

[albertloekito]

Hi,

I updated the theme to a newer version and when I added {%- if forloop.index == 1 -%} The banner is not showing up on the first row, instead is showing up on the seventh row, any idea how to fix this?

Thank you

[Bjornefar]

Thanks a lot for this solution. I can confirm that it works perfectly fine for the Dawn 8.0 theme as well. I would advise to recreate the HTML structure to mimic product cards and utilize the same classes though. Super flexible and cool solution! Thanks a bunch!

For reference, this is my code using the Dawn theme. Super easy to make it all controllable through customizer settings as well as to switch between 1 and 2 column width, depending on the video.

Main-collection-product-grid.liquid

{%- for product in collection.products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                {%- if forloop.index == 2 and paginate.current_page == 1 -%}
                  <li data-product-id="{{ product.id }}" class="grid-video grid__item">
                    <a href="https://nordic-ergo-2-0-dawn.myshopify.com/collections/kontorstole">
                      <div class="card-wrapper product-card-wrapper underline-links-hover">
                        <div class="card card--card card--media color-background-2 gradient"</div>
                          <video class="fullscreen-video" playsinline autoplay muted loop>
                              <source src="//cdn.shopify.com/videos/c/o/v/aefd2c27c6494b88b47facff5570754a.mp4" type="video/mp4">
                          </video>
                        </div>
                    </a>
                  </li>
                {%- endif -%}

CSS to make it fill out the entirety of a product card element

video.fullscreen-video {
  position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius:var(--product-card-corner-radius);

  &::-webkit-media-controls {
     display:none !important;
  }
}

Result:

[mrjeet]

Can we put it after every 10 products?

Link is Here

https://kwabey.com/shop/category/men/t-shirts/

[kannysocool]

Hi, I'm using the Refresh theme, i also want to add a banner image To Product Grid In Collection Template, can you help me? 

[yanti24]

Hi there, I love this idea of adding a banner image to the collection page. I have duplicated our existing collection theme to test but am unsure where to place the script code. Could you please help? Thanks