Reading list Switch to dark mode

    Custom Product Options: Multi-vendor Marketplace for Shopify

    Updated 17 October 2023

    The Multi-vendor Marketplace app has now come up with the custom product options feature. With this featured app, you can allow sellers to add custom options to products that they sell on your marketplace.
    Thus, let the customers provide additional information about the product while purchasing it.

    Features

    • Let customers add additional information about the products while purchasing it.
    • Allow customers to make more choices while purchasing a product.
    • Provide a better shopping experience for your customers.
    • Get a boost to your online sales.
    • Enable Toggle Checkbox and let customers pay for the custom options added.
    • Drop-down option is now available.

    PLEASE NOTE- Now, if you want to get the product custom options on Shopify, then you can access them through the product metafields.

    Limitations

    There are certain limitations of this featured app:-

    • Cart Type should not be “Drawer”.
    • Up to 10 Custom options can be added for a single product.
    • Drop-down has limit of 5 options.
    • Make sure that you have disabled the notification option on your Shopify store when a product is added to the cart.

      Go to Theme Editor>>Theme Settings>>Select “Cart” from drop-down>>Click Add to cart notification>>Disable the option “Show notification when item is added to cart”.
    sharecartdemo-Customize-Debut-Shopify
    • You can create a maximum of 10 custom options for a product.

    Now you can check the video tutorial on Youtube and here as well.

    4nkDU5xaPi4

    Enable the Feature App

    Visit the Feature app section and enable the Custom Options feature app.

    Searching for a Shopify
    Headless solution ?
    Find out More
    Dashboard

    Visiting the feature App section, search for the featured app & enable it.

    Screenshot-97

    Click the Enable button to activate the Custom Option feature app.

    Configuration

    To allow sellers to add custom options to the products, firstly you need to enable the configuration from the Product Configuration menu of the app.

    Dashboard-Admin

    Now, enable the tab “Allow Sellers to Add Custom Options to Products“.

    Once enabled, both you & your sellers will be able to add multiple custom product options while adding or editing a product.

    Product Configuration

    How to Add the Custom Product Options?

    ADMIN END

    • On the Multi-vendor admin panel, go to the Products.
    • Click the Product Listing menu under Products.
    • Click the Add Product button.
    product listing
    • Now, scroll down to the bottom and add the custom options.
      This feature app provides 4 different ways to display your seller’s products with custom options i.e. Text, Text Area, Toggle checkbox, DropDown.
    Add-Product-Admin333

    SELLER END

    Similar to the admin, the seller can also add the custom product options to their products published on the admin’s marketplace.

    • For that, the seller needs to login to his/her seller panel.
    • After that, go to the “Products” and click “Product Listing” to get the option to add/edit a product.
    • Clicking the “Add Product” button, the seller will get redirected to the “Add product form” and fill the required form.
    • Scrolling-down to bottom, the seller will have the option to add multiple custom product options.
    77

    NOTE:- Single quote(‘), double quote(“), double colon(::), comma(,) are not allowed in the field name.
    Instead, you can use a vertical bar/pipe (|) as a separator.

    Lastly, click the save button.

    Now, to display the same with the product on the store-front, you need to add a code to the respective liquid file. To get the code, please visit the “Instruction for Marketplace” section.

    Configure Front

    To configure your store-front, you need to follow the below-given steps:

    • Go to the Multi-vendor Admin Panel.
    • Visit the “Instruction for Marketplace” under the Configuration menu.
    • Get the code.

    Copy the below-given code and add it to product.liquid template file inside the form tag:

    {% render 'wk-product-custom-option' %}

    In case, you haven’t found the required template file? – Click on the ‘Regenerate‘ button to create a new one.

    Instructions-Admin

    And that is how it appears on the store-front:

    Coffe-Mug-–-sanjay-store-zip_code222

    After filling all the custom information for this product, the customer will add this product to the cart. Thus, they can view the added information on the cart page also.

    Your-Shopping-Cart-–-sanjay-store-zip_code

    Now, once this product is ordered, both you and your sellers can view the custom information about the product on the order detail page.

    Order-Details-Seller-•-Multivendor-MarketPlace-6

    Toggle Checkbox As Custom Option

    You can now have the Toggle Checkbox as an “input type” for a custom option added to a product. While adding a custom option to a product, you can enter the field name and choose Toggle Checkbox.

    Now, in case you want to charge an additional amount for the custom option, enable the price option, and enter the amount you want to charge in addition to the product price.

    Example:-
    Let Suppose, you sell watches on your store. You want to provide a custom option on a product to let customers purchase products with warranties.
    In this case, you can add custom options to the product by enabling a Toggle Checkbox. Now, the customer who wants to purchase the product with a warranty, can enable the checkbox and the warranty amount will be added to the product price at checkout.

    You can add custom options while adding/editing products to your store. Go to Products>>Add Product/Edit Product>>CUSTOM OPTIONS>>Enter Field Name, Select TOGGLE CHECKBOX, Enable Price for Custom Option & Enter Amount you want to charge>>Save.

    Edit-Product-Admin

    To reflect this on the front end, you need to add codes provided in the “Instruction for Marketplace” menu in the app.

    Instructions-Admin

    If you don’t find the files, click the Regenerate button. In case you need help with the codes, you can drop a mail to [email protected].

    After adding the codes, this is how it appears on the front end.

    Metallic-Watches-–-surya-store20

    To make this feature work with the split cart feature app, make sure to enable the product properties in the split cart configuration.

    Screenshot-2020-09-02T181342.267

    Demo

    Check the demo of the Multi-vendor Marketplace App: https://multivendor-marketplace-5.myshopify.com/

    If you need any kind of support, just raise a ticket at http://webkul.uvdesk.com/ or feel free to drop a mail at [email protected].

    Hope you like this blog. Keep in touch with us for more interesting blogs.

    . . .

    Leave a Comment

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


    Be the first to comment.

    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