How can I allow two purchase options on Cart page?

Solved

How can I allow two purchase options on Cart page?

NguyenThiHoaCo
Excursionist
19 0 4

Screenshot_20241202_175855.png

 As you can see above, a brand named Adore Me allows customers to choose whether to purchase with a member account or check out as guest by having the options like this on top of the Cart page.

 

To explain how it works, when new customers choose to pay as guest, all the exclusive discounts will be removed from the Cart total and are only applicable if they choose to be a member (i.e. creating an account and subscribing to a newsletter or membership).

 

Also I want that it allows me to display a table that compares the different benefits of the two purchase options just like in the picture. I've found a smarter way to replace the table which is to create two images and upload them under each option.

 

How can I integrate something similar? I know this is doable with Shopify.

Accepted Solution (1)

mt686
Shopify Partner
90 11 20

This is an accepted solution.

Hey there! You’re right—this is totally doable with Shopify, and there are two ways you could approach it depending on how hands-on you want to get:

Option 1: DIY with Shopify's Built-in Features

You can achieve this setup using Shopify’s Cart page customization and Liquid code. Here’s a simplified way to implement it:

  1. Edit the Cart Template:

    • Go to Online Store > Themes > Actions > Edit Code.
    • Find the cart.liquid or main-cart.liquid file (depends on your theme).
  2. Add Membership Option:

    • Use a <div> or <section> to add the two purchase options above the cart.
    • For example, include buttons like "Checkout as Guest" and "Checkout as Member" with some JavaScript to toggle between the two states.
  3. Adjust Pricing Based on Selection:

    • Use Shopify’s line item properties to tag products as “Member” or “Guest” pricing.
    • Update the cart total dynamically using JavaScript when customers select an option.
  4. Add a Comparison Table or Images:

    • Insert the comparison table or upload your images directly in this section of the Cart page.
    • Use basic HTML/CSS to style it like the example you shared.

This method works but requires coding skills and ongoing maintenance if your store evolves.


Option 2: Use Latch for a Simpler Setup

If coding sounds like a hassle, our Shopify app, Latch, is built for this kind of functionality! You can:

  • Create two products, one for members and one for non-memebers
  • Use the functions in Latch to check tags, and add tags after purchase of the membership (You can also allow them to purchase the member exclusive as long as the membership is also in their cart)
  • Edit the front end a bit. Either just link to the two different product pages, and a bit of ATC javascript to add the correct product upon check tags. (Latch can automate the checking, block the checkout, and then upsell)

Friendly heads-up: I’m the developer behind Latch, so if you have questions or want help setting it up, just let me know! 😊

View solution in original post

Replies 3 (3)
NguyenThiHoaCo
Excursionist
19 0 4

I know Bold Memberships and Locksmith but they're not really what I want. Technically, I just want that they have to option to "remove all discounts" and the option to keep all the available discounts in cart. Then I will word them as Check Out as Member and Check Out as Guest.

 

The whole thing happens on the Cart page and not the whole store.

mt686
Shopify Partner
90 11 20

This is an accepted solution.

Hey there! You’re right—this is totally doable with Shopify, and there are two ways you could approach it depending on how hands-on you want to get:

Option 1: DIY with Shopify's Built-in Features

You can achieve this setup using Shopify’s Cart page customization and Liquid code. Here’s a simplified way to implement it:

  1. Edit the Cart Template:

    • Go to Online Store > Themes > Actions > Edit Code.
    • Find the cart.liquid or main-cart.liquid file (depends on your theme).
  2. Add Membership Option:

    • Use a <div> or <section> to add the two purchase options above the cart.
    • For example, include buttons like "Checkout as Guest" and "Checkout as Member" with some JavaScript to toggle between the two states.
  3. Adjust Pricing Based on Selection:

    • Use Shopify’s line item properties to tag products as “Member” or “Guest” pricing.
    • Update the cart total dynamically using JavaScript when customers select an option.
  4. Add a Comparison Table or Images:

    • Insert the comparison table or upload your images directly in this section of the Cart page.
    • Use basic HTML/CSS to style it like the example you shared.

This method works but requires coding skills and ongoing maintenance if your store evolves.


Option 2: Use Latch for a Simpler Setup

If coding sounds like a hassle, our Shopify app, Latch, is built for this kind of functionality! You can:

  • Create two products, one for members and one for non-memebers
  • Use the functions in Latch to check tags, and add tags after purchase of the membership (You can also allow them to purchase the member exclusive as long as the membership is also in their cart)
  • Edit the front end a bit. Either just link to the two different product pages, and a bit of ATC javascript to add the correct product upon check tags. (Latch can automate the checking, block the checkout, and then upsell)

Friendly heads-up: I’m the developer behind Latch, so if you have questions or want help setting it up, just let me know! 😊

NguyenThiHoaCo
Excursionist
19 0 4

YOU GUYS ARE AMAZING! Istg this app doesn't have any reviews yet so it's a new app right? Did you read this post a while ago and came up with this 😂

Anyways it's great to have it available now I'm definitely going to support your app. Thank you so much!