Happy 80th Independence Day 🇮🇳

table

table

Tags: Liquid Codes, table · 10 Aug 2026

Page: Product Pages (Optimized for Conversions)

Snippet Code

<style>
    section#shopify-section-template--24296097349947__custom_liquid_hAc6mT {
        background-color: #fffaf5;
    }

    p.font-bold.text-[14px].leading-[20px].text-content-1.desktop:text-[18px].desktop:leading-[32px] {
        font-weight: 600;
    }

    .pt-[40px] {
        padding-top: 40px;
    }

    .pb-[40px] {
        padding-bottom: 40px;
    }

    .scroll-mt-[100px] {
        scroll-margin-top: 100px;
    }

    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }

    .flex-col {
        flex-direction: column;
    }

    .flex {
        display: flex;
    }

    .text-content-1 {
        --tw-text-opacity: 1;
        color: rgb(17 23 20 / var(--tw-text-opacity));
    }

    .font-bold {
        font-weight: 700;
    }

    .bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }

    .border-dashed {
        border-style: dashed;
    }

    .border {
        border-width: 1px;
    }

    .h-fit {
        height: fit-content;
    }

    .border-categoryDivider {
        --tw-border-opacity: 1;
        border-color: rgb(222 230 232 / var(--tw-border-opacity));
    }

    .border-b {
        border-bottom-width: 1px;
    }

    .pb-[12px] {
        padding-bottom: 12px;
    }

    .border-dotted {
        border-style: dotted;
    }

    .gap-[18px] {
        gap: 18px;
    }

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

    .font-normal {
        font-weight: 400;
    }

    .flex-1 {
        flex: 1 1 0%;
    }

    .!text-content-3 {
        --tw-text-opacity: 1 !important;
        color: rgb(64 69 67/ 1) !important;
    }

    .Fw400Fs12HexA0A2A1 {
        font-family: var(--font-lato);
        font-weight: 400;
    }

    @media (min-width: 1024px) {
        .desktop:my-[50px] {
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .desktop:px-[0px] {
            padding-left: 0;
            padding-right: 0;
        }

        .desktop:max-w-[960px] {
            max-width: 960px;
        }

        .desktop:px-0 {
            padding-left: 0;
            padding-right: 0;
        }

        .desktop:gap-[8px] {
            gap: 8px;
        }

        .desktop:mb-[32px] {
            margin-bottom: 32px;
        }

        .desktop:leading-[32px] {
            line-height: 32px;
        }

        .desktop:text-[28px] {
            font-size: 28px;
        }

        .desktop:gap-[32px] {
            gap: 32px;
        }

        .desktop:items-center {
            align-items: center;
        }

        .desktop:flex-col {
            flex-direction: column;
        }

        .desktop:flex {
            display: flex;
        }

        .desktop:mt-[32px] {
            margin-top: 32px;
        }

        .desktop:justify-center {
            justify-content: center;
        }

        .desktop:mt-0 {
            margin-top: 0;
        }

        .desktop:p-[24px] {
            padding: 24px;
        }

        .desktop:rounded-[16px] {
            border-radius: 16px;
        }

        .desktop:pb-[16px] {
            padding-bottom: 16px;
        }

        .desktop:text-[18px] {
            font-size: 18px;
        }

        .desktop:mt-[16px] {
            margin-top: 16px;
        }

        .desktop:w-[100px] {
            width: 100px;
        }

        .desktop:!leading-[28px] {
            line-height: 28px !important;
        }

        .desktop:!text-[16px] {
            font-size: 16px !important;
        }
    }

    @media (max-width: 768px) {
        section#shopify-section-template--24296097349947__custom_liquid_hAc6mT {
            margin-top: 37px;
        }

        .gap-[18px] {
            gap: 18px;
        }

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

        .w-[60px] {
            width: 60px;
        }
    }
</style>

<div class="my-[30px] desktop:my-[50px] first:mt-0">
    <div style="background-color:#FFFAF5" class="pt-[40px] pb-[40px] desktop:px-[0px] scroll-mt-[100px]">
        <div class="desktop:max-w-[960px] mx-auto">
            <div class="flex flex-col gap-[4px] px-[16px] desktop:px-0 desktop:gap-[8px] mb-[24px] desktop:mb-[32px]">
                <p
                    class="text-[20px] desktop:text-[28px] leading-[24px] desktop:leading-[32px] font-bold text-content-1">
                    Suitability & Safety</p>
            </div>
            <div
                class="desktop:flex desktop:flex-col desktop:items-center desktop:gap-[32px] mt-[24px] desktop:mt-[32px]">
                <div
                    class="mt-[24px] desktop:mt-0 px-[16px] desktop:px-0 desktop:gap-[32px] desktop:flex desktop:justify-center">
                    <div style="border-color:#8F5A17"
                        class="h-fit bg-white mt-[16px] desktop:mt-0 border border-dashed rounded-[8px] py-[12px] px-[16px] desktop:p-[24px] desktop:rounded-[16px]">
                        <div class="border-b border-categoryDivider">
                            <div class="pb-[8px] desktop:pb-[16px]">
                                <p style="color:#8F5A17"
                                    class="font-bold text-[14px] leading-[20px] text-content-1 desktop:text-[18px] desktop:leading-[32px]">
                                    Usage</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Texture
                                </p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    Fluffy malai-gel like texture to fight the summer heat.</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Smell</p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    Very light herb-floral with tones of lotus & vetiver.</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Oiling</p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    The Malai already contains oils, but you can layer it with Mukhalaya for a
                                    nourishing massage.</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Sun
                                    Protection</p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    The Malai offers built-in sun protection, with the option to add extra sunscreen if
                                    needed.</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Patch Test
                                </p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    Recommended on cheeks or neck for 10 mins prior to first use.</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Skin Type
                                </p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    For all</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Pregnancy
                                </p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    Safe to use</p>
                            </div>
                        </div>
                        <div
                            class="flex gap-[18px] items-center mt-[8px] desktop:mt-[16px] border-b border-categoryDivider border-dotted pb-[12px] last:border-0 last:pb-0">
                            <div class="w-[60px] desktop:w-[100px]">
                                <p style="color:#8F5A17"
                                    class="font-normal text-sm desktop:!text-[16px] desktop:!leading-[28px] ">Kids</p>
                            </div>
                            <div class="flex-1">
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-3 desktop:!text-[16px] desktop:!leading-[28px]">
                                    Safe for use, but age-specific selection is recommended.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Instructions

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

Complete Video Tutorial: