October 17, 2021

Featured Categories snippets

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *