> For the complete documentation index, see [llms.txt](https://truestorefront.gitbook.io/owen-hydrogen-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://truestorefront.gitbook.io/owen-hydrogen-shopify-theme/other-features.md).

# Other Features

### 1. Store Locator

Demo: <https://demo.truestorefront.com/store-locator>

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FRITlxfwc4vawvVsEvWRD%2FScreenshot%20from%202024-07-20%2023-35-32.png?alt=media&amp;token=54bfec2c-83df-4d7e-994d-050318c7b9cc" alt=""><figcaption></figcaption></figure>

**Step 1:** From root folder of Owen theme, add your google map api key to **theme.config.ts**

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FWArVQi5FTpNzRcMH6buV%2Fgoogle-map-key.webp?alt=media&amp;token=7954c748-9a0e-426e-b3ae-8e4fa7462544" alt=""><figcaption></figcaption></figure>

**Step 2**: From your Sanity Studio, create a new Pages with slug named "store-locator"

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FMr3PsKhVjWBo7243Xznb%2Fstore-locator-page.webp?alt=media&amp;token=9552e88c-0149-4b41-a562-85f14ecb3150" alt=""><figcaption></figcaption></figure>

**Step 3**: From "Modules" section, add new module named "Store Locator":

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2F52OhxXCmFvXjVzy005qI%2Fadd-store-locator-module.png?alt=media&amp;token=49036c2c-7440-4fbd-bcba-65805ca53330" alt=""><figcaption></figcaption></figure>

**Step 4**: From "List Stores" section, add all your stores data:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FjzBAwQrRW5lSOtzbfVrN%2Fadd-stores.png?alt=media&amp;token=afeda4c1-7d32-4cab-8b8c-cbd46386b910" alt=""><figcaption></figcaption></figure>

**Step 5**: Add details information for each store items (store name, address, website...):

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FQ3eU4Nco6yOVk9kv72pf%2Fstore-details.png?alt=media&amp;token=92b3863e-018e-4526-bfbe-c8a6b65916fe" alt=""><figcaption></figcaption></figure>

*\*Note: You can get "**Latitude**" and "**Longitude**" data from google map. For example:*

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FxCpXMEXz5W1kJOWlYhK8%2Fgoogle-map-lat-long.webp?alt=media&amp;token=b54edbad-60e6-4a87-bd81-32e7493cecca" alt=""><figcaption></figcaption></figure>

### 2. Product Reviews

*\*Note: Please make sure that you have added* [*Shopify Admin API*](https://truestorefront.com/blog/how-to-create-shopify-admin-and-storefront-token-2023) *to env and grant access to write product to use this feature*

To using product reviews feature in Owen Hydrogen theme. Please create 2 product metafields with config like screenshot below:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FE8nbou01tA9RUt9NDZOW%2Fnew-product-review-config.png?alt=media&amp;token=ae36dbf5-78da-4c46-a442-3f62129ba890" alt=""><figcaption></figcaption></figure>

**Please setup Supabase to using custom product review app/function:**

**Step 1:** Create your Supabase account then add new project:

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

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FCrJm4Uq2of5i18rJnKhC%2Fsupabase-project.png?alt=media&amp;token=e9bbc865-8ed9-4d15-b44e-7070af947a88" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FZg6uVtqRcidEXxKvvoMF%2Fsupabase-review-table.png?alt=media&amp;token=cac52f2d-413d-4178-a72d-b04104e69290" alt=""><figcaption></figcaption></figure>

**Step 3:** Create two Supabase bucket folders to storing product review and order return images:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2F39TGIT73x3aHnCiXxfl6%2Fsupabase-bucket.png?alt=media&amp;token=15c09e34-6ed5-4006-be5f-140e2eb5a97c" alt=""><figcaption></figcaption></figure>

### 3. Subscription Products

We are using the PayWhirl app to implement a subscription feature. You can install this app for your Shopify store here:

<https://apps.shopify.com/paywhirl>

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2Fw8UeDZlCQ4eR3gzGtUqU%2Fsubscription-products.png?alt=media&amp;token=51b94c94-ec53-4fa2-9d2b-9d86ccd97b9d" alt=""><figcaption></figcaption></figure>

From Shopify Admin, go to Apps > PayWhirl then create plan subscriptions under "Plans" tab:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FwukDSF1lIsmzTwZ6GVmN%2Fsubscription-products2.png?alt=media&amp;token=2e8dd1bc-0ddf-4a54-9dc1-7ef29d293c90" alt=""><figcaption></figcaption></figure>

Setting up your plan subscription then click "Edit products":

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FFZXCuf8PfDPwXYYjJuB0%2Fsubscription-products3.png?alt=media&amp;token=7a6db950-bd03-44f3-8c62-f5c03d247c5b" alt=""><figcaption></figcaption></figure>

From there, you can add all product you want to apply this subscription plan:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FtZAGsCpCFCtttVCiJEPC%2Fsubscription-products4.png?alt=media&amp;token=a69f8405-5769-40a1-91d5-64a9a5b7a766" alt=""><figcaption></figcaption></figure>

### 4. Stock Notification

We are using [Back in Stock: Restock Alerts](https://apps.shopify.com/back-in-stock) app for back in stock notification feature. Please install this app for your Shopify store:

<https://apps.shopify.com/back-in-stock>

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2Fy0gFXp0o1FR4a6mA1wzh%2Fnew-back-in-stock.png?alt=media&amp;token=70dbaf73-2ff2-4a58-9479-ce1bacd588a7" alt=""><figcaption></figcaption></figure>

### 5. You may also like

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FwLLvwCwneUw65ManzBip%2Falso-like.png?alt=media&amp;token=f502b076-0761-404d-80cc-517e0d0db908" alt=""><figcaption></figcaption></figure>

**Step 1**: Create product metafield with config like screenshot below:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FJbTjnv5ELSw2qCuDxljk%2Falso-like-metafield.png?alt=media&amp;token=994881de-c483-4660-a288-3d2ad138e3f8" alt=""><figcaption></figcaption></figure>

**Step 2**: Edit a product you want to show "You may also like" section in Owen theme then add product items for "also\_like" metafield:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FElDYB2klLmPK5Mqwe6Ov%2Falso-like-items.png?alt=media&amp;token=5c7acdaa-c902-4507-91cf-24ecc11c55f9" alt=""><figcaption></figcaption></figure>

### 6. Product Bundle

Please follow the steps below to using product bundle feature in Owen Hydrogen theme.

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FmhbKsCcGlQiMaXZxR9Wd%2Fbundle-product.png?alt=media&amp;token=05249f23-0696-4f30-b7aa-72a7be69595b" alt=""><figcaption></figcaption></figure>

**Step 1**: Create two product metafields with config like screenshot below:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2F2HHhY5yIIHdxwEeyCcVY%2Fnew-bundle-metafield.png?alt=media&amp;token=725c62db-25ca-4b43-a6f0-d01bc4f5b5c0" alt=""><figcaption></figcaption></figure>

**Step 2**: Create a ***Buy X get Y*** discount with config bellow:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FayQHXaowvUnPw92dRFJN%2Fproduct-bundle2.png?alt=media&amp;token=c96cea50-125a-42ba-b126-4c0bcff5594e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2F47hLBWVjlDpzM3rzOrdi%2Fproduct-bundle3.png?alt=media&amp;token=2cc05253-f185-4786-a430-21c4cc8d02b9" alt=""><figcaption></figcaption></figure>

**Step 3**: Edit product in "***Customer gets***". Ex "*Men's adidas Originals NMD R1 TR Running Shoes*" then add bundle metafield data to match with discount config above. See example below:

<figure><img src="https://1630269672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHRzzWAbPS2llHIRPwbcd%2Fuploads%2FIZA82aeKgTWuSyIsHGmx%2Fbundle-product4.png?alt=media&amp;token=d8c4c828-a0f0-427e-a440-23ca85dca0d6" alt=""><figcaption></figcaption></figure>

* **Bundle Price**: The price of product in "***Customer gets***" after applied the discount.
* **Bundle Products**: The list product in "***Customer buys***".
