Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    shopify-hyperlocal-marketplace-guide

    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.

    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.

    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.

    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:

    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:

    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:

    Frontend:

    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:

    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.

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

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

    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.

    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:

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

    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.

    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:

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

    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:

    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:

    2nd line:

    3rd line:

    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

    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 support@webkul.com.

    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.

    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.

    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:

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

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

    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 support@webkul.com or create your ticket at Webkul UV Desk.

    Until next time. 👋

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index