Shopify Direct Checkout button adding different properties into checkout

Highlighted

Hello There,

 

I have displayed two radio buttons to select the product properties (No-Prescription Lens / Prescription Lens).

The Add to Cart Process is working with the theme "Add to Cart" button.

When you select the "No-Prescription Lens" and hit the "Buy it Now (Shopify Direct Checkout Button)". It is adding the "Prescription Lens" on the checkout page.

It is working fine with the theme "Add to Cart" button.

Here is the URL: https://www.jimhalo.com/collections/haloday/products/round-prescription-glasses

How can I fix the Shopify Direct Checkout Button issue?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
587 72 129

Hey @WebContrive,

 

I'll try to point you in the right direction here. I can explain why this behaviour is occuring, but you may need to play around with your code to find where an adjustment is needed.

 

This is happening because the no-perscription variant is the first variant on the page, but the variant is not "selected" when the page loads. When a variant is selected, the id shows as a param in the URL (?variant=), and this param is used to add properties when a direct checkout method is used. When your product page loads the first variant isn't being selected automatically, so if the customer tries to do a direct checkout without a variant_id in the URL, the parameters will be missing. The behaviour is different when add to cart is chosen because the browser stays on the page where the property is still accessible.

 

I have a few suggestions that could help with this. The first one is to make some changes to your theme so that the first variant is selected on load. I had a look at your theme code but wasn't able to pinpoint exactly where this change needs to happen, but you just need to make sure the callback that executes when you select a different variant also executes on page load.

 

Another option is to change the default behaviour of the LENC property, so that is returns no-prescription by default. This will ensure that the correct value is used if the property isn't passed on the product page, and if the customer does select another option the property will be passed through to the variant_id in the URL. 

JB | Developer Support @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes