Instructions for Hyperlocal Marketplace: Multi-Vendor Marketplace for Shopify

Here are some important instructions for the Hyperlocal Marketplace featured app of the Multivendor Marketplace App for Shopify.

You can also find the following instructions by visiting: MultiVendor Marketplace Admin Panel > Configuration > Instructions for Marketplace.

Code-pasting with instructions:

• Only for existing users (for new users, this code will be auto-added when you’ll install the add-on): To add the ‘Use Current Location‘ button on the homepage, add the following code into the mvm_hyperlocal.liquid file inside form “wk_search_fld” (third line).

<input class="btn newsletter__submit" type="button" id="wk_use_my_location" data-loading-text="<div class='btn-loader loader-xs'></div>" value="Use current location" style="padding: 15px;border-radius:5px">

This is how it will look on frontend:

• To customize the storefront background image and content, replace the following code in the index.liquid template:

{% capture the_snippet_content %}{% include 'mvm-hyperlocal-config' %}{% endcapture %}{% if hyperlocal_active != 1 %}{{ content_for_index }}{% else %}{% include 'mvm-hyperlocal' %}{% endif %}

You can edit the code for your theme:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code.
3. Further, search for index.liquid template & replace the code.

This is how the frontend (HERO SECTION) will look like after pasting the code:

• To activate the hyperlocal marketplace on your store, i.e., to load the hyperlocal.js, paste the following code in the theme.liquid template:

{% 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/js/hyperlocal_mp.js"><script>{% endif %}{% endunless %}"

You can edit the code for your theme:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code.
3. Further, search for theme.liquid template & copy-paste the code.

• To display the customer’s location & change location option on the store’s header, paste the following code in the header.liquid template:

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

You can edit the code for your theme:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code.
3. Search for header.liquid template & copy-paste the code.

This is how the frontend will look like after pasting the code:

• To restrict customers from buying seller products that are not available on the location added by the customer, paste these following codes in the product-template.liquid template:

{% capture the_snippet_content %}{% include 'mvm-hyperlocal-config' %}{% endcapture %}

Replace add to cart button with this code:

<div class="wk_hyperlocal_mp" data-productid="{{product.id}}"  style="display:none"></div><div id="wk_product_available"></div>

You can edit the code for your theme:

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions > Edit code.
3. Furthermore, search for product-template.liquid  template & copy-paste the code.

These codes will disable the ‘Add to Cart’ & ‘Buy Now’ button for products that are not available at the customer’s entered location.

To display product availability on the collection page, paste these following codes in the product-card-grid.liquid template:

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

This is how it will look on storefront:

Need Help?

If you are having trouble while updating the codes, let us know by emailing at [email protected] or creating a ticket for the same at Webkul UV Desk. We’ll do it for you!

Moreover, if you can drop your query/suggestion at [email protected] or create your ticket at Webkul UV Desk