Variant Picker on product page - Beyond theme

[NativeHealth_R]

The variant picker block isnt available on the product page for the beyond theme

Articles suggest adding code to a product-template.liquid file which doesnt exist for this theme

Can I have a radio button styled variant picker on the product page as seen in this site - https://thegoodbug.com/products/good-to-glow?variant=43746771894497

[webwondersco]

@NativeHealth_R , hope you are doing well.

Do you have knowledge of HTML,CSS, JS and liquid coding? if yes then you can manage easily.

[NativeHealth_R]

Yes, i do, its a shopify 2.0 site that i customised extensively

Do let me know how to implement the variant picker

[MaxDesign · Accepted solution]

It this case, you can replicate Dawn example as a base example.

You can download the latest Dawn theme, and you will find this piece of code in main-product.liquid:

{% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}

Everything you need is in product-variant-picker.liquid file and product-variant-options.liquid. The javascript used to make this work is in global.js (search for VariantSelects and VariantRadios classes).

This is very far from a copy/paste job, but this is a nice boilerplate to get an idea how you can do your variant picker.

[NativeHealth_R]

I am currently redesigning the variant picker available in the theme to display more than just the option value, the code for this component is in radios.liquid.

Need to display information like price, compare at price.

The code for the label is as follows:

<label
class="radios--value-button"
data-item="button"
for="{{ radios_name }}-{{ value | downcase | remove: ' ' }}"
>
<div>{{ value | escape }}</div>
</label>

I need to access variant information 

{
"product": {
"id": 8388267802905,
"title": "Hair Essential",
"body_html": "<meta charset=\"utf-8\"><meta charset=\"utf-8\"><span data-mce-fragment=\"1\">Doctor-designed Hair Essential addresses the root cause of hair loss starting with replenishment of nutritional deficiencies, reduction of scalp inflammation and protecting and boosting hair follicle strength. </span><br>",
"vendor": "stronger hair",
"product_type": "Capsules",
"created_at": "2023-06-15T15:41:09+05:30",
"handle": "hair-essential",
"updated_at": "2023-06-28T15:21:40+05:30",
"published_at": "2023-06-15T15:41:02+05:30",
"template_suffix": null,
"published_scope": "global",
"tags": "",
"variants": [
{
"id": 45456972120345,
"product_id": 8388267802905,
"title": "1 Month",
"price": "1699.00",
"sku": "HAIR001",
"position": 1,
"compare_at_price": "1999.00",
"fulfillment_service": "manual",
"inventory_management": "shopify",
"option1": "1 Month",
"option2": null,
"option3": null,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-28T12:59:30+05:30",
"taxable": true,
"barcode": "",
"grams": 300,
"image_id": null,
"weight": 300,
"weight_unit": "g",
"requires_shipping": true
},
{
"id": 45456972153113,
"product_id": 8388267802905,
"title": "3 Month",
"price": "4497.00",
"sku": "",
"position": 2,
"compare_at_price": "",
"fulfillment_service": "manual",
"inventory_management": "shopify",
"option1": "3 Month",
"option2": null,
"option3": null,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-28T12:59:30+05:30",
"taxable": true,
"barcode": "",
"grams": 1000,
"image_id": 41619470156057,
"weight": 1,
"weight_unit": "kg",
"requires_shipping": true
},
{
"id": 45556948238617,
"product_id": 8388267802905,
"title": "6 Month",
"price": "1699.00",
"sku": "",
"position": 3,
"compare_at_price": "1999.00",
"fulfillment_service": "manual",
"inventory_management": "shopify",
"option1": "6 Month",
"option2": null,
"option3": null,
"created_at": "2023-06-28T12:59:56+05:30",
"updated_at": "2023-06-28T12:59:56+05:30",
"taxable": true,
"barcode": "",
"grams": 300,
"image_id": null,
"weight": 300,
"weight_unit": "g",
"requires_shipping": true
}
],
"options": [
{
"id": 10629394170137,
"product_id": 8388267802905,
"name": "Options",
"position": 1,
"values": [
"1 Month",
"3 Month",
"6 Month"
]
}
],
"images": [
{
"id": 41619470057753,
"product_id": 8388267802905,
"position": 1,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-15T15:41:09+05:30",
"alt": null,
"width": 900,
"height": 900,
"src": "https://cdn.shopify.com/s/files/1/0776/9561/5257/products/Hair_Essential.webp?v=1686823869",
"variant_ids": []
},
{
"id": 41619470090521,
"product_id": 8388267802905,
"position": 2,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-15T15:41:09+05:30",
"alt": null,
"width": 1080,
"height": 1080,
"src": "https://cdn.shopify.com/s/files/1/0776/9561/5257/products/HAIRESSENTIALSUPPLEMENT.png?v=1686823869",
"variant_ids": []
},
{
"id": 41619470123289,
"product_id": 8388267802905,
"position": 3,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-15T15:41:09+05:30",
"alt": null,
"width": 1080,
"height": 1080,
"src": "https://cdn.shopify.com/s/files/1/0776/9561/5257/products/Untitleddesign_25.png?v=1686823869",
"variant_ids": []
},
{
"id": 41619470156057,
"product_id": 8388267802905,
"position": 4,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-15T15:41:09+05:30",
"alt": null,
"width": 1080,
"height": 1080,
"src": "https://cdn.shopify.com/s/files/1/0776/9561/5257/products/Untitleddesign_26_dda8657b-7bf0-4e86-b1b6-...",
"variant_ids": [
45456972153113
]
}
],
"image": {
"id": 41619470057753,
"product_id": 8388267802905,
"position": 1,
"created_at": "2023-06-15T15:41:09+05:30",
"updated_at": "2023-06-15T15:41:09+05:30",
"alt": null,
"width": 900,
"height": 900,
"src": "https://cdn.shopify.com/s/files/1/0776/9561/5257/products/Hair_Essential.webp?v=1686823869",
"variant_ids": []
}
}
}