What does the theme.liquid file do?

[ansmlc]

First of all, thanks for making this awesome starter.

I'm just wondering what does the theme.liquid do exactly? I understand there's some redirect rules there to handle the Shopify and Custom storefront hybrid approach.

When a client is ready to switch to a custom storefront hosted on Vercel, is this theme.liquid file all that's needed to have traffic redirected to the custom frontend? Or do they still need to change domain nameservers?

My issue is the client changed their domain A record to point to Vercel. The custom storefront works fine, but users can no longer access native Shopify pages such as /login/ and /account/.

[ndimatteo]

Hey there @ansmlc, glad you're enjoying hull!

The theme.liquid file is meant for your native Shopify theme to handle redirects to your headless storefront.

It's meant to do the reverse of what you're expecting: If someone hits a URL for the native store, it will redirect to the headless version.

For example, in the hull demo:

1. Headless Storefront URL: hull.dev
2. Shopify native URL: shop.hull.dev (password: hull-demo)

With the liquid.theme file in place, if you go to https://shop.hull.dev/products/ultra-magic-vinyl it will automatically redirect to the headless URL equivalent (https://hull.dev/products/ultra-magic-vinyl).

In your case, it sounds like the client used to have a Shopify native store at native-domain.com and then used that same domain name for the headless implementation. In doing so, that domain has nothing to do with the Shopify native theme, so the liquid.theme file has no effect. That entire domain is connected to the headless storefront, so if you were to navigate to /account or /login (which don't exist) it makes sense that it's showing the headless 404 page.

What I'd suggest doing is setting up a redirect in a vercel.json file for those routes, per the docs: https://vercel.com/guides/does-vercel-support-permanent-redirects#other-redirects

I hope that helps explain things, but let me know if you have any other questions!

[ansmlc]

That helps a lot. Thanks for the thorough response. However, I'm not sure where the Vercel redirects should be pointed to.

At the moment:

• I'm unable to reach/find their native /account/ page, anywhere.
• native-domain.myshopify.com/account redirects to native-domain.com/account (headless 404 page).
• Meanwhile, their Shopify admin panel loads fine at native-domain.myshopify.com/admin.

EDIT:

I'm curious, do shop.hull.dev and hull.dev have DNS/A/CNAME records pointing at different locations, i.e. Vercel and Shopify, respectively?

I'm wondering if I should have the client create a new subdomain, e.g. shop.native-domain.com, just like shop.hull.dev, but than also have them add a subdomain-specific A/CNAME record so that this particular subdomain still points to the native Shopify store?

I realize it's not really an issue with HULL, and I'm probably just missing something obvious in my setup... Anyway, if you do want to share any more thoughts on this, I appreciate it.

[ndimatteo]

No problem!

First, you want the vercel redirect to point to the native-shopify-domain.com, so something like this:

{
  "redirects": [
    { 
      "source": "/account",
      "destination": "https://native-shopify-domain.com/account", 
      "permanent": true
    },
    { 
      "source": "/login",
      "destination": "https://native-shopify-domain.com/login", 
      "permanent": true
    }
  ]
}

(that will redirect your headless URL --> native URL when hit)

Next, in order for the native /account page to be reachable (and not redirect back to headless) you'll need to have the HULL theme.liquid file published with their active Shopify theme.

You also need to make sure that accounts are actually enabled for them, check out this issue that addresses this specifically.

With both of those in place redirects should be skipped for anything in the passlist array:

https://github.com/ndimatteo/HULL/blob/main/theme.liquid#L21-L25

(make sure you add 'login' for your needs)