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:

• 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:flex"><div id="wk_customer_addr" style="display:inline-block; margin-bottom:10px;"></div><div id="wk_change_location" style="margin:15px 5px;cursor:pointer"></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:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %}{% if hyperlocal_active == 1 %}disabled="disabled"{% endif %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent wk_hyperlocal {% endif %}">

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

Need Help?

If you are having trouble while updating the codes, let us know by emailing at shopify@webkul.com 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 support@webkul.com or create your ticket at Webkul UV Desk