3 images in a row (not products) on Brooklyn

Solved
MarcAstbury
New Member
3 0 0

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

Accepted Solution (1)

Accepted Solutions
Dirk
Shopify Staff
Shopify Staff
1590 195 356

This is an 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: 

 

20-02-0npa0-my14m

 

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.

 

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 32 (32)
Dirk
Shopify Staff
Shopify Staff
1590 195 356

This is an 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: 

 

20-02-0npa0-my14m

 

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.

 

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

MarcAstbury
New Member
3 0 0

You are awesome, Dirk


MoazMohammed
Tourist
10 0 1

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. 

Annotation 2020-04-21 184219.jpg

 

Dirk
Shopify Staff
Shopify Staff
1590 195 356

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!

 

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

MoazMohammed
Tourist
10 0 1

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
Shopify Staff
Shopify Staff
1590 195 356

@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.

 

 

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

TriumphantNails
New Member
1 0 0

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
New Member
2 0 1

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
Excursionist
23 0 2

@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
Excursionist
23 0 2
SoisEcolo
New Member
15 0 0

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

Thank you!

 

ihaterattles
Excursionist
23 0 2
Use canva to make an image with text below it and upload that to the
website I showed you 🙂
SoisEcolo
New Member
15 0 0
OK Thank you very much! Have a nice day
ihaterattles
Excursionist
23 0 2
Glad I could help! Pay it forward 🙂
joyy_xo
New Member
1 0 0

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
New Member
2 0 0

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

Dirk
Shopify Staff
Shopify Staff
1590 195 356

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>

 

 

 

 

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

hhygienics
New Member
2 0 0
Amazing thank you so much!!!
happycamper
Excursionist
16 0 2

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