Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
I can't seem to find any documentation or clear instructions on how I switch my newly created Hydrogen app hosted on Oxygen over to be the main front-end build for my Shopify store. How do I properly switch off the base themed Shopify store and switch on my custom Hydrogen build?
Switching your Shopify store's front-end to your new Hydrogen app on Oxygen involves a few key steps, but I'll break it down simply:
Get Your Hydrogen App Ready:
First, make sure your Hydrogen app is fully set up and running on Oxygen. Test it to ensure everything works as expected.
Link Your Domain to the Hydrogen App:
In Shopify, go to the Domains section under Online Store.
Add your custom domain (like your store url) if you haven't already.
Update the DNS settings so that this domain points to your Hydrogen app hosted on Oxygen.
Redirect Traffic to Your Hydrogen App:
In Shopify's admin panel, go to Online Store > Preferences.
Look for a section called Custom storefront and enter the URL where your Hydrogen app is hosted.
This step tells Shopify to direct all customer traffic to your new Hydrogen app instead of the old Shopify theme.
Minimize the Shopify Theme (Optional) :
While you can't completely turn off the old Shopify theme, you can make it less visible:
Either keep a very simple placeholder theme active, or let Shopify still hold the theme in the background while your Hydrogen app handles the main customer-facing experience.
Test Everything:
Visit your store's domain to make sure it now shows your Hydrogen app instead of the old theme.
Check that everything, like navigation and checkout, works smoothly.
Keep an Eye on Performance:
Once your Hydrogen app is live, monitor how it performs and be ready to make adjustments if needed.
Thanks!!