Hi @LitExtension Here’s the link
Hi @albertloekito ,
Please change code image:
[
text
](https://yellowboxshoes.com/collections/all-sale)
Hope it helps!
Hi @LitExtension , it works great
Once again thank you for all your help.
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 -%}
- [
](https://nordic-ergo-2-0-dawn.myshopify.com/collections/kontorstole)
[
](https://nordic-ergo-2-0-dawn.myshopify.com/collections/kontorstole)
{%- 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:
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?
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
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
Hi, I want to do something similar. I am currently using Impulse but want to move back to Dawn. I want a three column product grid and want the ability to insert a banner/blog link into the product grid as albertloekito has above. Can you help me?
{{ ‘template-collection.css’ | asset_url | stylesheet_tag }}
{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{% if section.settings.image_shape == ‘blob’ %}
{{ ‘mask-blobs.css’ | asset_url | stylesheet_tag }}
{%- endif -%}
{%- unless section.settings.quick_add == ‘none’ -%}
{{ ‘quick-add.css’ | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if section.settings.quick_add == ‘standard’ -%}
{%- endif -%}
{%- if section.settings.quick_add == ‘bulk’ -%}
{%- endif -%}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- paginate collection.products by section.settings.products_per_page -%}
{% comment %} Sort is the first tabbable element when filter type is vertical {% endcomment %}
{%- if section.settings.enable_sorting and section.settings.filter_type == 'vertical' -%}
<facet-filters-form class="facets facets-vertical-sort page-width small-hide">
<form class="facets-vertical-form" id="FacetSortForm">
<div class="facet-filters sorting caption">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<select
name="sort_by"
class="facet-filters__sort select__select caption-large"
id="SortBy"
aria-describedby="a11y-refresh-page-message"
>
{%- for option in collection.sort_options -%}
<option
value="{{ option.value | escape }}"
{% if option.value == sort_by %}
selected="selected"
{% endif %}
>
{{ option.name | escape }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</div>
<div class="product-count-vertical light" role="status">
<h2 class="product-count__text text-body">
<span id="ProductCountDesktop">
{%- if collection.results_count -%}
{{
'templates.search.results_with_count'
| t: terms: collection.terms, count: collection.results_count
}}
{%- elsif collection.products_count == collection.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
{%- else -%}
{{
'products.facets.product_count'
| t: product_count: collection.products_count, count: collection.all_products_count
}}
{%- endif -%}
</span>
</h2>
{%- render 'loading-spinner' -%}
</div>
</form>
</facet-filters-form>
{%- endif -%}
<div class="{% if section.settings.filter_type == 'vertical' %} facets-vertical page-width{% endif %}">
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
<aside
aria-labelledby="verticalTitle"
class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
id="main-collection-filters"
data-id="{{ section.id }}"
>
{% render 'facets',
results: collection,
enable_filtering: section.settings.enable_filtering,
enable_sorting: section.settings.enable_sorting,
filter_type: section.settings.filter_type,
paginate: paginate
%}
</aside>
{%- endif -%}
<div
class="product-grid-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
id="ProductGridContainer"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- if collection.products.size == 0 -%}
<div class="collection collection--empty page-width" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<div class="title-wrapper center">
<h2 class="title title--primary">
{{ 'sections.collection_template.empty' | t -}}
<br>
{{
'sections.collection_template.use_fewer_filters_html'
| t: link: collection.url, class: 'underlined-link link'
}}
</h2>
</div>
</div>
{%- else -%}
<div
class="collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}"
>
<div class="loading-overlay gradient"></div>
<ul id="product-grid" class="grid grid-cols-2 sm:grid-cols-4 gap-4 grid--2-col-tablet-down grid--4-col-desktop custom-grid-data">
{% assign promo_block_index = 0 %}
{% assign total_blocks = section.blocks.size %}
{% for product in collection.products %}
<li class="grid__item scroll-trigger animate--slide-in">
<div class="custom-product-wrapper flex flex-col gap-4 items-center text-center">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: forloop.index > 2,
skip_styles: false,
quick_add: section.settings.quick_add,
section_id: section.id
%}
</div>
</li>
{% assign product_index = forloop.index %}
{% assign block_insert_index = promo_block_index | plus: 1 | times: 7 %}
{% if product_index == block_insert_index and promo_block_index < total_blocks %}
{% assign block = section.blocks\[promo_block_index\] %}
{% case block.type %}
{% when 'promo_banner' %}
<li class="grid__item col-span-full" {{ block.shopify_attributes }}>
<div class="promo-box">
{% if block.settings.promo_image %}
<div class="promo-image-wrapper">
<img src="{{ block.settings.promo_image | image_url: width: 265 }}" alt="{{ block.settings.promo_image.alt | escape }}" loading="lazy" />
</div>
{% endif %}
<h3 class="promo-title">{{ block.settings.title }}</h3>
<p class="promo-subtitle">{{ block.settings.subtitle }}</p>
<ul class="promo-list">
<li><p>{{ block.settings.offer1_text }}</p><span class="promo-badge">{{ block.settings.offer1_badge }}</span></li>
<li><p>{{ block.settings.offer2_text }}</p><span class="promo-badge">{{ block.settings.offer2_badge }}</span></li>
<li><p>{{ block.settings.offer3_text }}</p><span class="promo-badge">{{ block.settings.offer3_badge }}</span></li>
</ul>
<div class="promo-note">
<svg xmlns=" http://www.w3.org/2000/svg " fill="none" viewBox="0 0 22 23" height="23" width="22">
<path stroke-width="0.8" stroke="black" d="M9.85392 4.27977C9.96792 4.14325 10.1366 4.06435 10.3145 4.06435L16.4422 4.06435C16.735 4.06435 16.9851 4.27574 17.0338 4.56449L18.0451 10.5565C18.0743 10.7294 18.0264 10.9064 17.9141 11.0409L9.85139 20.6962C9.63859 20.9511 9.25928 20.9846 9.00502 20.7711L1.8672 14.7777C1.61391 14.565 1.58049 14.1874 1.79248 13.9336L9.85392 4.27977Z"></path>
<circle stroke-width="0.8" stroke="black" transform="rotate(40.0195 13.9099 7.68789)" r="1.12521" cy="7.68789" cx="13.9099"></circle>
<path stroke-width="0.8" stroke="black" d="M17.5248 11.5914L12.4229 20.9421C12.1759 21.3948 11.6251 21.5854 11.1511 21.3823L9.76873 20.7898"></path>
</svg>
<span>{{ block.settings.note_text }}</span></div>
{% if block.settings.show_button %}
<a id="learnMoreBtn" href="{{ block.settings.button_url1 }}" class="learn-more-btn">{{ block.settings.button_label }}</a>
{% endif %}
</div>
</li>
{% when 'promo_text_only' %}
<li class="grid__item col-span-full" {{ block.shopify_attributes }}>
<div class="promo-box text-only">
<h3>{{ block.settings.title }}</h3>
<p>{{ block.settings.subtitle }}</p>
</div>
</li>
{% when 'promo_image_only' %}
{% if block.settings.image %}
<li class="grid__item col-span-full" {{ block.shopify_attributes }}>
<div class="promo-image-wrapper">
<div class="product-card">
{% if block.settings.image != blank %}
{{ block.settings.image | image_url: width: 260, height:300 | image_tag: class:'ingredient-background' }}
{% endif %}
<div class="sale-card-inner">
{% if block.settings.sale != blank %}
<div class="product-tag">
{% if block.settings.sale != blank %}
<div class="sale-tags">{{ block.settings.sale }}</div>
{% endif %}
{% if block.settings.protitle != blank %}
<p class="product-title">{{ block.settings.protitle }}</p>
{% endif %}
</div>
{% endif %}
{% if block.settings.button_url != blank %}
<a href="{{ block.settings.button_url }}" class="shop-button">
{{ block.settings.button_label }}
</a>
{% endif %}
</div>
</div>
</div>
</li>
{% endif %}
{% when 'promo_custom_html' %}
<li class="grid__item col-span-full" {{ block.shopify_attributes }}>
<div class="promo-custom-html">
{{ block.settings.custom_code }}
</div>
</li>
{% endcase %}
{% assign promo_block_index = promo_block_index | plus: 1 %}
{% endif %}
{% endfor %}
</ul>
{%- if paginate.pages > 1 -%}
{% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endpaginate -%}
{% if section.settings.image_shape == ‘arch’ %}
{% render 'mask-arch' %}
{%- endif -%}
<button class="close-btn" onclick="closeModal()">Close</button>
<div class="modal-body">
<div class="modal-bg">
<div class="modal-overlay-content">
<div class="modal-title">
<h2>Stock up,<br><strong>save more!</strong></h2>
</div>
<div class="offer-list">
<div class="item-save"><span>Buy any 3 items</span><strong>Get 10% Off</strong></div>
<div class="item-save"><span>Buy any 4 items</span><strong>Get 15% Off</strong></div>
<div class="item-save"><span>Buy any 5 items</span><strong>Get 20% Off</strong></div>
<div class="note">
<svg xmlns=" http://www.w3.org/2000/svg " width="14" height="14" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.59 13.41 13.41 20.59a2 2 0 0 1-2.83 0L3 13V3h10l7.59 7.59a2 2 0 0 1 0 2.82ZM6.5 6.5a1.5 1.5 0 1 0 2.12 2.12A1.5 1.5 0 0 0 6.5 6.5Z"/>
</svg>
<span>Discount automatically applied in cart.</span>
</div>
<p class="shipping-text">Free shipping with 3+ items.</p>
</div>
<a href="/collections/all" class="shop-now-btn">SHOP NOW</a>
</div>
</div>
</div>
{% schema %}
{
“name”: “t:sections.main-collection-product-grid.name”,
“class”: “section”,
“settings”: [
{
"type": "range",
"id": "products_per_page",
"min": 8,
"max": 36,
"step": 4,
"default": 16,
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 4,
"label": "t:sections.main-collection-product-grid.settings.columns_desktop.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__3.content"
},
{
"type": "select",
"id": "image_ratio",
"options": \[
{
"value": "adapt",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.options__3.label"
}
\],
"default": "adapt",
"label": "t:sections.main-collection-product-grid.settings.image_ratio.label"
},
{
"type": "select",
"id": "image_shape",
"options": \[
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
\],
"default": "default",
"label": "t:sections.all.image_shape.label",
"info": "t:sections.all.image_shape.info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.main-collection-product-grid.settings.show_rating.label",
"info": "t:sections.main-collection-product-grid.settings.show_rating.info"
},
{
"type": "select",
"id": "quick_add",
"default": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
"info": "t:sections.main-collection-product-grid.settings.quick_add.info",
"options": \[
{
"value": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
},
{
"value": "standard",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
},
{
"value": "bulk",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
}
\]
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header__1.content"
},
{
"type": "checkbox",
"id": "enable_filtering",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
},
{
"type": "select",
"id": "filter_type",
"options": \[
{
"value": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__1.label"
},
{
"value": "vertical",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__2.label"
},
{
"value": "drawer",
"label": "t:sections.main-collection-product-grid.settings.filter_type.options__3.label"
}
\],
"default": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.filter_type.label",
"info": "t:sections.main-collection-product-grid.settings.filter_type.info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
},
{
"type": "header",
"content": "t:sections.main-collection-product-grid.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.label",
"options": \[
{
"value": "1",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label"
}
\]
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
“blocks”: [
{
"type": "promo_banner",
"name": "Promo(Image + Offers)",
"settings": \[
{ "type": "image_picker", "id": "promo_image", "label": "Promo Image" },
{ "type": "text", "id": "title", "label": "Banner Title", "default": "Buy & save." },
{ "type": "text", "id": "subtitle", "label": "Banner Subtitle", "default": "Free shipping with 3+ items." },
{ "type": "text", "id": "offer1_text", "label": "Offer 1 Text", "default": "Buy any 3 items" },
{ "type": "text", "id": "offer1_badge", "label": "Offer 1 Badge", "default": "Get 10% OFF" },
{ "type": "text", "id": "offer2_text", "label": "Offer 2 Text", "default": "Buy any 4 items" },
{ "type": "text", "id": "offer2_badge", "label": "Offer 2 Badge", "default": "Get 15% OFF" },
{ "type": "text", "id": "offer3_text", "label": "Offer 3 Text", "default": "Buy any 5+ items" },
{ "type": "text", "id": "offer3_badge", "label": "Offer 3 Badge", "default": "Get 20% OFF" },
{ "type": "text", "id": "note_text", "label": "Note Text", "default": "Discount automatically applied in cart." },
{ "type": "checkbox", "id": "show_button", "label": "Show Button", "default": true },
{ "type": "text", "id": "button_label", "label": "Button Label", "default": "LEARN MORE" },
{ "type": "url", "id": "button_url1", "label": "Button URL" }
\]
},
{
"type": "promo_text_only",
"name": "Promo Text Only",
"settings": \[
{ "type": "text", "id": "title", "label": "Title", "default": "Special Offer!" },
{ "type": "text", "id": "subtitle", "label": "Subtitle", "default": "Save more today." }
\]
},
{
"type": "promo_image_only",
"name": "Promo Image Only",
"settings": \[
{ "type": "text", "id": "sale", "label": "Sale Badge", "default": "New" },
{ "type": "text", "id": "protitle", "label": "Sale Badge", "default": "Product Ttile" },
{ "type": "image_picker", "id": "image", "label": "Full Width Image" },
{ "type": "text", "id": "button_label", "label": "Button Label", "default": "LEARN MORE" },
{ "type": "url", "id": "button_url", "label": "Buuton URL" }
\]
},
{
"type": "promo_custom_html",
"name": "Promo Custom HTML",
"settings": \[
{ "type": "html", "id": "custom_code", "label": "Custom HTML", "default": "<p>Your custom content here</p>" }
\]
}
]
}
{% endschema %}
this code is for dawn theme
