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.

To Display Seller Profile Page On Product Description Page:-

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

<div class="wk_seller_detail clearfix" data-productid ="{{product.id}}" style="display:none;"></div>

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]

<div class='wk-rateit'></div>

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

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

<div class="wk_seller_store_logo" data-productid ="{{product.id}}"></div>

To Display Seller Store Description on the product description page:-

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

<div id="wk_seller_description" data-productid="{{ product.id }}" style="margin:10px 0;"></div>

To Display Extra Information About Seller on store’s product description.

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

<div class="wk_seller_custom_detail clearfix" data-productid ="{{product.id}}" style="display:none; "></div>

To Display Seller Contact Details on store’s product description.

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

<div class="wk_seller_info clearfix" data-productid="{{ product.id }}" style="margin:10px 0;"></div>

To Display Seller Profile Picture on store’s product description.

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

<div class="wk_seller_detail_logo" data-productid ="{{product.id}}"></div>

To Display Extra Information About Product on the product page:-

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

{% render 'wk-custom-meta-field' %}

Also, display extra information about the “File Type” product custom field:-

<div class="wk_product_custom_file_type clearfix" data-productid ="{{product.id}}" style="display:none; "></div>

To Display Product Policy on store’s product description

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

<div id="seller-policy-tab" data-productid="{{ product.id }}"></div>

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]

<div class="wk_vendor_address" data-vendor="{{ product_card_product.vendor }}" style="font-size: 15px;color: #23733a;"></div>

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]

<div id="min_purchase_quantity_div" data-productid="{{ product.id }}"></div>

<div class="wk_qty_selector_value" style="display:none;">Minimum purchase quantity for this product is <span class="qty_value">...</span></div>

wk_qty_selector

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

data-wk_min_qty_{{ item.variant_id }}

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]

<div class="" id="wk_minimum_purchase_div" style="display:none;"></div>

Also, add code to hide Checkout Button:-

style="display:none;"

Moreover, add code to hide additional checkout buttons:-

wk-additional-checkout-btn

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

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

<div id="wk_product_mpa" data-product_id="{{ product.id }}" data-selected_tag="{{ customer.tags[0] }}"></div>

“Contact Seller” Button on Product Page

Also, copy the code to add to sections/main-product.liquid file:-

{% render 'wk-contact-us' %}

Allow Seller to Create Order

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

<div id="wk_draft_order_div" data-customerEmail="{{customer.email}}"></div>

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

<div id="wk_shipping_zones" data-productid="{{ product.id }}" style="margin:10px 0; overflow-x:auto; width: 100%;"></div>

Front Store Label Translation

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

{% render 'wk-mvm-variables' %}

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

<div id="wk_delivery_day_div" data-productId="{{product.id}}"></div>

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

{% render 'mvm-google-widget-review-snippet' %}

Code instructions are stated clearly. Still, if you have any doubt or confusion, kindly reach out to us at support@webkul.com.

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

The concerned team will assist you.