Redirect to liquid for checkout #1954

zack-rose · 2022-08-08T15:13:27Z

zack-rose
Aug 8, 2022

Hi there,

I find it really odd that you can build a storefront in hydrogen and then when the customer wants to check out they are redirected back to the liquid templates to sign in to process the checkout.

Surely you should be able to develop solely in hydrogen if you want to and bypass liquid? otherwise might as well just stick to liquid if youre going to have to use it anyway

juanpprieto · 2022-08-12T14:49:30Z

juanpprieto
Aug 12, 2022
Maintainer

Hi @zack-rose, I'm not sure I understand what you mean by "redirected back to the liquid template to sign in" to process checkout?

Do you have a video illustrating this flow? Can you see this on our demo-store ?

0 replies

josephsiefers · 2022-09-08T15:08:06Z

josephsiefers
Sep 8, 2022

@juanpprieto I might be wrong, but I think he means that the Hydrogen demo store does not contain any customizable checkout page components (and unless I'm missing something, the library doesn't seem to expose a hook for createCheckout/completeCheckout from Storefront API, as discussed here).

In this stackblitz recording, I land on an error page where the checkout flow should be:

Screen.Recording.2022-09-08.at.11.03.22.AM.mov

In my view, having consistent UX all the way through the end of checkout is pretty important as users could become confused/suspicious.

0 replies

ryanleichty · 2023-01-31T19:40:21Z

ryanleichty
Jan 31, 2023

I'm running into this problem right now and trying to figure out what to do. The best I could find is this: https://github.com/Shopify/hydrogen/discussions/2335

It feels really odd that we'd have to interact with the liquid theme to control this.

0 replies

rodsotdia · 2023-01-31T23:08:40Z

rodsotdia
Jan 31, 2023

I'm having this same issue, will there be an update for this?
As others said, it is really weird to develop in Hydrogen and have to lead with some stuff that uses the liquid templates from the theme in Shopify, it doesn't make sense as both things are not compatible.

0 replies

davidhousedev · 2023-02-01T10:45:48Z

davidhousedev
Feb 1, 2023

For anyone coming to this thread, you may want to look into Shopify's current development work with checkout: https://shopify.dev/apps/checkout#customization-options-and-resources

I can't speak for Shopify here, but this is what I've understood about how Checkout customizations will work in the future: rather than customizing liquid, you will use Checkout UI Extensions (written in React), and other APIs for branding and analytics. This will allow you to customize checkout without freezing your version of checkout on a yearly cycle as you have to do today with checkout.liquid. Once it's all said and done, your customer will do everything in Hydrogen except for checkout, which won't be in Liquid but also won't be in Hydrogen.

Speaking for myself here, I would much rather not have to maintain my own checkout 😅. Over the last two years that our organization has tried to manage our checkout in React, we've found that it is both the most critical page for conversion and the most complex page to work with as developers. I'm very happy to have Shopify maintain our checkout flow and customize it using Checkout Extensibility.

Hope this helps!

9 replies

kristofferso Feb 8, 2023

Same here.
That's a neat solution. I have added the following lines of code to my standard Dawn theme (serves the same purpose as your theme):

Line 1 in theme.liquid:

{% assign custom_frontend = 'https://www.custom-domain.com/' %}

Inside <head> in theme.liquid:

<script>
    window.location.replace('{{ custom_frontend }}');
 </script>

In case anyone else is looking for a quick fix.

kristofferso Feb 8, 2023

How are you solving customer accounts and returns? Are you using the new type of customer accounts handled by shopify or have you created custom Hydrogen pages for it? @ryanleichty

davidhousedev Feb 8, 2023

Are you deploying your Hydrogen app to Oxygen @davidhousedev? I think in this case all domains are handled by Shopify. If not, can you tell us a little bit about how you've set up you domains?

We are, yes.

We have two subdomains set up: storefront.ourcompany.com which directs to Hydrogen hosted in Oxygen and checkout.ourcompany.com which directs to liquid. As it stands, we're only using Online Store for checkout, so these semantics work for us.

The piece I'm still confused by is the "login" behavior referenced above. We've never had a situation where a customer was asked to log in, then again we've only been using Shopify for a short time.

For what it's worth, we took a similar approach in Online Store to others. For all routes that aren't /checkout, our theme redirects the customer back to our homepage.

ryanleichty Feb 8, 2023

@kristofferso I disabled customer accounts for the time being while I look into this, but I created account pages in Hydrogen (started with the demo store setup). The problem I found is that the Shopify checkout page has the option to include a login link that directs you to the liquid login page, so I'll have to figure out a workaround there.

kristofferso Feb 8, 2023

Thank you both for taking the time to reply

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redirect to liquid for checkout #1954

{{title}}

Replies: 5 comments 9 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Redirect to liquid for checkout #1954

Replies: 5 comments · 9 replies

juanpprieto Aug 12, 2022 Maintainer

Replies: 5 comments 9 replies

juanpprieto
Aug 12, 2022
Maintainer