Shopify themes, liquid, logos, and UX
Hello everyone,
I want to create say 3 blocks like this :
Block1 | Block2| Block3|
When I say block , it will be an image that you can click on and then when you click on it , you will go to a specific page I have created. Each image will take you to a different specific page.
How would I do this? I want to have space for 3 images side by side or top to bottom (if viewed on mobile) and when you click the image you will then go to a specific page. (Just explaining it in other words).
Thanks for any help!
Hi @Greggy55 This will be done through the custom coding, you need to create a different section with the help of custom coding so that you can use that section code in your customize block.
If you need I can provide you the base code but you need to edit the base code according to your theme files so that it works fine at your end as well.
Here is the HTML and Css code, but I will prefer you to edit it so it will work dynamically as right now the code is just a static code.
<div class="image-blocks">
<a href="/page-1"><img src="image1.jpg" alt="Block 1"></a>
<a href="/page-2"><img src="image2.jpg" alt="Block 2"></a>
<a href="/page-3"><img src="image3.jpg" alt="Block 3"></a>
</div>
.image-blocks {
display: flex;
}
.image-blocks a {
flex: 1;
margin: 0 10px; /* Adjust margin as needed */
}
.image-blocks img {
width: 100%;
height: auto;
}
Note: You need to edit the code according to your needs and theme file code so that it will work well with your theme.
If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Best Regards
Sahil
- Your
Hi @Greggy55 ,
You can follow these steps:
- Go to Online Store -> Themes -> Customize
- Add blocks you need like below -> Save
Hope our solutions help you!
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024