Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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
Solved! Go to the solution
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:
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
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:
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
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.
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
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?
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
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
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!
@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!
Thank you very much! It works very well for the pictures, but how do you add text below each image?
Thank you!
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?
This is so helpful! Is there a way to link the images to different pages on our website?
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
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
User | RANK |
---|---|
41 | |
37 | |
29 | |
15 | |
12 |