How to use Shopify

Theme and Domain

To use the headless channel, you have naturally to setup a different domain on Shopify. If you attach both domains to Shopify and to Webflow, the checkout will not work, since the page would be intercepted by the Webflow hosting, so be sure to attach the main domain only on Webflow, and use a subdomain like store.domain.tld for Shopify.

More over if you don’t want to use at all the Online Store channel on your Shopify store, you should install the official Hydrogen Redirect theme.

When launching a Hydrogen storefront, you’ll likely also want to redirect any traffic that happens to hit your Liquid store too. This theme allows you helps you do that while also making sure you retain features like the bot detection checkpoint, and discount links.

Setup

Download the theme
Navigate to Online Store -> Themes in your Shopify admin
Upload the theme to your Theme Library
Customize the Redirect theme
Go to Theme settings -> Storefront and configure storefront_hostname
Publish the theme

Custom redirects

You can configure the custom_redirects value in Theme settings > Storefront.

The redirect rule format is as following:

Shopify path > Storefront path

Each line in the textarea represents a single redirect rule.

Example configuration

The example below removes the /account prefix from the login, register and reset password redirects.

/account/login > /login
/account/register > /register
/account/reset > /reset-password
/account/activate > /activate-account