This issue is regarding Trust Badges, when implementing in Grid Template

Store Design
, , ,
1

I’m adding a custom section in the /section folder “trust-badges.liquid”. When I typed the code in HTML and CSS, everything was perfect and working fine. The issue started when I converted it into ‘.liquid’ file by adding {% for %} loop to render each block (i.e badge). Take a look at the code. I have also tagged the images as well. Feel free to ask anything you need to inspect further. Thanks in advance..!

When the code was first written in HTML & CSS:

Saradh_Chandra_0-1721714926830.png

When added to shopify

Saradh_Chandra_1-1721714926873.png
Saradh_Chandra_1-1721714926873.png398×100 13 KB

Saradh_Chandra_2-1721714926827.png
Saradh_Chandra_2-1721714926827.png400×289 58.3 KB

Saradh_Chandra_3-1721714926831.png


{% schema %}
{
    "name": "Trust Badges",
    "tag": "section",
    "class": "trust-badges",
    "presets": [
        {
            "name": "Custom Trust Badges"
        }
    ],
    "blocks": [
        {
            "type": "trust-badge",
            "name": "Trust Badge",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "badge-image",
                    "label": "Badge Image"
                },
                {
                    "type": "text",
                    "id": "badge-title",
                    "label": "Badge Title",
                    "default": "Title"
                },
                {
                    "type": "textarea",
                    "id": "badge-context",
                    "label": "Badge Context"
                }
            ]
        }
    ],
    "settings": []
}
{% endschema %}
2

Hello @Saradh_Chandra , Kindly provide me with the URL of your store so that I can access it.

1 Like
3

Here’s the link: [ https://da094b-2d.myshopify.com/ ]
Use the password: [ fiages ]

4

Hello @Saradh_Chandra , Kindly locate the code provided below and make the necessary modifications as indicated. Additionally, refer to the screenshot for further guidance.

.saradh-trust-badges .trust-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

card_alignment.png
card_alignment.png1330×575 177 KB

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

1 Like
5

Even I did the same using flex but, I wanted to achieve this with the grid to have more control over the individual badge width and enable the scroll option without warping the badges.

6

@Huptech-Web have any solution for this issue?? Thanks for the above insights.

7

@Saradh_Chandra , The grid layout does not allow for this, so you should exclusively use the flex property in order to achieve the desired result. You can accomplish this task by simply making a few modifications to the code as demonstrated.

Attached is a screenshot to provide a clearer explanation.

.saradh-trust-badges {
    overflow-x: scroll;
    width: 100%;
}

card-slider.png
card-slider.png1313×559 156 KB

If this solution is helpful, please consider liking and accepting it.
S.P

8

@Huptech-Web Thanks for the assist.

9

@Saradh_Chandra , I am pleased to assist you. Please do not hesitate to contact us if you have any further inquiries.