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

Greggy55
Excursionist
26 0 2

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
994 124 188

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! ❤️


BSSTech-Venture
Shopify Expert
421 103 117

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development