3 images in a row (not products) on Brooklyn

[MarcAstbury]

Hey folks!

I want to add 3 images in a row on my homepage.

Right now the default options (as you know) are either image left or right with accompanying text OR a product collection.

These 3 images will explain our unique value prop and thus products will not work.

Your help would be awesome!

Marc

[Dirk · Accepted solution]

Hey, @MarcAstbury 

Thanks for reaching out. I'd be happy to show you a simple but effective way to do this. You will need to go into your theme editor and add the "Custom HTML" section to your homepage. The end result will look like the following: 

1. Add the "Custom HTML" section

2. Add 3 contents within this section (this will be for each image) and set the container width to 33% (50% if you were doing two images, 25% for 4 images, etc.)

3. Copy and paste the following code into each content column 

<div class="row">
  <div class="column">
    <img src="URLEXAMPLE" alt="Snow" style="width:100%">
 </div>
</div>

* Replace the URLEXAMPLE in this example code with the image of your choice. You can also change the alt text keyword shown in the code as well 

alt="KEYWORD OF CHOICE"

4. Save the changes in the theme editor!

Give this a shot and let me know if it works for you. If there is anything else I can help you with, please let me know.

[MarcAstbury]

You are awesome, Dirk

---

[MoazMohammed]

Hi Dirk, 

Thanks for this solution! However I'm not seeing the contained width option in Avenue theme. All I see is a place to put html content and check mark for full width. 

[Dirk]

Hey, @MoazMohammed 

Great question. Avenue is a third-party theme that isn't directly supported by Shopify, it doesn't appear that they have built-in that functionality within their custom HTML section. You would want to consider hiring a Shopify Expert to code the "Custom HTML" section within that theme to included specified container widths.

However, as a workaround, they do have a section called "Image With Text" that allows you to add images in multiple columns across one row. It also allows you to can link to a specific page for each image.

Let me know if this helps!

[MoazMohammed]

Hey @Dirk ! 

Thanks for reaching out so quickly. 

I just realized the theme is Simple and not Avenue *facepalm! 

I tried image with text in Simple and there was no option for multiple images to add. Perhaps you have another workaround? 

[Dirk]

@MoazMohammed

The Simple theme has the container width setting pre-built into the "Custom HTML" section when you edit each individual custom HTML content piece. I made a screen recording here to show that.

[TriumphantNails]

Hello,

I am trying to put the images in a row, however, the images are my personal photographs which I don't have links for. How can I use my photographs?

Thank You 

[SivaanB]

Hi Dirk,
Thanks for this! Is there anyway to keep the images in a row for mobile view? Im using it to display icons and it takes up too much space when you change device.
Thanks!

[ihaterattles]

@Dirk You're a star, man! Thank you!
Worked really well for my desktop website. Is there a way to make them appear in a row on mobile too? It takes too much space!

[ihaterattles]

@TriumphantNails You can use this website

[SoisEcolo]

Thank you very much! It works very well for the pictures, but how do you add text below each image?

Thank you!

[ihaterattles]

Use canva to make an image with text below it and upload that to the
website I showed you 🙂

[SoisEcolo]

OK Thank you very much! Have a nice day

[ihaterattles]

Glad I could help! Pay it forward 🙂

[joyy_xo]

Hello Dirk, can you give some extra help? I just saw the solution you gave to someone about adding 3 images in the row on the homepage. Just wondering if you're able to help me on how to add a link to the products in the custom html of the image?

[hhygienics]

This is so helpful! Is there a way to link the images to different pages on our website?

[Dirk]

Hey, @hhygienics

Try replacing this part code I mentioned in my original post:

    <img src="https://yourdomain.com/image.jpg" alt="Snow" style="width:100%">

To this:

<a href="https://where-you-want-to-redirect.com"> 
<img src="https://yourdomain.com/image.jpg" alt="Snow" style="width:100%">

The final code will look like the following:

<a href="https://TEST.com"> 
<img src="https://yourdomain.com/image.jpg" alt="Snow" style="width:100%">
</a>

[hhygienics]

Amazing thank you so much!!!

[happycamper]

Hello.
Sorry to bother.
This was a helpful solution.
But could you please share an answer to the mobile view question asked by 2 other users?
I would like to keep the 3 images in one single row for all devices (even if it looks quite small on mobile).

Thank you