Solved

Adding Banner Image To Product Grid In Collection Template

albertloekito
Tourist
24 0 1

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

 

grid-1.PNG

 

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)

 

grid-2.PNG

@LitExtension

Accepted Solutions (4)
LitExtension
Shopify Partner
4860 1002 1145

This is an 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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an 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

Screenshot.png

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an 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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1002 1145

This is an 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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 27 (27)

LitExtension
Shopify Partner
4860 1002 1145

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

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

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
Shopify Partner
4860 1002 1145

Hi @albertloekito,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

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
Tourist
24 0 1

Hi @LitExtension 

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

 

Thank you

LitExtension
Shopify Partner
4860 1002 1145

This is an 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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

@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
Shopify Partner
4860 1002 1145

Hi @albertloekito,

Please send me the preview link, I will check it

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

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

https://ozm1k77wkjlocrch-1608220771.shopifypreview.com

LitExtension
Shopify Partner
4860 1002 1145

Hi @albertloekito,

Please add code here:

Screenshot.png

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1
LitExtension
Shopify Partner
4860 1002 1145

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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

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
Shopify Partner
4860 1002 1145

This is an 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

Screenshot.png

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

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
Shopify Partner
4860 1002 1145

This is an 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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

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

albertloekito
Tourist
24 0 1

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
Shopify Partner
4860 1002 1145

Hi @albertloekito,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1
LitExtension
Shopify Partner
4860 1002 1145

This is an 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!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
albertloekito
Tourist
24 0 1

Hi @LitExtension , it works great

Once again thank you for all your help.

albertloekito
Tourist
24 0 1

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
Shopify Partner
4 0 1

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:

Screenshot 2023-03-02 at 23.21.26.png

 

mrjeet
Shopify Partner
3 0 0

Can we put it after every 10 products?


Link is Here

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

 

 

Screenshot 2024-03-13 at 3.27.56 PM.png

kannysocool
Shopify Partner
3 0 0

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
Visitor
1 0 0

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