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

[Greggy55]

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!

[sahilsharma9515]

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

[BSSCommerce-HDL]

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!