Read More
Read More
Menu Close

    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">
    download-2-1

    This is how it will look on frontend:

    hyperlocalmarketplace-2
    • 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.
    HYPERLOCAL MARKETPLACE

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

    HYPERLOCAL MARKETPLACE
    • 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:

    Searching for a Shopify Searching for a Shopify Headless solution ? Read More
    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.
    HYPERLOCAL MARKETPLACE
    • 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.
    HYPERLOCAL MARKETPLACE

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

    HYPERLOCAL MARKETPLACE
    • 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>
    HYPERLOCAL MARKETPLACE

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

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

    HYPERLOCAL MARKETPLACE

    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:

    Products-–-hyperlocalmarketplace

    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

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    6 comments

  • Valentin Mayet
    As long as the “product-template.liquid” seems to not exist anymore, where do i have insert code instead ?
    • Mansi Rana (Moderator)
      Hey, in case “product-template.liquid” isn’t present, you need to look for “product.liquid” instead. If this particular file also doesn’t exist, kindly drop the query at [email protected] and we will look into it as files may vary depending on the Shopify theme you are using.
      We can also add the codes regarding the app for you if you want. Let us know in the email.
      Thank you!
  • vernon nacpil
    is there a easy way to install everything in any theme?
  • Piyush
    In this hyperlocal app,the location value is cross referenced to vendor or the product?
    • Mansi Rana (Moderator)
      Hey Piyush,
      I hope you are doing well!
      The location value is cross-referenced to the vendors of the marketplace.
      Each vendor needs to update his location as well as the range for his delivery service on the basis of which all the sellers delivering in the entered location will be listed as results.
      Know more regarding the app by visiting the following link: Main Blog

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

      Thank you!

  • Back to Top