Adding Banner Image To Product Grid In Collection Template

Store Design
1

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

grid-1.PNG
grid-1.PNG1555×706 112 KB

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
grid-2.PNG1178×479 231 KB

@LitExtension

2

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

3

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

4

Hi @albertloekito ,

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

5

Here you go

{% 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’ %}

{%- 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 -%} {{ link.title | escape }} {%- endunless -%} {%- endfor -%}
{% else %} {% unless section.settings.subcoll_gall_full_width %}
{% endunless %}
{%- 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 -%} {%- endunless -%} {%- endfor -%}
{% unless section.settings.subcoll_gall_full_width %}
{% 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’ %}

{{ collection.title | escape }}

{% else %}

{% if header_image_enabled %}

{% if collection.description != blank and section.settings.coll_desc_pos == ‘above’ %}

{{ collection.description }}
{% endif %}

{%- if current_link_parent and section.settings.subcoll_style == ‘buttons’ -%}
{{ subcollection_html }}
{%- endif -%}{% endif %}

{% else %} {{ subcollection_html }}

{{ collection.title | escape }}

{% if collection.description != blank and section.settings.coll_desc_pos == ‘above’ %}

{{ collection.description }}
{% endif %}
{% endif %}

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

{% if section.settings.show_total and paginate.items > 0 %}

{{ 'collections.general.product_count' | t: count: paginate.items }}
{% endif %}
{% if section.settings.coll_show_sort %}
{{ 'collections.sorting.title' | t | escape }}
{%- for option in collection.sort_options -%} {%- if current_sort == option.value -%} {{ option.name | escape }} {%- break -%} {%- endif -%} {%- endfor -%} {% render 'svg-chevron-down', stroke_width: 1.3 %}
{%- 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' -%} {{ option.name | escape }} {%- endif -%} {% endunless %} {%- endfor -%}
{% endif %}

{% if collection.handle == “final-sale” %}

{% endif %} {% if canonical_url contains 'size-6+size-6-5' %} .size-button1 { background-color:#eecbca !important; } {% endif %} {% if canonical_url contains 'size-7+size-7-5' %} .size-button2 { background-color:#eecbca !important; } {% endif %} {% if canonical_url contains 'size-8+size-8-5' %} .size-button3 { background-color:#eecbca !important; } {% endif %} {% if canonical_url contains 'size-9+size-9-5' %} .size-button4 { background-color:#eecbca !important; } {% endif %} {% if canonical_url contains 'size-10+size-11' %} .size-button5 { background-color:#eecbca !important; } {% endif %}
{% if section.settings.enable_filtering %}
{% render 'pt-current-filters' %} {% render 'filter-menu' %} {% comment %}

{{ 'collections.filtering.heading' | t }}

{% render 'svg-x', stroke_width: 1.3 %}
{% capture active_filters_html %}
{{ 'collections.filtering.applied_filters' | t }}
{%- for filter in collection.filters -%} {%- for value in filter.active_values -%} {%- if value.param_name != 'filter.v.availability' -%} {{ value.label | escape }} {% render 'svg-x', stroke_width: 1.3 %} {%- endif -%} {%- endfor -%} {%- if filter.type == 'price_range' -%} {%- if filter.min_value.value != nil or filter.max_value.value != nil -%} {% 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 %} {% render 'svg-x', stroke_width: 1.3 %} {%- endif -%} {%- endif -%} {%- endfor -%}
{% endcapture %} {%- if active_filters_html contains 'filter-group__applied-item' -%} {{ active_filters_html }} {%- endif -%} {%- comment -%} Preserve automatic vendor/type collections & sorting {%- endcomment -%} {%- if collection.current_vendor or collection.current_type -%} {%- endif -%} {%- for filter in collection.filters -%} {%- if filter.param_name == 'filter.v.availability' -%}
{{ 'collections.filtering.out_of_stock_label' | t }}
{{ 'collections.filtering.show_label' | t }} {{ 'collections.filtering.hide_label' | t }}
{%- 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 -%}
{{ filter.label | escape }}
{% render 'svg-chevron-down', stroke_width: 1.3 %}
{% case filter.type %} {% when "list" %} {%- for value in filter.values -%} {% if filter_group_is_swatch %}{% endif %} {{ value.label }} {% if section.settings.show_filter_counts and filter_group_is_swatch == false %} {{ value.count }} {% endif %} {%- endfor -%} {% when "price_range" %} {% render 'price-range', filter: filter %} {% endcase %}
{%- endif -%} {%- endfor -%} {% if section.settings.coll_show_sort %}
{{ 'collections.sorting.title' | t }}
{% render 'svg-chevron-down', stroke_width: 1.3 %}
{%- for option in collection.sort_options -%} {%- if option.value != 'manual' or section.settings.coll_show_feat or collection.default_sort_by == 'manual' -%} {{ option.name | escape }} {%- endif -%} {%- endfor -%}
{% endif %} {{ 'collections.filtering.submit' | t }} {% endcomment %}
{% endif %}
{% if collection.products.size == 0 %}
{{ 'collections.general.no_matches' | t }}
{% else %}
{%- 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 -%} {%- endif -%}{%- endif -%}{% endfor %}
{% endif %}
{% render 'pagination-control', paginate: paginate %}

{% endpaginate %}

{% if collection.description != blank and section.settings.coll_desc_pos == ‘below’ %}

{{ collection.description }}
{% endif %}

{% 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”,
“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”
},
{
“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 %}

6

Hi @LitExtension

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

Thank you

7

Hi @albertloekito ,

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

Please change all code:


{% 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' %}

{%- 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 -%}
{{ link.title | escape }}
{%- endunless -%}
{%- endfor -%}

{% else %}
{% unless section.settings.subcoll_gall_full_width %}

{% endunless %}

{%- 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 -%}

{%- liquid
if link.object.featured_image
assign subcoll_image = link.object.featured_image
else
assign subcoll_image = false
endif
-%}
{%- if subcoll_image -%}

{%- else -%}

{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}

{%- endif -%}

## {{ link.title }}

{%- endunless -%}
{%- endfor -%}

{% unless section.settings.subcoll_gall_full_width %}

{% 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' %}

# {{ collection.title | escape }} 

{% else %}

{% if header_image_enabled %}

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}

{{ collection.description }}

{% endif %}

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

{% else %}
{{ subcollection_html }}

# {{ collection.title | escape }}

{% if collection.description != blank and section.settings.coll_desc_pos == 'above' %}
{{ collection.description }}

{% endif %}

{% endif %}

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

{% if section.settings.coll_show_sort or show_filters %}

{% render 'svg-filter' %}
{{ 'collections.filtering.filter' | t }}
{% 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 %}
({{ filter_count }})
{% endif %}
{% render 'svg-chevron-right', stroke_width: 1.3 %}

{% endif %}

{% if section.settings.show_total and paginate.items > 0 %}

{{ 'collections.general.product_count' | t: count: paginate.items }}

{% endif %}

{% if section.settings.coll_show_sort %}

{{ 'collections.sorting.title' | t | escape }}

{%- 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' -%}
{{ option.name | escape }}
{%- endif -%}
{% endunless %}
{%- endfor -%}

{% endif %}

{%- render 'svg-grid', stroke_width: 1.3 -%}
{%- render 'svg-box', stroke_width: 1.3 -%}

{% if collection.handle == "final-sale" %}

6 - 6.5
7 - 7.5
8 - 8.5
9 - 9.5
10 - 11
Show All

{% endif %}
{% if canonical_url contains 'size-6+size-6-5' %}

{% endif %}
{% if canonical_url contains 'size-7+size-7-5' %}

{% endif %}
{% if canonical_url contains 'size-8+size-8-5' %}

{% endif %}
{% if canonical_url contains 'size-9+size-9-5' %}

{% endif %}
{% if canonical_url contains 'size-10+size-11' %}

{% endif %}

{% if section.settings.enable_filtering %}

{% render 'pt-current-filters' %}
{% render 'filter-menu' %}
{% comment %}

#### {{ 'collections.filtering.heading' | t }}
{% render 'svg-x', stroke_width: 1.3 %}

{% capture active_filters_html %}

{{ 'collections.filtering.applied_filters' | t }}

{%- for filter in collection.filters -%}
{%- for value in filter.active_values -%}
{%- if value.param_name != 'filter.v.availability' -%}

{{ value.label | escape }}
{% render 'svg-x', stroke_width: 1.3 %}

{%- endif -%}
{%- endfor -%}
{%- if filter.type == 'price_range' -%}
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}

{% 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 %}

{% render 'svg-x', stroke_width: 1.3 %}

{%- endif -%}
{%- endif -%}
{%- endfor -%}

{{ 'collections.filtering.clear_all' | t }}

{% endcapture %}
{%- if active_filters_html contains 'filter-group__applied-item' -%}
{{ active_filters_html }}
{%- endif -%}

{% endcomment %}

{% endif %}

{% if collection.products.size == 0 %}
##### {{ 'collections.general.no_matches' | t }}
{% else %}

{%- 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 -%}

[
](https://yellowboxshoes.com/collections/all-sale)

{%- endif -%}{%- endif -%}
{% render 'product-block', product: product, custom_aspect_ratio: chosen_aspect_ratio, animate: true %}
{% endfor %}

{% endif %}

{% render 'pagination-control', paginate: paginate %}

{% endpaginate %}

{% if collection.description != blank and section.settings.coll_desc_pos == 'below' %}

{{ collection.description }}

{% endif %}

{% 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!

8

@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

9

Hi @albertloekito ,

Please send me the preview link, I will check it

10

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

https://ozm1k77wkjlocrch-1608220771.shopifypreview.com

11

Hi @albertloekito ,

Please add code here:

Screenshot.png
Screenshot.png1328×463 32.5 KB

Code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 3 -%}
    
      [
      ](https://yellowboxshoes.com/collections/all-sale)
    

  {%- endif -%}
  {%- if forloop.index == 4 -%}
    
      [
      ](https://yellowboxshoes.com/collections/all-sale)
    

  {%- endif -%}
{%- endif -%}

Hope it helps!

12

Hi @LitExtension Sorry it did not work, see below

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

13

Hi @albertloekito ,

Please change code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 4 -%}
    
      [
      ](https://yellowboxshoes.com/collections/all-sale)
    

    
      [
      ](https://yellowboxshoes.com/collections/all-sale)
    

  {%- endif -%}
{%- endif -%}

Hope it helps!

14

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

15

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
Screenshot.png1861×703 259 KB

Please change code:

{% if collection.handle == 'new-arrivals' %}
  {%- if forloop.index == 2 -%}
    
      [
      ](https://yellowboxshoes.com/collections/all-sale)
    

  {%- endif -%}
{%- endif -%}

Hope it helps!

16

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

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

17

Hi @albertloekito ,

Please change all code:

{% if collection.handle == 'new-arrivals' %}
          {%- if forloop.index == 2 and paginate.current_page == 1 -%}
            
              [
              ](https://yellowboxshoes.com/collections/all-sale)
            

          {%- endif -%}
        {%- endif -%}

Hope it helps!

18

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

19

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.

20

Hi @albertloekito ,

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