shopify-headless-theme

Liquid theme that automatically redirects customers to your custom storefront.
Download theme

---

Purpose

When using a headless Shopify setup, you normally don't want customers to access any of the theme pages except the checkout. However, you can't totally disable the theme and a lot of links will still point to the theme (e.g. links in emails, plugins and the checkout).

The sole purpose of this Liquid theme is to automatically redirect customers that land on one of the theme pages to the related page in your custom storefront.

Local development

• this does not offer the full-featured preview available in the Themes > Customize section of Shopify's Admin > Online Store

Preview

npx shopify theme dev --store=sample-kbs.myshopify.com

Build

npm run build

• upload /dist/shopify-headless-theme-kbs to your Shopify store

Installation

1. Download the shopify-headless-theme-master.zip file
2. Navigate to Online Store > Themes in your Shopify admin
3. Upload the theme to your Theme Library
4. Click the Customize button of the newly installed theme
5. Configure the storefront_hostname in Theme settings > Storefront
6. Favicon section > Upload a favicon
7. Publish the theme 🚀

Customizing Checkout, Thank you, and Order status pages

• go to Store Settings > Checkout > Configurations > Customize
• there is no way to download a configuration, alas

Customizing email notifications

• go to Store Settings > Notifications > Customize email templates button (top right) or `/settings/email_settings' from Admin
• select logo
• set accent color

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

Multipass login

Enable the multipass_login option in Theme settings > Storefront if you implemented Multipass (a Shopify Plus feature) in your storefront. Enabling this feature will also redirect customers from the Shopify login page to your custom storefront. If not enabled, a customizable login page will be shown when customers click the "Log in" link in the checkout.

Gift cards

Since the Shopify Storefront API unfortunately does not support fetching gift cards yet, a customizable gift_card.liquid template has been added.