Custom icons with metafields - display on product/collection page - Halothemes

Store Design
, ,

Topic summary

A user wants to display custom product icons (varying by material, size, etc.) on their product pages beneath the product title using metafields/metaobjects instead of apps.

Setup attempted:

  • Created metafields with file/image references
  • Attempted to add custom blocks linked to metafields
  • Icons aren’t displaying and can’t be positioned as desired

Current status:

  • A developer confirmed the metafield setup alone isn’t sufficient
  • Custom Liquid code is needed to render the icons, along with HTML/CSS styling
  • Two implementation options suggested: editing the product template directly in the code editor, or adding a custom Liquid section via the theme customizer

Next steps:

  • The developer requested details about the metafield custom value structure and collaborator access to implement the solution
  • Discussion remains open, awaiting technical implementation
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I would like to display custom icons for my products. Each product might have different icons depending on the material, size etc, so I thought the best way to set this up might be with Metaobjects/Metafields - this is how I set up my metafield:

Screenshot 2025-02-12 at 10.03.58.png
Screenshot 2025-02-12 at 10.03.58.png439×280 21.1 KB

Screenshot 2025-02-12 at 10.02.54.png
Screenshot 2025-02-12 at 10.02.54.png586×154 13.4 KB

When I go to add a custom block and link it to the metafield it doesn’t pull the icon through, and I’m unable to add it to the area that I want on my product (under the product title) so I’m guessing I need to create a custom section?

I’d like to avoid using an app for this if possible as most of them don’t allow the use of custom icons, I also like how I can just choose the relevant icons at the same time as uploading a product.

Where am I going wrong? Please help!

2

You have selected it but you will have to add code to display the icons using liquid and structure and style t with html and css. You can either do it from the code editor itself on the product template, or from the customizer adding a custom liquid section and then the same steps follow.

Please reach out via personal links below for a convenient conversation and collaboration.

Best

Shadab

3

What liquid should I add to the template please?

4

Please share the metafield custom value and I am sure you are using files to add images. If you can share collaborator access it would be just easier to check and implement