Installation

This guide helps you install Sanity and integration with the Owen Hydrogen theme. If you are using Owen theme with Strapi, please following guide in the Strapi CMS > Installation.

1. Download latest theme file

After you complete the purchase, you would see the download package displayed in the My Account / Downloads section.

https://store.truestorefront.com/my-account/downloads/

*Note: If you do not see this download package displayed in the My Account / Downloads section, please contact us for further checking.

Please extract the download package which you just downloaded from store.truestorefront.com:

2. Setup Sanity Studio for CMS

*Note: Before continue, please make sure that you have installed Sanity CLI in your system.

Please extract owen-sanity-studio.zip

Update environment variables in sanity.config.ts and sanity.cli.ts

Setup your language:

Edit ./languages.js file from root folder of your Sanity Studio then add your default languages and list of other languages you want to use for your store.

For example: Our store uses English as default language. So, the ./languages.js file look like this:

Open your command line then navigate to owen-sanity-studio directory:

cd owen-sanity-studio

Run this command within the owen-sanity-studio folder:

npm install

After that, run the command below to deploy to your Sanity Project:

npm run deploy

You have installed your Sanity Studio!

This video guides you on how to create a Sanity project and deploy Owen Sanity Studio:

Learn more: https://www.sanity.io/docs/create-a-sanity-project

You can install the Sanity app to synchronize products and collections to your Sanity project.

Learn more: https://www.sanity.io/docs/sanity-connect-for-shopify

3. Setup Supabase

Create your Supabase account then add new project:

https://supabase.com/dashboard/sign-up

Create Supabase database table to store product review data with this format:

Create two Supabase bucket folders "image-review" and "returns" to storing product review and order return images:

4. Install the Owen theme

Step 1: Change environment variables in .env file

You can store these variables in a .env file in the root of your project (for local development). The following is an example:

For production, please modify all Environments variables from your hosting provide.

Example for Oxygen environments variables config:

Example Vercel config:

Environment variables enable you to load different values in your app depending on the environment it runs in. This guide describes the environment variables used in the Shopify storefront.

When you create a new Hydrogen app using the Owen templates, you should provide the following environment variables to your app:

PUBLIC_STORE_DOMAIN: The domain of the store used to communicate with the Storefront API.
PUBLIC_STOREFRONT_API_TOKEN: The public access token for the Storefront API.
SESSION_SECRET: A secret used to sign session cookies. Refer to the Remix documentation on using sessions for more information.
PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID: Customer Account API credentials. Learn how to setup and get customer account API: https://shopify.dev/docs/custom-storefronts/building-with-the-customer-account-api/getting-started
PUBLIC_CUSTOMER_ACCOUNT_API_URL: Customer Authorization endpoint. Learn more how to setup customer account API here: https://bavaan.gitbook.io/owen-hydrogen-shopify-theme/setup-customer-account-api
PRIVATE_ADMIN_API_TOKEN: Add your Shopify Admin API to use advanced Shopify features in Hydrogen (product review, return, order tracking...).
PRIVATE_ADMIN_API_VERSION: The Admin API version. It will using for Shopify Admin API query.
SANITY_PROJECT_ID: Your Sanity Project ID that you have created on the above.
SANITY_DATASET: Your Sanity dataset.
SANITY_API_VERSION: Your Sanity API version. Ex: 2023-03-30
SENDGRID_API_KEY: Your SendGrid API key. We using SendGrid service for contact form.
SUPABASE_URL: Your Supabase Project URL. You can find it from your Suppabase dashbroad > Project Settings > Configuration > API > Project URL.
SUPABASE_PREFIX_BUCKET: Your Supbase bucket prefix. Ex: /storage/v1/object/public/
SUPABASE_API_KEY: Your Suppabase API key. You can find it from your Suppabase dashbroad > Project Settings > Configuration > API > Project API keys.
SUPABASE_BUCKET_IMAGE_REVIEW: Your Supabase bucket folder name is used for storing product review images. Ex: image-review
SUPABASE_BUCKET_RETURNS: Your Supabase bucket folder name is used for storing order return images. Ex: returns

Learn how to create Shopify Admin/Storefront API token in this article:

Step 2: Change other variables in theme.config.ts file:

storeDomain: The domain of the store used to communicate with the Storefront API.
storeName: Your store name. It will using for SEO page title. Ex: "Owen Store"
blogHandle: Blog handle of your Shopify Store. It will using to fetch blog data.
sendGridEndpoint: SendGrid api endpoint.
sendFromEmail: The email address will be used to send an email after the customer submits a contact form.
sendToEmail: The email address will be used to receive customer info sent from the contact form.
enableThankYou: true/false to enable/disable thank you email when a customer submitted a contact form.
tawkPropertyId: We are using tawk.to for chat service. You can find property ID after creating a tawk.to account. Learn more the guide here: https://help.tawk.to/article/where-can-i-find-the-property-and-widget-id
tawkWidgetId: Your tawk.to widget ID.