How to add 4 images in a single row of multirow

[NOT1]

Like this 



Thanks in advance : )

[BSSCommerce-HDL · Accepted solution]

@NOT1, Can you kindly share the details of your problem with us? We will check it and suggest you a solution if possible.

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

[BSSCommerce-HDL · Accepted solution]

@NOT1, Are you here?

[BSSCommerce-HDL · Accepted solution]

@NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
.slider-mobile-gutter .multicolumn-list {
    display: flex !important;
    flex-wrap: wrap;
    row-gap: 10px !important;
    column-gap: 10px !important;
}

.multicolumn-list .multicolumn-list__item.grid__item {
   max-width: calc(50% - 5px) !important; 
}

.multicolumn-list .multicolumn-card__info {
    width: 100% !important;
}

}
</style>

Hope this help you 😍

[NOT1 · Accepted solution]

I wanted for this one not that like on one row I want to add 4 images like this 

 

[BSSCommerce-HDL · Accepted solution]

@NOT1, I think design it as multicolumn image for mobile only

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 768px) {
    #shopify-section-template--23255317348648__multirow_TfBf9H .image-with-text__text-item.grid__item {
        top: 0 !important;
    }
    #shopify-section-template--23255317348648__multirow_TfBf9H .image-with-text__media-item.image-with-text__media-item--medium.image-with-text__media-item--middle.grid__item {
       display: none !important;
    }
}
@media only screen and (min-width: 769px) {
   #shopify-section-template--23255317348648__multicolumn_F3QPBf .multicolumn {
   display: none !important;
}
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let image_lists = ["your_link_img", "your_link_img", "your_link_img"];
let image_with_text_list = document.querySelector('.section-template--23255317348648__multirow_TfBf9H-padding .image-with-text__media-item')
if(image_with_text_list) {
   image_lists.forEach((element) => {
      image_with_text_list.insertAdjacentHTML('beforeend', `<div class="image-with-text__media image-with-text__media--medium gradient color-scheme-1 global-media-settings media">
         <img src="${element}" alt="">
      </div>`)
   })
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (min-width: 768px) {
  .multirow  .image-with-text:not(.collapse-corners,.image-with-text--overlap) .image-with-text__media-item {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    z-index: 2;
  }
 
  .multirow .image-with-text__media.image-with-text__media--medium.gradient.global-media-settings.media {
    width: calc(50% - 10px) !important;
    height: 300px !important;
    min-height: unset !important;
  }
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let link_images = ["link1", "link2", "link3", "link4"];
let multirow_images = document.querySelectorAll('.section-template--23255317348648__multirow_TfBf9H-padding .image-with-text__media-item .global-media-settings');
if(multirow_images.length > 0 && link_images.length > 0) {
   for(let i = 0; i < link_images.length; i++) {
     multirow_images[i].insertAdjacentHTML('beforeend', `<a href="${link_images[i]}"></a>`)
   }
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Replace old code to this new code: 

<script>
let link_images = [
  {
    link: "link 1",
    title: "test 1"
  },
  {
    link: "link 2",
    title: "test 2"
  },
  {
    link: "link 3",
    title: "test 3"
  },
  {
    link: "link 4",
    title: "test 4"
  }
  ];
let multirow_images = document.querySelectorAll('.section-template--23255317348648__multirow_TfBf9H-padding .image-with-text__media-item .global-media-settings');
if(multirow_images.length > 0 && link_images.length > 0) {
   for(let i = 0; i < link_images.length; i++) {
     multirow_images[i].insertAdjacentHTML('beforeend', `<a class="link-image-multirow" href="${link_images[i].link}"><h3 class="title-image-multirow">${link_images[i].title}</h3></a>`)
   }
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css

Step 3: Insert this code: 

h3.title-image-multirow {
    position: absolute;
    bottom: 0;
    left: 10px;
    color: #ffff;
}

Hope this can help you 😍

[parth_ghelani]

Hello @NOT1 

Can you please describe more about it that how it goes on desktop and how in medium screen ?

To achieve this, you need to make changes in code so that it shows in output.

If you are able to make code, then it will be fine otherwise you need to take help from an expert or experienced developer who can fix it...

[NOT1]

For mobile I want like this 

FOr desktop :

[parth_ghelani]

Is the tiles are separated or images in single frame ?

[NOT1]

separated 

[BSSCommerce-HDL · Accepted solution]

@NOT1, Can you kindly share the details of your problem with us? We will check it and suggest you a solution if possible.

[NOT1]

Normally on my dawn theme its only 1 image per row but i want to add 4 images per row (Of Multirow section) like these images 

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

[BSSCommerce-HDL]

@NOT1, It's like this but with 4 multicolunms above image

[NOT1]

@BSSCommerce-HDL Are you there ? Can I provide you the website url which I want to make it like ? and my website collab code?

[BSSCommerce-HDL · Accepted solution]

@NOT1, Are you here?

[NOT1]

Yes sorry I am here Yes i want like this 

[BSSCommerce-HDL · Accepted solution]

@NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
.slider-mobile-gutter .multicolumn-list {
    display: flex !important;
    flex-wrap: wrap;
    row-gap: 10px !important;
    column-gap: 10px !important;
}

.multicolumn-list .multicolumn-list__item.grid__item {
   max-width: calc(50% - 5px) !important; 
}

.multicolumn-list .multicolumn-card__info {
    width: 100% !important;
}

}
</style>

Hope this help you 😍

[NOT1 · Accepted solution]

I wanted for this one not that like on one row I want to add 4 images like this 

 

[BSSCommerce-HDL · Accepted solution]

@NOT1, I think design it as multicolumn image for mobile only

[NOT1]

I didnt get it 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 768px) {
    #shopify-section-template--23255317348648__multirow_TfBf9H .image-with-text__text-item.grid__item {
        top: 0 !important;
    }
    #shopify-section-template--23255317348648__multirow_TfBf9H .image-with-text__media-item.image-with-text__media-item--medium.image-with-text__media-item--middle.grid__item {
       display: none !important;
    }
}
@media only screen and (min-width: 769px) {
   #shopify-section-template--23255317348648__multicolumn_F3QPBf .multicolumn {
   display: none !important;
}
}
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[NOT1]

How can I add links??

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let link_images = ["link1", "link2", "link3", "link4"];
let multirow_images = document.querySelectorAll('.section-template--23255317348648__multirow_TfBf9H-padding .image-with-text__media-item .global-media-settings');
if(multirow_images.length > 0 && link_images.length > 0) {
   for(let i = 0; i < link_images.length; i++) {
     multirow_images[i].insertAdjacentHTML('beforeend', `<a href="${link_images[i]}"></a>`)
   }
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[NOT1]

How can i add text in image?

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, Replace old code to this new code: 

<script>
let link_images = [
  {
    link: "link 1",
    title: "test 1"
  },
  {
    link: "link 2",
    title: "test 2"
  },
  {
    link: "link 3",
    title: "test 3"
  },
  {
    link: "link 4",
    title: "test 4"
  }
  ];
let multirow_images = document.querySelectorAll('.section-template--23255317348648__multirow_TfBf9H-padding .image-with-text__media-item .global-media-settings');
if(multirow_images.length > 0 && link_images.length > 0) {
   for(let i = 0; i < link_images.length; i++) {
     multirow_images[i].insertAdjacentHTML('beforeend', `<a class="link-image-multirow" href="${link_images[i].link}"><h3 class="title-image-multirow">${link_images[i].title}</h3></a>`)
   }
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

[NOT1]

How can i make the text white

[BSSCommerce-HDL · Accepted solution]

@NOT1, Do you want like this? 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css

Step 3: Insert this code: 

h3.title-image-multirow {
    position: absolute;
    bottom: 0;
    left: 10px;
    color: #ffff;
}

Hope this can help you 😍

[NOT1]

Edit text. Like it gets mixed with the pic color 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css

Step 3: Insert this code: 

a.link-image-multirow::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #00000029;
}

Here is result: 

Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </body> tag:

<script>
let image_lists = ["your_link_img", "your_link_img", "your_link_img"];
let image_with_text_list = document.querySelector('.section-template--23255317348648__multirow_TfBf9H-padding .image-with-text__media-item')
if(image_with_text_list) {
   image_lists.forEach((element) => {
      image_with_text_list.insertAdjacentHTML('beforeend', `<div class="image-with-text__media image-with-text__media--medium gradient color-scheme-1 global-media-settings media">
         <img src="${element}" alt="">
      </div>`)
   })
}
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (min-width: 768px) {
  .multirow  .image-with-text:not(.collapse-corners,.image-with-text--overlap) .image-with-text__media-item {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    z-index: 2;
  }
 
  .multirow .image-with-text__media.image-with-text__media--medium.gradient.global-media-settings.media {
    width: calc(50% - 10px) !important;
    height: 300px !important;
    min-height: unset !important;
  }
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍