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

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.

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

Now, click here to add a new block:-

Lastly, add Seller Contact Button.

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.

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

Seller Contact Details :-

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

Similarly, you can add this block as well:-

Seller Profile Page On Product Description Page:-

Seller’s Extro Information:-

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

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

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

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

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

{% unless product.metafields.wk_product_video == empty %}{% for wk_product_video_url in product.metafields.wk_product_video %}
{% assign wk_temp_mf = wk_product_video_url %}
{% assign value = wk_temp_mf[1] %}
<video controls width="180px" height="160px" style="margin:5px;object-fit: cover;" alt="video">
<source src="{{ value }}" type="video/mp4"></video>{% endfor %}{% endunless %}

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

<div id="seller_country_origin_div" style="display:none;" data-productid="{{ product.id }}" > {%- if product.metafields.wk_origin_country != blank -%}{%- for field in product.metafields.wk_origin_country -%}
<strong> Seller Origin Country - {{ field | last }} </strong > {%- endfor -%}{%- endif -%}</div>

FOR SHIPPING CALCULATOR

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

<div id="wk_shipping_calculate_div" class="mp-relative" style="clear: both!important; margin:15px;"><div id="wk_shipping_calculate"><div class='mp-loader mp-absolute'><div class='mp-spinner'></div></div></div>

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

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

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

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

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

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

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

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

<th scope="col"> {{ 'Store Pickup '}}</th><th scope="col"> {{ 'Address' }}</th>

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

<td data-label="{{'Store Pickup'}}">{{ line_item.properties.store_pickup}}</td><td data-label="{{'Address'}}">{% if line_item.properties.store_pickup_address %}<img  id="storepickup_direction" title="{{line_item.properties.store_pickup_address}}" src="https://sp-seller.webkul.com/img/IconSlices/get-direction.png" style =" width:25px; height:25px">{% endif %}</td>

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

<meta http-equiv="content-type" content="text/html; charset=utf-8">var properties_data =document.querySelectorAll('[name^="properties"]:not([disabled])');
var properties_object = {};
properties_data.forEach((data) => {
     if(data.type == "radio"){
           if(data.checked){
let name = data.name.replace("properties[", "").replace("]", "").toString();
                let value = data.value;
 if(value != "")
                    properties_object[name] = value;
                }
 }
            else{
                let name = data.name.replace("properties[", "").replace("]", "").toString();
                let value = data.value;
                if(value != "")
                    properties_object[name] = value;
            }
            });

properties: properties_object,

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

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

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

{% assign wk_addon_price = 0 %}

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

{% if property.first contains 'Extra/' %}{% assign wk_addon_price = property.last | times: 100 | plus: wk_addon_price %}<span class='wk_addon_count' style='display:none;'></span>{% endif %}

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

{% assign wk_addon_line_price = wk_addon_price | times: item.quantity %}

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

| plus: wk_addon_price

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

| plus: wk_addon_line_price

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

| plus: wk_addon_cart_total

{% assign wk_addon_cart_total = 0 %}
{%- for item in cart.items -%}
{% assign wk_addon_price = 0 %}
{%- for property in item.properties -%}
{% if property.first contains 'Extra/' %}
{% assign wk_addon_price = property.last | times: 100 | plus: wk_addon_price %}
{% endif %}
{%- endfor -%}
{% assign wk_addon_line_price = wk_addon_price | times: item.quantity %}
{% assign wk_addon_cart_total = wk_addon_cart_total | plus: wk_addon_line_price %}
{%- endfor -%}

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

<div id="wk-askme"> {% if customer %} <input id="wk-is-login" type="hidden" value="{{ customer.email }}"> <input id="wk-cust-name" type="hidden" value="{{ customer.name }}"> {% endif %} <input id="wk-id-product" type="hidden" value="{{ product.id }}"> </div>

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

<div><a href='/pages/ask-a-question/sellers' target='_blank' class='view-customer-queries'><button class='btn'>Sellers Query</button></a></div>

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

<div id="wk-customer-queries"> <input id="wk-customer-email" type="hidden" value="{{ customer.email }}"> </div>

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

<div id="wk-askme"> {% if customer %} <input id="wk-is-login" type="hidden" value="{{ customer.email }}"> <input id="wk-cust-name" type="hidden" value="{{ customer.name }}"> {% endif %} </div><script>var orders = JSON.stringify({{order.line_items|json}});</script>

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

{% capture wk_product_review %}{% render "mvm-product-review" %}{% endcapture %} {% unless wk_product_review contains "Liquid error" %} {{ wk_product_review }} {% endunless %}

{% capture wk_product_review %}{% render "mvm-product-review" %}{% endcapture %} {% unless wk_product_review contains "Liquid error" %} {{ wk_product_review }} {% endunless %}

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

<script>var invalid_name = 'Enter your name.'; var invalid_email = 'Enter a invalid email address.'; var invalid_summary = 'Write some summary about review(minimum 5 characters)'; var invalid_title = 'Review title should be less than 160 characters.'; var minimum_desc = 'Write some description about review(minimum 5 characters).'; var maximum_desc = 'Review description should be less than 2000 characters.'; var invalid_customer = 'Invalid Customer! , The customer needs to buy this product before giving the review.'; var already_reviewed = 'Your review has already been submitted before!.'; var invalid_rating = 'Please give some rating first.';var empty_rating = 'Rating can not be empty.'; </script>

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

<div id="wk-your-reviews"> <input id="wk-cstm-email" type="hidden" value="{{ customer.email }}"> </div>

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

{% render "mvm-product-collection-review", product: product_card_product %}

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

<div class="wk_global_product" data-prod ="{{product.id}}" data-var ="{{product.selected_or_first_available_variant.id}}" style="display:none; border-bottom:1px solid #ddd; border-top:1px solid #ddd; padding:5px;" data-tags="{{ product.tags }}" ></div>

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

{% if product.tags contains 'wk_global' %}style='display:none;'{% endif %}

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

{% if product.tags contains 'se_global' %}style='display:none;'{% endif %}

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.

<div class="wk_like_btn" style="cursor:pointer; display:none; padding:5px; clear:both;"><a><i class="fa fa-heart-o" id="wk_icon" data-like="" data-total_count="" aria-hidden="true"></i></a><input type="hidden" class="customerid" value="{{ customer.id }}"><input type="hidden" class="productid" value="{{ product.id }}" data-vid=""></div>

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

<div id="wk-customer-likes" style="clear: both!important; margin:10px 0!important;"><input id="wk-customer-id" type ="hidden" value="{{ customer.id }}"></div>

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

<input type="hidden" class="customerid" id="customerid" value="{{customer.id}}">

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

<div id="wk_ff_service" style="margin:15px 0;clear:both;"><input type="hidden" id="productid" value="{{ product.id }}"></div>

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

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

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

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

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

wk_cart

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

<span id="wk_cart_error"  style="display:none" >Store Closed, Try after some time</span>

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

<span id="wk_cart_error"  style="display:none" >Store Closed, Try after some time</span>

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

<span id="wk_cart_error_{{vendor | replace: ' ', '_'}}"  style="display:none" >Store Closed, Try after some time</span>

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

{% capture the_snippet_content %}{% include 'mvm-hyperlocal-config' %}{% endcapture %}{% unless the_snippet_content contains "Liquid error" %}{% if hyperlocal_active == 1 %}<script type="text/javascript" src="https://sp-seller.webkul.com/shopify-mp/js/hyperlocal_mp.js"></script><script> var hyperlocal_active = {{ hyperlocal_active }}; var no_seller_found = "{{ no_seller_found }}"; var seller_not_deliver = "{{ seller_not_deliver }}";var add_location_btn = "{{ add_location_btn }}"; var delv_location_req = "{{ delv_location_req }}";var product_unavailable = "{{product_unavailable}}"; </script>{% endif %}{% endunless %}

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

• Create section for hyperlocal in theme.

• After that Navigate to customize theme.

• Now, search Hyperlocal Section for Home page and add to your theme

This is how it appears:-

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

<div style="display:none;background: #FFFFFF;box-shadow: 0 0 4px 0 rgba(0,0,0,0.14);border-radius: 4px;width:32.1%;height:7.1%;margin-top:3px;font-family: Montserrat-Regular;font-size: 14px;color: #555555;" class='wk_cstm_loc'><div id="wk_customer_addr" style="display:inline-flex;border-right:solid #33333333 1px;margin:5px;padding:4px;width:50%"></div><div id="wk_change_location" style="padding:22px;cursor:pointer;font-family: Montserrat-Regular;font-size: 14px;color: #215FE0;"></div></div>

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

<div class="wk_hyperlocal_mp" data-productid="{{product_card_product.id}}" style="display:none"></div><div class="wk_hyperlocal_vendor" data-value="{{product_card_product.vendor}}" style="color:#ff471a"></div>

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

wk-search-list wk_hyperlocal_prod_{{ product_card_product.id }}

Add this to inseries where you added above code:-

data-prod-id="{{ product_card_product.id }}"

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.

{% capture the_snippet_content %}{% include 'mvm-hyperlocal-config' %}{% endcapture %}
<div class="wk_hyperlocal_mp" data-productid="{{product.id}}"  style="display:none"></div><div id="wk_product_available"></div>

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

class="btn product-form__cart-submit wk_hyperlocal"

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

{% if hyperlocal_active == 1 %}disabled="disabled"{% endif %}

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

{% if product.tags contains 'wk_pay_what_you_want' %}
                                            <div class="wk_error_message" style="visibility:hidden">You have to Pay atleast <span id="wk_var_price"></span></div> 
                                            <div id="wk_custom_price_div" data-productid="{{ product.id }}" data-productprice="{{product}}">
                                                    <input id="wk_variant_id" type="hidden" name="properties[_wk_variant_id]" value="" >
                                                    <input type="hidden" name="properties[wk_pay_what_you_want]" value="true" >
                                                <p class="wk_pay_what_you_want" style="visibility:visible">
                                                    <label for="wk_custom_price">Enter price you want to pay</label>
                                                    <input id="wk_custom_price" type="number" name="properties[wk_custom_price]" value="" >
                                                </p>
                                            </div>
                                        {% endif %}

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

{% unless product.tags contains 'wk_pay_what_you_want' %}<!--your price object -->{%endunless %}

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

 {% if product.tags contains 'wk_pay_what_you_want' and current_variant.available %} wk_choice_pay {%endif%}

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

 {% if product.tags contains 'wk_pay_what_you_want' %} disabled {%endif%}

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

 wk_qty_selector

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

{% unless product.tags contains 'wk_pay_what_you_want' %}<!--your price code -->{%endunless %}

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

{% if item.product.tags contains 'wk_pay_what_you_want' and item.properties['wk_custom_price'] %}<span class='wk_pay_what_you_want_count' style='display:none;'></span>{%endif%}

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

{% if item.product.tags contains 'wk_pay_what_you_want' and item.properties['wk_custom_price']%}
{{item.properties['wk_custom_price']| times: 100 | money }}
{% else %}
<!-- your price object -->

{% endif %}

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

{% if item.product.tags contains 'wk_pay_what_you_want' and item.properties['wk_custom_price']%}
{% assign pay_whatever_line_price = item.properties['wk_custom_price'] | times: <!-- item quantiy object--> | times: 100%}
{{ pay_whatever_line_price | money }}
{% assign wk_pay_whatever_extra_price = pay_whatever_line_price | minus: <!-- product total price object --> | plus: wk_pay_whatever_extra_price %}
{% else %}
{{<!-- product total price object --> | money}}
{% endif %}

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

{% assign wk_pay_whatever_extra_price = 0 %}
{%- for item in cart.items -%}
{%- if item.original_line_price != item.final_line_price -%}
{% if item.product.tags contains 'wk_pay_what_you_want' and item.properties['wk_custom_price']%}
{% assign pay_whatever_line_price = item.properties['wk_custom_price'] | times: item.quantity | times: 100%}
{% assign wk_pay_whatever_extra_price = pay_whatever_line_price | minus: item.final_line_price | plus: wk_pay_whatever_extra_price %}
{% endif %}
{%- else -%}
{% if item.product.tags contains 'wk_pay_what_you_want' and item.properties['wk_custom_price']%}
{% assign pay_whatever_line_price = item.properties['wk_custom_price'] | times: item.quantity | times: 100%}
{% assign wk_pay_whatever_extra_price = pay_whatever_line_price | minus: item.original_line_price | plus: wk_pay_whatever_extra_price %}
{% endif %}
{%- endif -%}
{%- endfor -%}
{% if wk_pay_whatever_extra_price != 0%}
{{<!-- cart total price object --> | plus: wk_pay_whatever_extra_price | money}}
{%else%}
{{ <!-- cart total price object --> | money }}
{%endif%}

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

wk_checkout_btn

Add this to Order processing Additional scripts

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

<script>var z='<a href="/cart"><button name="button" type="submit" id="return_to_cart" class="step__footer__continue-btn btn" style="" aria-busy="false"><span class="btn__content" data-continue-button-content="true">Back to Cart</span></button></a>';</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.

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

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

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

Display Insurance Model at Cart Page

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

<header> <script src="https://cdn.routeapp.io/route-widget/stable/route-widget-stable.min.js"></script> </header>

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

<div id="RouteWidget"></div>

Display Insurance Model at Customers/Order Page

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

<header><script src="https://route-cdn.s3.amazonaws.com/route-widget-shopify/route-widget-static.min.js"></script></header>

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

<div class="route-div"></div>

Connect seller Stripe account to your Stripe account

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

https://<strong>example</strong>.sp-seller.webkul.com/index.php?p=stripe_connect_config&sid=31130&type=connect

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

<script>var wk_stripe_thank_you_page = true; </script>

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

<div style="display:none;" id="wk_order_payment_status" data-payment_status="{{ order.financial_status }}" data-sh_gateway="{{ order.transactions[0].gateway }}" data-wk_gateway="Stripe Payment" data-wk_pp_gateway=""></div>

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

<script>var wk_loader_message1 = "Please Wait...while redirecting you to the order status page";  var wk_loader_message2 = "Do Not Press Back Or Refresh button"; </script>

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.