← Go back

Custom Hoverable Shopify Section

Loaded by [email protected]

Upgrade your store with this custom Shopify section designed for seamless user interaction. Featuring a hoverable layout, this prebuilt Shopify section ensures enhanced engagement and modern aesthetics. Perfect for Xebrand Shopify stores, it dynamically fetches collections with smooth transitions and responsive design. Optimize your store with this high-performing layout!

Preview Password = 1 *When you first time enter them back again then click agian Preview to show*

Liquid Code

                    <section class="explore-collections" style="padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="collections-container page-width">
    {% for block in section.blocks %}
      {% assign collection = block.settings.collection | shopify_collection %}
      {% if collection %}
        
        <a href="{{ collection.url }}" class="collection-item">
          <div class="image-wrapper">
             <span class="collection-name">{{ collection.title }}</span>
            <img src="{{ collection.image.src | img_url: 'master' }}" alt="{{ collection.title }}">
          </div>
         
        </a>
      {% endif %}
    {% endfor %}
  </div>
</section>

<style>
.explore-collections {
  text-align: center;
}

.collections-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 260px));
    gap: 20px;
    justify-content: center;
    align-items: center;
}

span.collection-name {
    margin-left: 30px;
}

.image-wrapper {
    display: flex;
    background: #f2f3ee;
    border-radius: 40px;
    align-items: center;
    position: relative;
    height: 180px;
    width: 100%;
}
.image-wrapper img {
    width: 40%;
    border-radius: 40px;
    height: 100%;
    object-fit: cover;
    right: 0;
    z-index: 99;
    position: absolute;
    transition: all 0.3s ease-in-out;
}
  
  .collection-item:hover .image-wrapper img {
    width: 100%;

}
.collection-item {
    display: flex;
    text-decoration: none;
    font-size: 15px;
    color: #000;
}
  @media(max-width:500px){
.image-wrapper {
    height: 70px;
}
    
  span.collection-name {
    margin-left: 16px;
    font-size: 10px;
}
    .collections-container {

    grid-template-columns: 1fr 1fr;

}
  }
</style>

{% schema %}
{
  "name": "Explore Collections",
  "settings": [
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    }
  ],
  "blocks": [
    {
      "type": "block",
      "name": "Collection Block",
      "settings": [
        {
          "type": "collection",
          "id": "collection",
          "label": "Select Collection"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Collections",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}