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

[summersrain]

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  

{% 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>

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

<style>
.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%;
}
</style>

[Himanshu7]

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.