Issue: Variant radio buttons in the Featured Product section at the bottom of the collection page display differently than elsewhere on the site; the goal is a “pill” style.
Context: Shopify Dawn theme on the collections/produkte page. Visual examples provided via screenshots and live link.
Proposed fix (community guidance): Add the stylesheet for the variant picker to the Featured Product section template:
Latest update: The stylesheet line was added; the appearance changed but still does not render as pill-style buttons.
Status: Unresolved. No confirmed solution yet; the thread remains open.
Notes: Images/screen captures are central to understanding the initial and desired designs, as well as the intermediate result after the code change.
Hi there,
I don’t know why the radio buttons in the “featured product” section I just added HERE at the BOTTOM of the page are displayed differently than on the rest of my page (https://taneraskin.com/collections/produkte). Using Dawn theme.
I looks like this on the ALL PRODUCTS Page:
And I want it to look like this (goal):
What change to I have to make? Do you see an error in my code or a change I’ve made?
Best regards,
Isabelle
Now you can check!
Hi @isabellemaria , you can by floowing these steps:
{{ 'component-product-variant-picker.css' | asset_url | stylesheet_tag }}
If not, add it bellow this line of code :
{% unless section.settings.product.has_only_default_variant %}
Hope this can help you.
I added the following code:
and now it looks like this:
It’s still not showing the “pills”
