# Custom Page

1. [Enable Custom Page](#enable-custom-page)
2. [Custom Page design](#custom-page-design)
3. [Create a Shopify page template](#create-a-shopify-page-template)
4. [Add a page on Shopify for the created template](#add-a-page-on-shopify-for-created-template)
5. [Add created Custom Page to your store's menu](#add-created-custom-page-to-your-stores-menu)

A tutorial video can be found here.

{% embed url="<https://youtu.be/1nncl9yUpvo>" %}

## Enable Custom Page

To enable the **Custom Page**, you must first click this **Turn on** button.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FEVddT4d0hORoHRVKA0dd%2Fimage.png?alt=media&#x26;token=1f93644b-8bdc-495e-a5dd-21130d19c842" alt=""><figcaption></figcaption></figure>

## Custom Page design

This is where you can design the **Custom Page** displayed to both advocates and their friends (if selected).

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FvZfpk64MmtDEUIUDLHjW%2Fimage.png?alt=media&#x26;token=cf3452ca-1dee-4a32-b888-976e4bb678d2" alt=""><figcaption></figcaption></figure>

You can freely customize the page's appearance and content. Any changes will be reflected in the right column's preview display.&#x20;

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FetsM3EOQjwz2tGB2Z9vx%2Fimage.png?alt=media&#x26;token=63c1d3e9-9d9f-4666-98fa-f5206eb90585" alt=""><figcaption></figcaption></figure>

## Display Custom Page on your storefront

### Create a Shopify page template

You must first create a new Shopify page template. Please go to your Shopify account > **Online store** > **Themes** > **Customize**.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FGoCQmRQ34zcqnz7ahPvh%2Fimage.png?alt=media&#x26;token=1732fd1c-a0b8-4ba1-aa16-541884c291f2" alt=""><figcaption></figcaption></figure>

On **Home page**, **select Pages** > **Create template**.

<figure><img src="https://content.gitbook.com/content/8I1FvDPwi1VP7QixsjAS/blobs/Hzm9AXJ6jybWbkZrNYCM/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/8I1FvDPwi1VP7QixsjAS/blobs/D7FgSqbpOSNz1TzUgYxq/image.png" alt=""><figcaption></figcaption></figure>

Now enter a name for the template, choose **Default page** and click **Create template**.

<figure><img src="https://content.gitbook.com/content/8I1FvDPwi1VP7QixsjAS/blobs/gw8ZYRLpgSWFKTJTAUfu/image.png" alt=""><figcaption></figcaption></figure>

Next, hide that **Default page**.&#x20;

<figure><img src="https://content.gitbook.com/content/8I1FvDPwi1VP7QixsjAS/blobs/B30SrHosq3dN85UXfIxg/image.png" alt=""><figcaption></figcaption></figure>

In **Add section** > **Apps**, select the "BixGrow referral page" template and edit the page's margin. Click **Save** when you're done.

<figure><img src="https://content.gitbook.com/content/8I1FvDPwi1VP7QixsjAS/blobs/8ZORm9v8BzXh5W6O4yI4/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/8I1FvDPwi1VP7QixsjAS/blobs/KxRCHTqyDlbkFjqRw5m2/image.png" alt=""><figcaption></figcaption></figure>

### Add a page on Shopify for created template

Now return to **Online store** > **Pages**. Click **Add page**, then enter a title for the page. Under **Theme template**, select the template you've just created above.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FpIgDNgMaJ3kKJ5iLxTNq%2Fimage.png?alt=media&#x26;token=6471351a-9e5e-455b-b18e-4a53c188ac9c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FPzXKucaUC4WsXJqluvW9%2Fimage.png?alt=media&#x26;token=3022efb9-990e-4c82-a1fc-64563306a7bb" alt=""><figcaption></figcaption></figure>

Then, click **Save**.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2F1irPOlM4FaXc3743Gemd%2Fimage.png?alt=media&#x26;token=19c8b502-88f4-4193-882a-d6a4166f0f02" alt=""><figcaption></figcaption></figure>

### Add created Custom Page to your store's menu

Finally, let's add the created **Custom page** to your store's menu. Return to your Shopify account > **Content** > **Menus**. Click on your header menu (usually named **Main menu**).

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FjPDb76wSOIk3GgPBwvBO%2Fimage.png?alt=media&#x26;token=76734521-948f-42f4-ae7b-cedfa8164fe2" alt=""><figcaption></figcaption></figure>

Now click **Add menu item**. Then, enter a label for the page and select **Pages** > the page you just created above.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FYI7EacGWIEE83wUiJplj%2Fimage.png?alt=media&#x26;token=2c6af06c-bf4f-4d61-a139-fc650df60fae" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FYtHTVu8Uo0XOB5EERoMc%2Fimage.png?alt=media&#x26;token=9747127b-09ac-4cd8-940f-82c6b212284c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2F8HU0jUBN9mzsc76fa47y%2Fimage.png?alt=media&#x26;token=5a39b2d4-9051-4509-b68b-16d1945cb73e" alt=""><figcaption></figcaption></figure>

Finally, click **Add** and then **Save** to update your changes.

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FLNFfmZJ7ozmw46TQBdsK%2Fimage.png?alt=media&#x26;token=8919d9e5-c8ab-4236-9105-1da338d2d36b" alt=""><figcaption></figcaption></figure>

This is a sample **Custom Page** that is displayed directly on the storefront after being embedded:

<figure><img src="https://1262132294-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8I1FvDPwi1VP7QixsjAS%2Fuploads%2FuttmCpKq2zT27qpcWPtw%2Fimage.png?alt=media&#x26;token=e86c0895-9727-4de9-99c4-c32a06dadbcc" alt=""><figcaption></figcaption></figure>