Introduction

You can make use of the custom fields feature in Onport to create vendor pages within your Shopify store. In this article, we will explain how to sync custom fields from Onport to create vendor pages.

Sync custom fields as metafields

Rather than create an externally hosted page, Onport's approach involves syncing the custom fields (e.g. logo, brand name etc) as metafields. These metafields can then be inserted and used on your collection template.

❗️This will require editing your collection template in Shopify. If you are unfamiliar with template editing (e.g. HTML, CSS), a Shopify expert/theme developer will be able to help. It's typically a small and simple task, however, may require more time if you have a more elaborate design.

While this may require some upfront template editing, the result will be better than Onport providing its own hosted vendor pages. Other apps that do this often can't match exactly the look and feel of your site and require workarounds, such as using iframes.

Create a collection

To get started, you'll need to first create a collection in Shopify. Typically, you'll name this after your vendor. You can use the tags or vendor field filter to automatically populate the collection with products from your dropship provider. In the following example, the collection has been set up to automatically import products from the vendor Amanda's Records:

Map the collection in Onport

❗️We do have plans to automate the creation and mapping of collections in Onport in the future.

While the vendor pages feature is in beta, you'll need to copy and paste the collection ID into Onport under the custom fields tab. You can do this by clicking into the Custom fields tab in the dropship provider settings:

Under "External" you should paste this ID from the collection URL:

Create your custom fields

You now need to set up your custom fields. You can do this under Setup > Custom fields. You're free to create whatever data structure you want. For example, here we've created a custom field for About:

Once the fields you want have been created, either the brand can complete the details within their Vendor Portal > Settings > Custom fields:

Or, you can enter the details under Setup > Custom Fields in your Onport account.

Update the template

If you are unfamiliar with template editing in Shopify, we recommend getting in contact with your theme developer or a Shopify expert. They'll be able to use the metafield information being synced to your store to build a suitable design for your marketplace. Below is an example snippet of code you can use to get started.

<!-- custom meta fields -->
<div class="page-width">
    <p style="text-align: center">{{ collection.metafields.onport.About }}</p>
</div>