Read More
Read More
Menu Close

    Code Instruction To Online Store 2.0 – Multi-vendor Marketplace for Shopify

    Soon after Shopify has announced the biggest update Online Store 2.0, we have made the changes in our Multi-vendor Marketplace apps as per Online Store 2.0 standards.

    Make sure to add codes in the suggested liquid file in case you are using OS 2.0.

    So, here is the detailed code instructional guide to the Multi-vendor Marketplace app and featured apps. It will help you adding codes & configuring your marketplace.

    Initiation: Insert Codes

    To Display Seller Rating On Product Description Page

    Copy the code to add into product.json >> sections/main-product.liquid file [ Ex- For Dawn theme]

    Searching for a Shopify Searching for a Shopify Headless solution ? Read More

    To Display Vendor Location on store’s collection page:-

    Copy the code to add into collection.json >> sections/main-collection-product-grid.liquid >> snippets/product-card.liquid file [ Ex- For Dawn theme]

    collection.liquid

    Code For Minimum Purchase Quantity

    To Display Minimum Purchase Quantity on store’s product page:-

    Copy the code to add into product.json >> sections/main-product.liquid file [ Ex- For Dawn theme]

    Also, copy the code to add into sections/main-cart-items.liquid file:

    Screenshot-2021-08-25T165143.814

    Code For Seller’s Minimum Purchase Amount for Orders

    To Restrict Purchases for customers if minimum order amount is not statisfied:-

    Copy the code to add into sections/main-cart-items.liquid file [ Ex- For Dawn theme]

    Also, add code to hide Checkout Button:-

    Moreover, add code to hide additional checkout buttons:-

    Now, to show the minimum purchase amount on the product description page.

    Copy the code to add into sections/main-product.liquid file:-

    Display Details via Theme Editor

    “Contact Seller” Button on Product Page

    You can add this button via theme extension on your Shopify store. For this, you need to visit the Shopify store admin and follow the below steps:-

    Step 1: Go to Online Store>>Theme>>Customize.

    Screenshot-2021-10-11T164155.922

    Step 2: Visit Home Page>>Products>>Default Product.

    Screenshot-2021-10-11T164909.615

    Now, click here to add a new block:-

    Screenshot-2021-10-11T175132.732

    Lastly, add Seller Contact Button.

    rohit-soni-store16-Customize-Dawn-Shopify-6

    Similarly, you can add blocks to display the below details on the product description page:-

    Seller Store Description:-

    Do follow the above mentioned steps and get this done.

    rohit-soni-store16-Customize-Dawn-Shopify

    Seller Store Logo on store’s product description page:-

    rohit-soni-store16-Customize-Dawn-Shopify-5

    Seller Contact Details :-

    rohit-soni-store16-Customize-Dawn-Shopify-2

    Also, here’s to show extra Information About Product:-

    Similarly, you can add this block as well:-

    rohit-soni-store16-Customize-Dawn-Shopify-3

    Seller Profile Page On Product Description Page:-

    rohit-soni-store16-Customize-Dawn-Shopify-4

    Seller’s Extro Information:-

    rohit-soni-store16-Customize-Dawn-Shopify-7

    Also, you can add more blocks to display product policy as well.

    Allow Seller to Create Order

    Also, copy the code to add into customers/account.liquid file:-

    Seller’s Shipping Zones

    Also, to add Seller’s Shipping Zones,

    You need to copy the code to add into sections/main-product.liquid file:-

    Front Store Label Translation

    Also, copy the code to add to layout/theme.liquid file:-

    Codes To Allow Delivery Days

    Copy the code to add into sections/main-product.liquid file:-

    Code To Show Product Review on Google

    Also, to show product review on Google, copy the code to add into sections/main-product.liquid file:-

    Product Video Description

    Now, to show video as product description, copy the code to add into sections/main-product.liquid file:-

    Product Origin Country On Product Page

    Also, to display the product origin country on the products description page, copy the following code into sections/main-product.liquid file:-

    Marketplace Shipping  

    FOR SHIPPING CALCULATOR

    You need to copy the given code and paste it in your ‘main-cart-items.liquid‘ file template inside <form> tag:-

    In case the Product page is selected, add the above code to main-product.liquid file.

    Screenshot-2021-08-26T190914.333

    For Zone-wise Shipping – Seller’s Shipping Zone

    To display seller’s shipping zones Ranges on your store’s product description, add the codes to main-product.liquid file:-

    Also, for PostCode Shipping, add the codes to main-product.liquid file:-

    Store Pickup Feature App Codes

    To display Store Pickup details on the products description page, add the code to main-product.liquid:-

    To display Store Pickup address on the order description page, add the code to customer/order.liquid file:-

    Also, copy the following code into customer/order.liquid file inside the body tag of the table below customer.order.total data-label:-

    IMPORTANT NOTE:- If your theme does not support product properties then, you need to add the below code into product-form.js file:-

    Screenshot-2021-08-29T182530.676-1

    Custom Option Codes

    Add the code to display the custom option to your store, copy the below-given code and paste it to product.json >> sections/main-product.liquid file inside the form tag:-

    Copy the below-given code and paste it to cart.json >> section/main-cart-items-liquid file:-

    Copy the below-given code and paste it to cart.json >> section/main-cart-items-liquid file:-

    Also, copy the below-given code and paste it after the properties loop in  main-cart-item.liquid file:-

    Copy the below-given code and paste it inside price object ( {{ item.original_price | money }} )  main-cart-item.liquid file:-

    Also, copy the below-given code and paste it inside product total price object ({{ item.original_line_price | money }} ) main-cart-item.liquid file:-

    Screenshot-25
    Screenshot-26-1
    Screenshot-27

    Now, copy the below-given code and paste it inside cart total price object ( {{cart.total_price | money}} ) cart.json >>section/main-cart-footer.liquid file:-

    Screenshot-28

    Ask a Question Feature App Codes

    To display Ask a Question button on the product description page, add the code into product.json >> sections/main-product.liquid file:-

    Also, to display the seller queries in the customer “My Account” section, code into customers/account.liquid file:-

    To display the product queries in the customer “My Account” section, add the code into customers/account.liquid file:-

    Also, add the code into customers/order.liquid file:-

    Product Review App Codes

    Copy following code into product.json >> sections/main-product.liquid file:-

    Now, copy following code into theme.liquid file inside the head tag:-

    Copy following code into customers/account.liquid file:-

    Also, copy the below given code & paste it to collection.json >> sections/main-collection-product-grid.liquid >> snippets/product-card.liquid file:-

    Global Product App Codes

    To display global products on product page, add the code product.json >> sections/main-product.liquid file:-

    To hide ‘Add to Cart’ button on your store product description page, add the code into product.json >> sections/main-product.liquid file:-

    Also, to hide ‘Add to Cart’ button for seller’s product on your store product description page:-

    Favorite Product/Seller Codes

    To display favorite button on seller products, add the code into product.json >> sections/main-product.liquid file to display the “favorite” button on seller products.

    Also, here is the code to add into customers/account.liquid template to display the favorite product/seller button on customer account page:-

    Add the code into page.mp_seller_profile.liquid template to display the “favorite” button on seller profile page:-

    Stock Management App Codes

    Copy following code into product.json >> sections/main-product.liquid file to display the “fulfillment” logo on seller products:-

    Seller Vacation App Codes

    Add the code into product.json >> sections/main-product.liquid file to display the “Seller Vacation Message”:-

    Seller Time Slot Management Codes

    To hide Add to Cart

    Copy the below-given code and paste it to product.json >> sections/main-product.liquid file inside the form tag:-

    Add wk_cart to class of Add to cart button

    Copy the below-given code and paste it to product.json >> sections/main-product.liquid file inside class of Add to cart button

    Also, copy the below-given code and paste it to product.json >> sections/main-product.liquid file above Add To Cart button:-

    Error Label message for normal cart

    Add the below-given code and paste it to cart.json >>section/main-cart-footer.liquid file after Checkout button:-

    Error Label message for split cart

    Also, copy the below-given code and paste it to cart.json >>section/main-cart-footer.liquid template after Checkout button:-

    Hyperlocal Marketplace Codes

    Here is the code to activate the hyperlocal marketplace on your store, add the code into theme.liquid file inside the head tag:-

    To customise the storefront background image and content, follow the below steps:-

    • Create section for hyperlocal in theme.
    Screenshot-20
    • After that Navigate to customize theme.
    Screenshot-21-2
    • Now, search Hyperlocal Section for Home page and add to your theme
    Screenshot-by-Lightshot

    This is how it appears:-

    Screenshot-22

    Use this code to show the customer location on your store header, add the code into header.liquid template inside the header tag:-

    Add this code to collection.json >> sections/main-collection-product-grid.liquid >> snippets/product-card.liquid to display product availability on collection page:-

    Also, use this code to restrict customer to buy seller product if not available in seller range, add class to productcard.liquid to restrict product when “HyperLocal is Enabled”:-

    Add this to inseries where you added above code:-

    Screenshot-23

    Now, use this code to restrict customer to buy seller product if not available in seller range, add the code into main-product.liquid file inside section.

    Also, add class wk_hyperlocal along with Add to cart button in main-product.liquid section.

    Add the below line inside the Add to cart button in main-product.liquid section:-

    Screenshot-24

    Pay What You Want

    To show Price input field in product page, add the codes to main-product.liquid file:-

    Now, to hide pay what you want product price, add the codes to main-product.liquid file:-

    Also, to add code inside class attribute your Add to cart button, add the codes to main-product.liquid file:-

    Add code inside attribute your Add to cart button, add the codes to main-product.liquid file:-

    To add class to your quantity selector, add the codes to main-product.liquid file:-

    Also, to hide pay what you want product price from search product page, add the codes to main-product.liquid file:-

    Calculate price form cart page for pay what you want product:-

    Copy the below given code & paste it to main-cart-items.liquid theme page below cart items loop:-

    Also, to update price column, copy the below given code & paste it to main-cart-items.liquid file:-

    Screenshot-by-Lightshot-1-1

    To update total price column, copy the below given code & paste it to main-cart-items.liquid theme page:-

    Screenshot-by-Lightshot-2

    Also, to update Sub Total price, copy the below given code & paste it to cart.json>>section/main-cart-footer.liquid file:-

    Screenshot-29

    Add class to your checkout button on cart page main-cart-items.liquid file:-

    Screenshot-30

    Codes for Split Cart Feature App

    Add this to Order processing Additional scripts

    You need to add this at Settings -> Checkout -> Order processing -> Additional scripts and add below script:-

    NOTE:- You need to Create Section for Split Cart in theme (as shown in the screenshot). Click here to check the step-by-step instructions.

    Screenshot-31

    Also, to know more about Split Cart feature app, refer the detailed guide.

    Seller Badge Codes

    Add the code to show badges pn product page

    Get the below-given code and paste it to  main-product.liquid file outside the form tag:-

    Route Insurance Code

    Display Insurance Model at Cart Page

    Copy following code as first line of main-cart-items.liquid file:-

    Copy following code into main-cart-items.liquid template above the checkout button:-

    Display Insurance Model at Customers/Order Page

    Copy following code as first line of customers/order.liquid file:-

    Copy following code into customers/order.liquid template, after your order details code:-

    Stripe Connect Code

    Connect seller Stripe account to your Stripe account

    Copy following code into Redirect URIs inside account applications settings:-

    Copy the below given code & paste it to sections/main-cart-items.liquid file:-

    Also, copy the below given code & paste it to customers/order.liquid template file:-

    Now, copy the below given code & paste it to Additional scripts inside checkout in Shopify store settings:-

    Need Help?

    Code instructions are stated clearly. Still, if you have any doubt or confusion, kindly reach out to us at [email protected].

    Also, you can create ticket request from here: https://webkul.uvdesk.com/en/customer/create-ticket/

    The concerned team will assist you.

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Table of Content