Appearance
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.
Walkthrough
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 aboutVendor login
?Content
needs to contain HTML code below. Click on<>
toShow HTML
, then paste the code below.
html
<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 asRegister as a vendor
.Content
needs to contain HTML code below. Click on<>
toShow HTML
, then paste the code below. Make sure to replace thesrc="..."
with the invitation link generated from Garnet!
html
<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).
Screenshot
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.
Screenshot
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.