Hi guys,
do you know if its possible to create following product attributes on a product page using metafields (see image)? If yes, which definitions do I have to use?
I want to display different attributes for each product with metafields, going from 0 (lowest) to 5 (highest). If e.g. 5, I want to display 5 filled dots.
@TillBa Yes it’s possible, use a number type and set a min and max of 1 to 5
Though you’ll want to put them in a metaobject and THAT is what is referenced in the products custom data.
This helps organize metafields so your not fighting for space in the product admin with other future metafields.
An advanced alternative is to use a JSON type metafield, useful if importing data from some other system that’s already structured.
Making that exact design is an advanced theme customization, reach out if you need services to implement it.
Hi @TillBa
This could probably be done in multiple ways, but I chose this one.
Create a Metaobject named, for example, “Custom feature”. That has a title and score.
Then create a product metafield “Custom features list”. With just one item list of reference to the metafield we just created, “Custom feature”.
For the test, add a few entries to some product
In your theme, find a main product information section file. Could be main-product.liquid, or similar and add 2 part of code. one in schema. For example after existing “custom_liquid” add a few lines for custom_feature (so just last part.
{
"type": "custom_liquid",
"name": "t:sections.custom-liquid.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
{
"type": "custom_feature",
"name": "Custom feature",
"settings": []
},
Then in code, also find custom liquid, if your theme has it. So first two lines you have and copy rest below.
{%- when 'custom_liquid' -%}
{{ block.settings.custom_liquid }}
{%- when 'custom_feature' -%}
{% if product.metafields.custom.custom_feature_list != blank %}
<div class="product-feature-list">
<ul class="feature-list">
{% for feature in product.metafields.custom.custom_feature_list.value %}
<li class="feature-item">
<span class="feature-title">{{ feature.title }}</span>
<span class="feature-score">
{% for i in (1..5) %}
{% if i <= feature.score %}
<span class="dot filled"></span>
{% else %}
<span class="dot empty"></span>
{% endif %}
{% endfor %}
</span>
</li>
{% endfor %}
</ul>
</div>
<style>
.product-feature-list {
margin: 20px 0;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
}
.feature-item:last-child {
border-bottom: none;
}
.feature-title {
font-weight: 500;
flex: 1;
}
.feature-score {
display: flex;
gap: 4px;
margin-left: 15px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.dot.filled {
background-color: #000;
}
.dot.empty {
background-color: #e5e5e5;
border: 1px solid #ccc;
}
</style>
{% endif %}
At the end, in theme editor add that Custom feature block and it should display similar like this.
Thank you very much for your quick reply. Im using Focal Theme and I do have these two files named custom liquid and main product liquid but I dont know where to add your codes. Can you help me with that?
Try in snippets/ product-info or product-form maybe.
Let’s break this down in simpler chunks:
I have read to that one should use a number type metafield with a range set from 1 to 5. This allows to dynamically display the number of filled dots based on the metafield value.
Coming to the implementation part, add the code in the snippets/product-info or snippets/product-form files (in the Focal Theme).
A developer can also help you in this regard. I hope this solves your problem.
