Menu Close
    Convert your store into Shopify Multi Vendor Marketplace

    Add Custom Fields on Multi Vendor Marketplace for Shopify

    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.

    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 will select ‘Dropdown’ as the input field, he will get options to add the dropdown menus. Refer:

    custom fields

    Frontend:

    custom fields

    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.

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

    image-4

    NOTE:

    The file type product custom fields will not be saved as product meta fields in Shopify. To make them display, you need to add the following code in the product.liquid template file:

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

    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:

    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.

    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.

    custom fields

    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.

    custom fields

    Order Custom Field on Seller End

    The seller will have custom fields in the order description page. So for this, go to MultiVendor Marketplace Seller Panel > Orders > Order Listing > View any order:

    order custom fields

    Further, the admin can view the added note on the order description page. MultiVendor Marketplace Admin Panel > Orders > Order Listing > View the order:

    order note

    Moreover, the admin can also view this additional information on Shopify Backend in the orders section under note attribute area:

    extra information

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

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    2 comments

  • Gary
    How can I remove some of the preset forms on the product page and move my custom fields to the top? Specifically the Choose Product form which has nothing to do with what we need.
    • Mansi Rana (Moderator)
      Hey Gary,
      I hope you are doing great!
      In case you want to hide predefined fields from the ‘Add Product’ form, please do it from the Product Form Customization page: https://prnt.sc/wn468q.
      In case of any issues, please drop your query at [email protected]

      Regards,
      Mansi | Team Webkul

  • Back to Top

    Table of Content

    Hide Index