Happy 80th Independence Day 🇮🇳

image

image

Tags: Liquid Codes, image · 08 Aug 2026

Page: Homepage

Snippet Code

<style>
    .shopify-section--logo-list .section-spacing.color-scheme.color-scheme--scheme-2.color-scheme--bg-54922f2e920ba8346f6dc0fba343d673.bordered-section {
        background-image: url(https://cdn.shopify.com/s/files/1/0768/6943/5636/files/new_color-bg.webp?v=1774863390) !important;
        background-position: bottom;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .shopify-section:not(:first-child) .bordered-section {
        border-block-start-width: 1px;
    }

    .section-spacing {
        padding-block-start: 64px;
        padding-block-end: 64px;
    }

    .container--xl {
        --container-max-width: 1360px;
    }

    .section-stack {
        gap: 48px;
        grid-auto-columns: minmax(0, 1fr);
        display: grid;
    }

    .container .section-header {
        margin-inline: 0;
    }

    .justify-self-center {
        justify-self: center;
    }

    .text-center {
        text-align: center;
    }

    .section-header {
        max-width: min(var(680px), 100%);
    }

    .prose {
        overflow-wrap: anywhere;
    }

    .prose :last-child {
        margin-block-end: 0 !important;
    }

    .prose :first-child {
        margin-block-start: 0 !important;
    }

    .prose .h2 {
        font-size: 28px;
        font-family: "Instrument Sans", sans-serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 5.04px;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .scroll-area {
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        overflow: auto hidden;
    }

    .logo-list {
        grid: auto / repeat(5, minmax(0, 250px));
        justify-content: safe center;
        gap: 0px;
        display: grid;
    }

    .logo-list__item {
        place-items: center;
        display: grid;
    }

    .constrained-image {
        max-width: 100%;
    }

    @media screen and (min-width: 700px) {
        .sm:unbleed {
            margin-inline: 0;
            padding-inline: 0;
            scroll-padding-inline: 0;
        }

        .logo-list__item {
            padding: 32px 24px;
        }

        .constrained-image {
            width: 250px;
        }
    }

    @media screen and (min-width: 1000px) {
        #shopify-section-template--18402863513766__logo_list_VAT3rw {
            --logo-list-grid: auto / repeat(5, minmax(0, 250px));
        }
    }

    @media screen and (min-width: 1150px) {
        .prose .h2 {
            line-height: 1.4;
        }
    }

    @media screen and (max-width: 768px) {
        #shopify-section-template--18402863513766__logo_list_VAT3rw h2.h2 {
            font-size: 17px;
        }

        #shopify-section-template--18402863513766__logo_list_VAT3rw .logo-list__item img {
            width: 100px !important;
            max-width: 100px;
        }

        .section-stack {
            gap: 36px;
            grid-auto-columns: minmax(0, 1fr);
            display: grid;
        }

        .logo-list {
            grid: auto / auto-flow max-content;
        }

        .logo-list__item {
            padding: 20px;
        }
    }
</style>

<section id="shopify-section-template--18402863513766__logo_list_VAT3rw"
    class="shopify-section shopify-section--logo-list">
    <div
        class="section-spacing color-scheme color-scheme--scheme-2 color-scheme--bg-54922f2e920ba8346f6dc0fba343d673 bordered-section">
        <div class="container container--xl">
            <div class="section-stack">
                <div class="section-header justify-self-center text-center">
                    <div class="prose">
                        <h2 class="h2">Available Exclusively At</h2>
                    </div>
                </div>
                <div class="logo-list scroll-area bleed sm:unbleed">
                    <div class="logo-list__item" style="--border-color: var(--text-color) / 0.15;">
                        <img src="//zebeinindia.com/cdn/shop/files/kaarimarket.png?v=1749792504&width=300" alt=""
                            srcset="//zebeinindia.com/cdn/shop/files/kaarimarket.png?v=1749792504&width=250 250w, //zebeinindia.com/cdn/shop/files/kaarimarket.png?v=1749792504&width=300 300w"
                            width="300" height="50" loading="lazy" style="--image-max-width: 250px" sizes="250px"
                            class="constrained-image">
                    </div>
                    <div class="logo-list__item" style="--border-color: var(--text-color) / 0.15;">
                        <img src="//zebeinindia.com/cdn/shop/files/Jaypore.png?v=1749792522&width=280" alt=""
                            srcset="//zebeinindia.com/cdn/shop/files/Jaypore.png?v=1749792522&width=150 150w, //zebeinindia.com/cdn/shop/files/Jaypore.png?v=1749792522&width=280 280w"
                            width="280" height="60" loading="lazy" style="--image-max-width: 150px" sizes="150px"
                            class="constrained-image">
                    </div>
                    <div class="logo-list__item" style="--border-color: var(--text-color) / 0.15;">
                        <img src="//zebeinindia.com/cdn/shop/files/logo402x-20.webp?v=1750060988&width=474" alt=""
                            srcset="//zebeinindia.com/cdn/shop/files/logo402x-20.webp?v=1750060988&width=170 170w, //zebeinindia.com/cdn/shop/files/logo402x-20.webp?v=1750060988&width=340 340w"
                            width="474" height="297" loading="lazy" style="--image-max-width: 170px" sizes="170px"
                            class="constrained-image">
                    </div>
                    <div class="logo-list__item" style="--border-color: var(--text-color) / 0.15;">
                        <img src="//zebeinindia.com/cdn/shop/files/nykaa.png?v=1749792484&width=340" alt=""
                            srcset="//zebeinindia.com/cdn/shop/files/nykaa.png?v=1749792484&width=170 170w, //zebeinindia.com/cdn/shop/files/nykaa.png?v=1749792484&width=340 340w"
                            width="340" height="120" loading="lazy" style="--image-max-width: 170px" sizes="170px"
                            class="constrained-image">
                    </div>
                    <div class="logo-list__item" style="--border-color: var(--text-color) / 0.15;">
                        <img src="//zebeinindia.com/cdn/shop/files/amala.png?v=1749792463&width=310" alt=""
                            srcset="//zebeinindia.com/cdn/shop/files/amala.png?v=1749792463&width=150 150w, //zebeinindia.com/cdn/shop/files/amala.png?v=1749792463&width=300 300w"
                            width="310" height="240" loading="lazy" style="--image-max-width: 150px" sizes="150px"
                            class="constrained-image">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Instructions

Heyy Guys 👋
Watch the video below to learn how to Import these Codes into your Shopify Ecommerce Store!

Complete Video Tutorial: