Custom Icons in Product Information Metafield

[cielle-studio]

I’m working on a coffee company’s website, and I’d like to have custom icons show up in the Product Information to show the roast level. I see one example of this working in a Youtube video and received a response as to how he did it, but I’m not sure how to apply what he said, or if that solution will even work for our scenario.

This site uses the Release theme.

This image shows the way the Roast Level currently shows up with the metafield value “2”. To the right is how I’d like it to show up with a custom image/icon of the Roast Level.

Here’s a screenshot from the Youtube video I mentioned as well as the response I received:

Can anyone provide me with a step-by-step to accomplish this? Thank you!

[EBOOST]

Hi @cielle-studio ,

Release theme is not free theme. So I am not sure their structure. So I will help to guide you do it with free theme.

1. Create a metafied. Roast Level → name space: custom, key: roast_level

2. Go to Admin → product → add data for this field

3. Go to Store Online-> theme → edit code

4. Sections/main-product.liquid

5. In the {% schema %} add 2 options below ( 1 icon for inactive and 1 for active):

{
      "type": "image_picker",
      "id": "icon-roast-level",
      "label": "Roast Level Icon"
    },
    {
      "type": "image_picker",
      "id": "icon-roast-level-active",
      "label": "Roast Level Active Icon"
    },

6. Add code below after title:

{%  if product.metafields.custom.roast_level %}
                {% for i in (1..5) %}
                {%  if i <= product.metafields.custom.roast_level %}
                  {%  if section.settings.icon-roast-level %}
                    
                  {%  endif %} 
                {%  else  %}  
                  {%  if section.settings.icon-roast-level %}
                    
                  {%  endif %} 
                {%  endif %} 
                {%  endfor %}
              {%  endif %}

7. Go to Store Online-> theme → customize → add icons

8. Result

[cielle-studio]

Hi! Thank you for this tutorial! I got to step 6, but there is no <div class=”product__title”… in my theme’s code. Is there another spot I should look for to place this code? Thank you!

[cielle-studio]

Hi @EBOOST I’m finally picking this back up. Please see my reply above. Here are screenshots of what it looks like in the customizer. (I haven’t uploaded the icons yet) Let me know if it would be helpful to send screenshots or a visual of the existing main-product.liquid code.