How to add blocks that when you click on them goes to a page?

How to add blocks that when you click on them goes to a page?

Greggy55
Excursionist
32 0 3

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!

Replies 2 (2)

sahilsharma9515
Shopify Partner
1259 163 241

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


BSSCommerce-HDL
Shopify Partner
2305 834 906

Hi @Greggy55 ,

You can follow these steps:

- Go to Online Store -> Themes -> Customize

- Add blocks you need like below -> Save

view (13).pngview (14).png

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