Customise login and registration ​

With Garnet you can customise the login and registration page by integrating the form into your marketplace. Once the forms are completed, a new tab pointing to the Garnet platform will open.

Having custom pages has multiple benefits compared to using a link:

• Smooth transition to Garnet, your users are not surprised by going to another website to register as a seller and are redirected to Garnet after they logged in.
• Theme consistency, you can customise the looks of the form.
• Better tracking, when using analytics tools, you can analyse and track key metrics to understand your vendors better.

Big picture ​

To integrate Garnet into your Shopify marketplace, you must create Online Store > Pages with an iframe HTML tag the import Garnet's form on your website. You can add more content to the page, as this will not conflict with the iframe.

All the login workflows, like password recovery and email verification, are also supported.

These pages are fully customizable in Shopify, using either the Theme interface or Liquid code.

Create the Garnet login page ​

Go to Online Store > Pages > Add Page.

• Title will contain the title of the page, how about Vendor login ?
• Content needs to contain HTML code below. Click on <> to Show HTML, then paste the code below.

<iframe
  class="garnet"
  src="https://garnet.center/app/login/signin"
  style="overflow: hidden; height: 700px; width: 100%; border: 0;"
>
</iframe>
<style>
  iframe.garnet:focus-visible { outline: none; box-shadow: none; }
</style>

<iframe
  class="garnet"
  src="https://garnet.center/app/login/signin"
  style="overflow: hidden; height: 700px; width: 100%; border: 0;"
>
</iframe>
<style>
  iframe.garnet:focus-visible { outline: none; box-shadow: none; }
</style>

Click Save, and that's it! The page is live and customer can log in to Garnet from your website.

Create the Garnet registration page ​

Before creating the page, you will need to get the invitation code.

Go to Online Store > Pages > Add Page.

• Title will contain the title of the page, such as Register as a vendor.
• Content needs to contain HTML code below. Click on <> to Show HTML, then paste the code below. Make sure to replace the src="..." with the invitation link generated from Garnet!

<iframe
  class="garnet"
  src="https://your-store.garnet.center/api/register"
  style="overflow: hidden; height: 900px; width: 100%; border: 0;"
>
</iframe>
<style>
  iframe.garnet:focus-visible { outline: none; box-shadow: none; }
</style>

<iframe
  class="garnet"
  src="https://your-store.garnet.center/api/register"
  style="overflow: hidden; height: 900px; width: 100%; border: 0;"
>
</iframe>
<style>
  iframe.garnet:focus-visible { outline: none; box-shadow: none; }
</style>

Finish the setup by clicking Save.

Customise the pages ​

To edit a page's theme, go to Themes > Pages > click the page to edit > Theme template and select the theme to use. If you want to create a new theme, go to Online Store > Theme and create a new Page template (using the interface or liquid code).

Troubleshooting ​

My page does not show Garnet's form but instead <iframe ... ​

It means you have added the code without selecting <> to Show HTML. To fix it, go to Themes > Pages > click the page to edit > Description > <> and insert the code again.

My page displays "This website cannot be loaded" ​

For advanced marketplaces with tight security measures on their website, you need to relax the Content-Security-Policy tag to include frame-src garnet.center your-store.garnet.center.

Other ​

For any other issue, you can contact us.