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

Store Design
,

Topic summary

Goal: Create three clickable image “blocks” that each link to different pages, displayed side-by-side on desktop and stacked on mobile. No confirmation from the original poster yet.

Two approaches offered:

  • Custom coding a new section: Add a custom section and adapt base HTML/CSS to match the theme. Example styles show a side-by-side layout with full-width, auto-height images, intended to be made dynamic rather than static. Offer made to implement the changes if needed.
  • Using the theme editor: Navigate to Online Store → Themes → Customize, add the necessary blocks, and save. Screenshots are provided to illustrate where and how to add blocks.

Notes:

  • The custom code is a starting point and must be edited to fit the specific theme for dynamic content and responsiveness.
  • Images/screenshots are central to understand the theme-editor method.

Status: No final solution selected; discussion remains open with two viable implementation paths.

Summarized with AI on December 29. AI used: gpt-5.
1

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!

2

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.


  
  
  


.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

3

Hi @Greggy55 ,

You can follow these steps:

  • Go to Online Store → Themes → Customize

  • Add blocks you need like below → Save

view (13).png
view (13).png1876×1003 204 KB

view (14).png
view (14).png1876×1007 162 KB

Hope our solutions help you!