Is it possible to add icons link to a page on Shopify?

[mekristinern]

 

I'm using refresh theme and I can't figure out how to add these small clickable icons that will be link to a page. 

Here's my preview link:

https://9j9vhpzk4k7f28vg-60078227500.shopifypreview.com

[Asad-Mahmood · Accepted solution]

Yes, You can add clickable icons that will be link to a page. check if your theme has an option to add custom css if yes add that section and paste this code there.

Make sure to replace the links with the actual links

  <div class="icon-container">
    <a href="page1.html"><img src="icon1.png" alt="Icon 1"></a>
    <a href="page2.html"><img src="icon2.png" alt="Icon 2"></a>
    <a href="page3.html"><img src="icon3.png" alt="Icon 3"></a>
    <a href="page4.html"><img src="icon4.png" alt="Icon 4"></a>
  </div>
<style>
.icon-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.icon-container a {
  text-decoration: none;
}

.icon-container img {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/* Responsive Styling */
@media (max-width: 600px) {
  .icon-container {
    flex-wrap: wrap;
  }

  .icon-container img {
    width: 40px;
    height: 40px;
    margin: 5px;
  }
}
</style>

[mekristinern]

 thank you for taking the time to reply on my question. I tried the code but there's a prompt saying it can't be published. The theme I used has a custom css option.

[mekristinern]

I finally figured it out and the code you provided did work. I would like to ask how do I get the html code of the page that I would like to link on the icon? Thanks a lot

[Asad-Mahmood]

First look if your theme has a section named "Custom HTML" if yes add that section to your home page
and paste my code there and if your theme does not have section of named "Custom HTML" than allow me collaborator access and I will create a new sew section in your theme so that so you can add clickable icons