Custom Domain

This video guides you through configuring the theme and domain for your Shopify headless store and Webflow project.

The Challenge: Seamless Integration

You might think setting up your Webflow store and installing the Smootify app is enough. However, an extra step ensures everything works seamlessly.

Current Theme and Limited Control:

• We'll use a Shopify store with the default theme (Dawn) and a basic Webflow site.
• Adding items to the cart and initiating checkout appear to function correctly.
• But clicking links within checkout takes you to the Shopify theme store, not your Webflow site. This disrupts the user experience.

The Solution: Hydrogen Theme

Thankfully, Shopify offers a special theme called "Hydrogen" designed for headless environments. It redirects users to your Webflow site and allows basic checkout customization.

Steps:

1. Download the Hydrogen Theme:
   • Access the Smootify documentation and navigate to the "Shopify Panel" > "Theme and Domain" section.
   • Download the Hydrogen theme from the provided link.
2. Upload the Theme to Shopify:
   • Go to your Shopify admin and navigate to "Online Store" > "Themes."
   • Click "Add Theme" and upload the downloaded Hydrogen theme file.
   • Publish the theme.
3. Configure the Hydrogen Theme:
   • This theme focuses on redirection and basic checkout customization.
   • Access the theme settings to:
     • Add custom CSS.
     • Modify checkout colors and backgrounds.
     • Add logos through the "Checkout" section.
   • Under "Storefront," enter your Webflow domain name (without the slash and "https").
4. Optional: Custom Redirects:
   • The "Custom Redirects" section allows specific URL redirects within Shopify. (Not covered in detail in this video)
5. Verify Functionality:
   • Refresh your Webflow site.
   • Initiate checkout again. You should now be redirected to your Webflow site upon checkout completion. Clicking the navigation should also direct you to the correct Webflow page.

Domain Separation: Key for Headless CMS

When setting up a headless CMS, domain configuration is crucial.

• In a typical project, your root domain would connect to Webflow.
• However, with Shopify and Webflow, attaching the same domain to both creates conflicts. Webflow might override Shopify functionalities.

The Solution: Subdomain for Shopify

• The video cannot detail specific steps due to using a development store.
• Refer to Shopify's documentation for subdomain setup instructions.
• This will vary depending on your domain registrar.
• For example, you could use "shop.johns" for your Shopify store and "[invalid URL removed]" for your main site.

‍