CSS grid Image Gallery Customization In Dawn Theme

[MuneebJoiya]

I have a CSS grid made by me and I want to add a button, rich text and Heading on the grid images. But the buttons are showing just beneath the grid.

{% schema %}
{
  "name": "Grid layout",
  "settings": [],
  "blocks": [
    {
      "name": "Collage Image",
      "type": "collage_image",
      "settings": [
        {
          "type": "image_picker",
          "id": "collage_image",
          "label": "Collage Image"
        },
        {
          "type": "checkbox",
          "id": "show_button",
          "label": "Show Button"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button Text",
          "default": "Learn More"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        },
        {
          "type": "select",
          "id": "button_position",
          "label": "Button Position",
          "options": [
            {
              "value": "top-left",
              "label": "Top Left"
            },
            {
              "value": "top-right",
              "label": "Top Right"
            },
            {
              "value": "bottom-left",
              "label": "Bottom Left"
            },
            {
              "value": "bottom-right",
              "label": "Bottom Right"
            }
          ]
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "rich_text",
          "label": "Rich Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Grid Layout"
    }
  ]
}
{% endschema %}

  {% for block in section.blocks %}
      

    

        
        ## {{ block.settings.heading }}
        {{ block.settings.rich_text }}

        {% if block.settings.show_button %}
          {{ block.settings.button_text }}
        {% endif %}
      

    

  {% endfor %}

I want the grid to be like this

But mine is Like this I only want the text and button to show on top the image not beneath. And when I show the button it also takes grid area I don’t want that type of layout

[Moeed]

Hey @MuneebJoiya

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[MuneebJoiya]

https://theese-ca.myshopify.com/

Password : stiesk

[Moeed]

Hey @MuneebJoiya

I’m unable to locate any button on the website, can you please add the buttons first?

[MuneebJoiya]

Please check again I have enabled the button

[Moeed]

Hey @MuneebJoiya

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[MuneebJoiya]

But Text Remain there I also want text there

[MuneebJoiya]

And also the right grid-area a image to be fully matched like the screenshot I provided in My first Question