Shopify themes, liquid, logos, and UX
Hello community,
We wanted to add a "best seller" badge to a specific product variant. We did it, we know it works static, but I can't move my head around the for loops.
So, shopify creates the front-end variants using the following piece of code:
{%- for option in product.options_with_values -%}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%- endfor -%}
After the for is ended, we want to take ONE input (if input.value= 18 x 24 -> rewrite label WITH our div inside)
We want to add a div within the <label>, in order to attach the "best seller" text right into it
The result should be the following:
We don't want to add another variant, just take the one 'liquid for' generated and rewrite the label inside it.
Or, more simple than that, if the label value = 18 x 24 -> rewrite the label with our div inside
We are 100% this should be very easy to accomplish, but we are beginners in Liquid. I hope I explained very detailed and I hope you understood
Thanks in advance.
Solved! Go to the solution
This is an accepted solution.
Hey guys. I did it.
I am pasting it here in case anyone wants to use it:
This is an accepted solution.
Hey guys. I did it.
I am pasting it here in case anyone wants to use it:
User | RANK |
---|---|
68 | |
65 | |
63 | |
53 | |
47 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023