Why isn't the slide bar working with dynamic metafield data in my code?

Shopify Partner
2 0 0

Hi, i have been trying debig the code 
the goal is ti have a slide bar for fit accordding to metafield data , i have metafield options as 25%,50%,100% as indicator  and using this code but its not working 

however if i debug and fecth just data of product it does

trying to  achieve this dynamically, it works if it input data manually  Screenshot 2024-04-11 041131.png

{% assign sizefit_value = product.metafields.custom.sizefit %}
<div class="size-guide-container">
<span class="guide-title">Fitment Guide</span>

<div class="guide-bar-bg">
<div class="guide-bar-fill" style="width: {{ sizefit_value}};"></div>

<div class="guide-labels">
<span>Fits Small</span>
<span>True to Size</span>

.size-guide-container {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 32px;
margin-bottom: 12px;
width: 100%;

.guide-title {
font-size: 1rem;
font-weight: 800;

.guide-bar-bg {
width: 100%;
background-color: #A0AEC0;
border-radius: 8px;
height: 8px;
position: relative;

.guide-bar-fill {
display: block !important;
height: 8px;
background-image: linear-gradient(to right, #9F7AEA, #7B3ED8);
border-radius: 8px;
position: absolute;
top: 0;
left: 0;

.guide-labels {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
font-weight: 700;
width: 100%;


Reply 1 (1)

Shopify Expert
14 0 0

It can be done dynamically by creating a CSV file with all the product-ids and sizes. Using the metafield post API we can add them to the size fit.