Add Custom Fields on Multi Vendor Marketplace for Shopify

Using these fields, you can ask your sellers to provide their extra information during signing up on your store. You can display this information on the frontend, i.e., the seller profile page. Similarly, you can create these fields for the product form. While adding products to the store, you sellers have to provide that additional information and this will be displayed on the product description page for your customers.

There is one more option to add custom fields to the orders. Go through the documentation to know more!

Now, if the admin wants to add extra fields on this page, he can do so by creating custom fields from his MultiVendor Admin Panel.

Let’s jump into the process of adding these fields.

Go to MultiVendor Marketplace Admin Panel > Configuration > Custom Fields > +Add Custom Fields

You will be redirected to the following page:

FIELD FOR: Select SELLER
FIELD NAME: Name of the custom field that you want to add
INPUT TYPE: You can choose the type of input for the added custom field.
REQUIRED: Choose whether you want to make the custom field mandatory or not.
SHOW ON YOUR SHOP: Choose whether you want to show the custom field on your storefront or not.
SEQUENCE: Enter the position of the custom field.

This is how the TEXT input type will be displayed on frontend:

Because I have marked this field to be mandatory from the backend, there is an asterisk mark on this field. Making it mandatory for sellers to provide this information for creating the account.

Frontend:

Make sure that the maximum file size which can be upload shouldn’t exceed 3MB.

Frontend:

So, when the admin selects ‘Dropdown’ as the input field, he will get options to add the dropdown menus.
Note: As per the current flow the app can accommodate a maximum of 250 dropdown options.

Refer:

Frontend:

Note: On editing the Custom Field, the admin will not be able to change the type of Custom Field.

The seller can update this information from this section.

The admin can view all the custom fields detail on the following page. Moreover, he can also upload or download the files if any.

Adding Field:

Select the Field For entry as Product. You can choose the input type according to the additional information type. Further, fill the form as described earlier and save.

Once the admin creates the custom product fields from his end, the seller will have all these fields in the add product page.

MultiVendor Marketplace Seller Panel > Products > Products Listing > + Add Product:

Furthermore, once the seller will add a new product with the following details, here is how it will be visible on the storefront:

If the admin has added a file type custom field then he can download the file from the edit product page > multivendor admin panel.

For this, firstly the admin needs to enable the following option: ALLOW SELLER TO ADD EXTRA INFORMATION FOR ORDER from the Order Configuration page. After this, the admin will get the option to add custom fields on orders.

Go to MultiVendor Marketplace Admin Panel > Customization > Order Configuration.

ALLOW SELLER TO ADD EXTRA INFORMATION FOR ORDER: Enable this option for letting your sellers add extra information regarding the order.

UPDATE EXTRA INFORMATION ABOUT THE ORDER AT SHOPIFY END: From this option, you can choose whether you want to update extra information at Shopify end or not.

Now, the admin can add these fields on the order by going to MultiVendor Marketplace Admin Panel > Configuration > Custom Fields > +Add Custom Fields

INPUT TYPE can only be text & you can SHOW FIELD either on note attribute or order note.

Admin will have the code on the following page: MultiVendor Marketplace Admin Panel > Configuration > Instruction for Marketplace:

Display extra information about the product on your store’s product description page by pasting the following code in the product-template.liquid file:

{% include 'wk-custom-meta-field' %}

Note:

If in case, the custom fields aren’t visible on storefront then search for wk-custom-meta-field.liquid file. Further, if you are unable to find the wk-custom-meta-field.liquid file on Shopify backend, then click on the ‘Regenerate‘ button. This action will create a template file by the name ‘wk-custom-meta-field.liquid‘.

Note:

Let say that you’ve added five custom fields but you want to display only two of them on the storefront. This can be achieved by pasting the following code in the desired template file:

<p>{{ product.metafields.wk_custom_field["custom field label"] }}</p>

Mind that, before pasting this code, you need to replace ‘custom field label’ text with the label of the custom field that you want to show on the storefront.

Similarly, if you want to display n number of custom fields out of m, you need to add n number of codes with their respective custom labels.

Example- For adding three custom fields, we need to paste the code like this (this is just a demo example):

1st line:

<p>{{ product.metafields.wk_custom_field["shipping charges"] }}</p>

2nd line:

<p>{{product.metafields.wk_custom_field["extra policy"] }}</p>

3rd line:

<p>{{ product.metafields.wk_custom_field["seller info"] }}</p>

To implement the same, you’ll need to have advanced knowledge of Shopify’s Templating Language, i.e., Liquid. So, ask your developers to do the same.

(Let us know if you want this customized by our developers. Mind that, it will be a paid customization.)

Note:

Let say, for example, if a merchant wants to show a product’s custom detail on that product’s order page, he can paste the same code in the customers/order.liquid file.
Respectively, to show the product custom detail on the desired page, you need to paste the following codes in the respective liquid file templates.

Search for the file name, paste the codes and save.

If you are having any trouble regarding the code-pasting or any other configuration, please don’t hesitate to contact us at [email protected].

You can now restrict custom fields for your marketplace products based on product type. This feature depends on restrict product type feature. So, to enable this feature, visit Marketplace Admin Panel > Configuration > Restriction Configuration > Enable the option shown in the image below:

Once the admin enable this configuration, a new option will be added on the Add Product page. So, the seller/admin can now enable Restrict Custom Field for individual products. After enabling this option, you can further select which fields you want to display on frontend and which don’t. If you don’t restrict custom fields, all the fields will be displayed by default.

Don’t have a marketplace but want to build one?
Get the app: Multi-Vendor Marketplace for Shopify.

💡 Need Help?

Drop your query/suggestion at [email protected] or create your ticket at Webkul UV Desk.

Until next time. 👋