Back to Top

Add Custom Fields on Multi Vendor Marketplace for Shopify

Updated 14 December 2023

What is a custom field?

The Custom field allows a user to provide additional information. Like in Multi-Vendor Marketplace app, you can create custom fields for products, orders as well as sellers.

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!

Custom Fields for Seller

These are the by-default Seller Signup page fields: Seller Name, Email, Password & Confirm Password.

seller signup page

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.

Searching for a Shopify
Headless solution ?
Find out More

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

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

add custom fields

You will be redirected to the following page:

fill the custom field details

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.

Types of custom fields that can be added:

TEXT

This can be used for additional details like the seller’s phone number, city, zip code, etc.

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.

custom fields

TEXT AREA

This can be used to create custom fields for details like address or maybe details regarding any previous experience of the seller. This input type provides a larger text column to fill up lengthy information.

Frontend:

custom fields

FILE

This input type is used to fetch information like seller’s GST documents, policy documents, profile image or any like of document that you want.

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

Frontend:

custom fields

This input field is used to create custom fields for entries like DOB, Gender, Country or State.

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:

custom fields

Frontend:

custom fields

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

Custom Fields on the Seller’s Account Page:

After registration, the seller can view the custom fields details on the following page: MultiVendor Marketplace Seller Panel > Profile > My Account:

seller custom fields

The seller can update this information from this section.

Custom Field on the Seller’s Profile Page:

This is how the custom details will be present on the storefront for your customers.

seller custom fields

How can the admin download the files uploaded by the seller via custom field?

The admin can easily download the files by visiting Multivendor Marketplace Admin Panel > Sellers > Seller Listing > Edit:

custom fields

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

Custom Field for Product

Similarly, the admin can add custom fields for fetching extra information regarding the products from the sellers.

While creating custom fields for the products, we have now introduced a new input type i.e, “MULTI_SELECT”.

Multiple- selection

This input is used for multiple selections of the options.

So, when the admin chooses “Multiselect” as the input type, he/she will get the option to add multiple options to select and the added options will be available for multiple selections while adding/editing product.

screenshot-sp-seller.webkul.com-2022.02.01-10_15_43

On product form:

screenshot-sp-seller.webkul.com-2022.02.01-10_20_46

NOTE: Admin or seller can select multiple options by holding the CTRL key and then clicking on the desired options.
Please note that in accordance with the existing operational flow, the app presently permits a maximum of 50 multi-select options.

Product Custom fields will now save as Product Metafields in Shopify.

The benefit of adding custom fields as meta fields: It’s useful for storing extra information regarding products. They can be used to track data for internal use, customize the appearance of your storefront and optimize SEO.

Also, Metafields help to store and transfer data between your store and another ecommerce system such as CRM, ERP, or IMS.

In short, Metafields allows you to add additional custom data in your Shopify store.

Add Product Custom Fields as Product Tags

In case you are adding a product custom field with input type as drop-down, you will get an option to add the custom value as a product tag.

While adding the product custom field, simply enable the ‘Add Tag For Products’ option. Next, when the seller/admin will enter the value in the custom field, it will also be automatically added as a tag for that particular product.

Note: This is only for ‘product custom fields’ & input type as ‘drop-down’.

IMPORTANT NOTE:- Textarea is not supported in the case of Custom Field for products.

image-4
<div class="wk_product_custom_file_type clearfix" data-productid ="{{product.id}}" style="display:none; border-bottom:1px solid #ddd; border-top:1px solid #ddd; padding:5px;"></div>

Find the code on multivendor admin panel > Configuration > Instruction for Marketplace.

seller custom fields

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:

custom fields

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

custom fields

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

Custom field for ORDERS

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.

order-1

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.

order2

Code Pasting

To reflect the product custom fields on the product description page, the admin needs to do some code pasting.

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

custom fields

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.

How to find the product-template.liquid file?

Simply, go to Shopify backend > Online Store > Themes > Actions > Edit Code

edit theme

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

liquid files

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

Restrict Custom Field by Product Type

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:

Restrict

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.

Product Type

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. 👋

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

  • Gary
    • Mansi Rana (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content