Shopify featured collection is the collection created with section blocks user can create custom featured collection lists. In this article we are using image_picker, link and text object for create dynamic featured collection in shopify.
<div id="{{section.id}}" class="featured">
{%- for block in section.blocks -%}
<div class="box">
<a href="{{link}}">
<div class="caption">
<h4>{{block.settings.sub_heading}}</h4>
<h2>{{block.settings.heading}}</h2>
</div>
{%- if block.settings.img != blank -%}
<img src="{{block.settings.img | img_url:'600x'}}" /> </a>
{% else %}
{{ 'image' | placeholder_svg_tag: 'img-class' }}
{% endif %}
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Featured Categories",
"class":"featured_collection",
"settings": [
{
"type":"text",
"id":"heading",
"label":"Heading",
"default":"Heading"
}
],
"blocks":[
{
"type":"column",
"name":"Featured Blocks",
"settings":[
{
"type":"html",
"id":"heading",
"label":"Heading",
"default":"Autumn <span>2021</span>"
},
{
"type":"html",
"id":"sub_heading",
"label":"Sub Heading",
"default":"New Arrivals"
},
{
"type":"image_picker",
"id":"img",
"label":"Image"
},
{
"type":"url",
"id":"link",
"label":"Collection Link"
}
]
}
],
"presets": [
{
"name": "Featured Categories",
"blocks": [
{
"type": "column"
},
{
"type": "column"
},
{
"type": "column"
}
]
}
]
}
{% endschema %}.featured {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 10px; font-family:sans-serif;
}
.featured .box {
position: relative; overflow:hidden;
}
.featured .box img {
width: 100%;
}
.featured .box:hover img { transform:scale(1.2); transition:all ease 1s;}
.featured .box .caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgb(255 255 255 / 94%);
padding: 15px; z-index:1;
text-align: center;
border-radius: 5px;
}
.featured .box .caption h2, .featured .box .caption h4 {
margin: 0;
padding: 0; text-transform: uppercase;
}
.featured .box .caption span {
color: #03a9f4;
}
