Benjamin Sehl benjaminsehl

Launching Your Hydrogen Storefront

This guide will walk you through the process of launching your Hydrogen storefront on Shopify. Follow these steps to ensure a smooth transition and a successful launch.

Update your Notifications domain

Ensure that the domain associated with your transactional emails and notifications, found in /admin/settings/notifications, correctly points to the associated domain of your Hydrogen storefront. This ensures that customers receive accurate information in their email notifications.

Add Preferred Vanity Domain

Deploying Hydrogen on Alternative Hosting Runtimes

If you want to use Hydrogen but prefer not to use Oxygen, you can deploy Hydrogen to various hosting platforms that support Remix. This guide walks you through adapting your Hydrogen app for an alternative hosting runtime.

Note: While Hydrogen and Remix are designed to run on any platform, some features of Hydrogen rely on Oxygen's Workers platform and support for certain Web APIs like Cache. This is an advanced guide that covers the areas to consider when hosting Hydrogen apps on your own architecture, and assumes you are comfortable with using Remix's adapters or creating your own. The steps in this guide are not supported by Shopify.

Adapting Your Hydrogen App for an Alternative Hosting Runtime

To adapt your Hydrogen app for an alternative hosting runtime, follow these steps:

	{
	"Ansi 0 Color" : {
	"Green Component" : 0,
	"Red Component" : 0,
	"Blue Component" : 0
	},
	"Tags" : [

	],
	"Ansi 12 Color" : {

	import { CacheLong } from '@shopify/hydrogen';

	interface Config {
	cacheControl: string;
	removeNoIndex: boolean;
	updateCanonical: boolean;
	ignoreRedirects: boolean;
	}

	const config: Config = {

	const config = {
	cacheControl: 'public, max-age=3600, stale-while-revalidate=86400', // Set to the amount of time you want to cache the page, in seconds
	removeNoIndex: true, // Set to false if you want to respect robots noindex tags
	updateCanonical: true, // Set to false if you want to respect canonical meta tags
	ignoreRedirects: true, // Set to false if you aren't redirecting to Hydrogen in your theme
	};

	export async function loader({request, context}) {
	const {
	shop: {

	// Place this file at `/routes/discounts/[handle].tsx`

	import {useUrl, useRouteParams, useSession} from '@shopify/hydrogen';

	// @TODO: Add in API route for setting session cookie with discount code: https://shopify.dev/custom-storefronts/hydrogen/framework/sessions#reading-and-updating-session-data

	export async function api(request, {session}) {
	let sessionData, jsonData;

	}

	import {useUrl, useShopQuery} from '@shopify/hydrogen';

	export default function AdminRedirect({response}} {
	const url = useUrl();

	if (response && response.writeHead) {
	response.doNotStream();
	}

	const {data} = useShopQuery({

	{% comment %}

	UPDATE: Now you can use this theme to more easily manage your redirects:
	https://github.com/benjaminsehl/shopify-headless-theme

	{% endcomment %}

	{% assign new_website = 'https://headless-website.com/' %}
	<!doctype html>
	<html>

	-- A SQL query to find customers that may have unintentionally unsubscribed from their e-mail.
	-- This is related to a Shop Pay bug where if customers come from a Headless shop, they're unsubscribed.


	SELECT T1.metadata__email "Email", C.accepts_marketing "Subscribed", C.accepts_marketing_updated_at "Unsubscribe Date", T2.created_at "Transaction Date", O.created_at "Order Date"
	FROM ca_ecomm.transactions__receipt__charges__data T1
	LEFT JOIN ca_ecomm.transactions T2
	ON
	T1.metadata__order_transaction_id::VARCHAR = T2.id::VARCHAR
	LEFT JOIN ca_ecomm.customers C