How to create floating product images on homepage without text?

Hi there !

I’ve been working on my website lately - I’m trying to find a way to have some of the products on the homepage with no pricetags, description or any textual elements - just small ‘floating’ clickable images that would send to the product pages. one of my inspiration is spencer badu website (spencerbadu.com), second section.

any ideas of what theme I should use to get this kind of result (been using broadcast, but I can switch) ? Or if this require some sort of coding ?

thanks a lot

Hey there, happy to help! You can actually do this with any theme that you like, but you are correct in that this will require some custom coding.

What we can do is create a feature, where you can have an image picker on your website that links to the specific product you please. I’ve created similar features in the past before if you have any questions.

1 Like

Hi,

As @Zqdo mentioned, you sure can use it on any theme you like by simply tweaking a code a little.

First, you will need to assign those products a tag or a metafield we will use later to identify those products.

Then, assign all these products to an automated collection & display it in your homepage.

Go to Online Store → Themes → Edit Code and find product-grid-item.liquid. It can be called differently on some themes, but the idea is that you get the file that is responsible for showing product grid, just like on Featured Collections, for example.

All you have to do now is to locate a lines of code that are responsible for displaying price, titles and everything else except for images, and wrap them in between those lines:

{% unless template == 'index' and product.tags contains 'your_unique_tag' %}
...
...
...
{% endunless %}

This is one way of doing it. Another way would be to create a brand new section for this, but you better hire someone to do so.

1 Like

Thank you very much for your time !