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]
<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>
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]
<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 }}
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]
<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>
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.
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' %}
Codes To Allow Delivery Days
Copy the code to add into sections/main-product.liquid file:-
<div id="wk_delivery_day_div" data-productId="{{product.id}}"></div>
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:-
{% render 'mvm-google-widget-review-snippet' %}
Product Video Description
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 %}
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:-
<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>
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:-
<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>
Store Pickup Feature App Codes
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,
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:-
{% 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 -%}
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:-
<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>
Product Review App Codes
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 %}
Global Product App Codes
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 %}
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.
<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}}">
Stock Management App Codes
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>
Seller Vacation App Codes
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>
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:-
<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>
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:-
{% 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 %}
Pay What You Want
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
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:-
<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.
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:-
<div id="wk_seller_badge_div" data-productid="{{ product.id }}"></div>
Route Insurance Code
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>
Stripe Connect Code
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>
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.
Be the first to comment.