3 images in a row (not products) on Brooklyn

Solved
Highlighted
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

0 Likes
Highlighted
Shopify Staff
Shopify Staff
444 48 98

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="https://screenshot.click/20-02-6zs61-7nk9j.png" alt="Snow" style="width:100%">
 </div>
</div>

* Replace the URL 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

2 Likes
Highlighted
New Member
3 0 0

You are awesome, Dirk


0 Likes
Highlighted
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

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
444 48 98

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

1 Like
Highlighted
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? 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
444 48 98

@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

1 Like
Highlighted
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 

0 Likes
Highlighted
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!

1 Like
Highlighted
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!

0 Likes