Reading list Switch to dark mode

    Multivendor Marketplace for Shopify: Seller Profile Page Settings (New Theme)

    Updated 13 September 2023

    We have updated the Multivendor Marketplace app for Shopify and is now available with a new feature of Seller Profile Page.

    Each seller will have their respective seller profile page on the admin’s Marketplace where all the products of that seller will be displayed itself.

    This User Guide will help you to understand how an admin can customize it as per his/her requirements.

    All the products of that particular Seller will be displayed on each seller’s profile page. There will be a separate section of reviews given to that seller, policies & description (if added by the seller). Also, there will be a Feedback section from where customers will give their feedback for the seller’s products.

    Searching for a Shopify
    Headless solution ?
    Find out More

    Now, from the Seller Profile Page Settings menu, you can customize the seller’s profile page by editing/changing the content of the page. In addition to it, you can change the content position of the profile page, show/hide content, change the theme as well.

    If you want the customers to get redirected to the seller’s profile page, you have to paste the code in product.liquid template file mentioned in the configuration page. After pasting the code, a seller link will be displayed on the product description page. By clicking the link, you will be straightaway redirected to the seller’s profile page.

    Admin can also create a menu of Seller Listing Page on his/her store by referring to below-given steps:

    • Visit Shopify Store Backend
    • Click “Online Store”
    • Go to Navigation
    • Click on Main Menu (if Created otherwise Add Menu)
    • Enter Title and Link of Profile Page.
    • Lastly, click on Add & Save the Menu.

    This way, you can add a Seller Listing Page menu to your store’s frontend.

    Features

    • Option to Show/Hide the content on the profile page of Sellers.
    • You can write your own CSS for further changes in the profile page
    • Admin can choose the position of Seller’s Page content to be displayed on Seller’s description page.
    • You can upload a banner image or a background video to display on Seller’s profile page.
    • Admin can select the Theme for the Profile Page.

    Admin can now edit the Theme code for Seller Profile Page. You will get the variables to edit the theme template and customize CSS of the profile page.

    Custom CSS for seller dashboard option is now available in all the three plans (Basic, Executive, Pro) of the Multi-vendor Marketplace App.

    Seller Profile Page Settings

    Admin will follow the below steps to visit Seller Profile Page Settings section:

    seller's profile

    Multivendor App Admin Panel>>Go to Sellers>>Seller Profile Page Settings (from the drop-down menu).

    Following are the fields admin can set up for Seller’s profile pages:

    1. Seller Profile Page Theme

    From this section, you can select the Theme of your Seller’s profile page. You can click the radio button & choose the theme of your choice.

    seller profile page settings

    Theme 1

    In Theme 1, You will get an option to edit the theme code as well. You can customize CSS and edit the theme template of the profile page as per your choice.

    select a Theme

    After clicking the Edit Theme Code button, you will get the option to edit the Theme template & edit CSS for the seller’s profile page.

    seller page

    As soon as you edit any code and Save it, the “Publish” button gets enabled. Now, to make the changes work for the seller page, you need to publish the edited code.
    Please note that if you have saved the edited code and not published it then, the default code will work for the profile page.

    seller profile 1

    Moreover, clicking on the Preview button, you can preview the change you made for each seller’s profile.

    Admin can anytime restore the default code by clicking the “Restore to Default” button.

    FILTER OPTION IN THEME 1

    If you want to filter any seller’s products by Category, Tag or Type on the seller profile page then, this feature is available in Theme 1.

    For this, you need to enable the “Restrict Collection”, “Restrict Tag” & “Restrict Type” tab from the “Restriction Configuration” menu of the app.
    Make sure that you have added product collection, tags & product types in the app.

    Product Tag

    Now, the product categories, tags or types that you have added in the app will be visible to customers while adding/editing products. Thus, you can restrict sellers to add only those categories, tags or types to the products and accordingly the added categories, tags or types will be visible with the products in a filter option on the seller profile page.

    This filter option will be visible like this on the seller profile page:-

    filter option on seller profile page

    NOTE:- The Edit Theme Code feature is available only in Theme 1. 

    Moving on to the other options available in all the Themes to set profile pages of your sellers…

    You will also get an option to select the color of Seller’s rating star.

    rating star color

    Also, you can select the default “Sort by” option for the profile page. This is up to you that how you want your seller’s profiles to be listed on the page.

    seller profile

    You can also upload a default banner for your seller’s profile page either as Banner Image or Background Video.

    show/hide content

    Additionally, you can Show or Hide the content of Profile Page as per your requirement.

    NOTE:- The Show/Hide Seller Page Content Option is available only in Theme 1.

    You can anytime re-position the Toggle Logo and Description on the profile page.

    Admin can also write his/her own CSS for Profile Page.
    change position

    If you select Theme 1, sellers page will look as shown in the screenshot below:

    Seller Profile Theme1

    Theme 2

    Similarly, you can check the features for Theme 2 as well.

    Once you select Theme 2, the Profile Page will be visible like this as shown in the screenshot below:

    Theme 2

    Theme 3

    Similarly, you can set your seller’s profile page using Theme 3 as well.

    If you select Theme 3, seller page will look as shown in the screenshot below:

    Seller Profile Theme 3

    Theme 4

    In Theme 4, you will get an option to edit the theme code as well. You can customize CSS and edit the theme template of the profile page as per your choice.

    Theme 4

    Click on the ‘Edit Seller Listing‘ option on the ‘Seller Profile Page Settings‘ page, you will get the option to edit the Theme template & edit CSS for the seller’s listing page.

    As soon as you edit any code and Save it, the “Publish” button gets enabled. Now, to make the changes work for the seller page, you need to publish the edited code.
    Please note that if you have saved the edited code and not published it then, the default code will work for the profile page.

    Moreover, clicking on the Preview button, you can preview the change you made for each seller’s profile.

    Admin can anytime restore the default code by clicking the “Restore to Default” button.

    Edit Theme Template

    edit theme

    Edit Theme CSS

    edit css

    Seller Profile Page will be the same as that for Theme 1:

    seller profile

    Here is a look of seller listing page for this theme:

    seller listing

    Display on seller listing page

    You can choose whether you want to display seller logo or seller profile image on seller listing page from: Multivendor App Admin Panel>>Go to Sellers>>Seller Profile Page Settings (from the drop-down menu).

    logo-or-profile-

    How can Seller upload a banner for the seller profile page

    To upload banner on the seller profile page, the seller has to visit My Account page from the Profile menu.

    Seller 11

    On My Account page click on ‘Upload Banner’ to upload banner on the seller profile page.

    Seller My Account

    Once you click on Upload Banner, the box will open where you will get the option to upload the Image as well as video.

    banner image

    Sellers can also remove the banner from the “My Account” section.

    banner

    How to upload the video on the seller profile page

    Sellers can upload video by clicking on the video as shown in the above screenshot.

    After clicking on Video a new box will open where you have to enter YouTube embedded link.

    9

    How to get Youtube Embedded code

    10

    Open the video on Youtube which you want to upload on the seller profile page.
    Now click on the share button and click on the embed link.

    Copy that ’embed Url’ from there and pastes it in the URL box shown above.

    11

    How to Upload Logo on the Seller profile page

    How can a Seller upload his/her Shop LOGO? 

    The seller can upload the Logo from the “My Account” menu of his/her profile.

    Seller Profile

    Now click on upload image as shown in the screenshot below:

    Seller Shop logo

    After clicking on ‘Upload Image’ box will open then click on upload image, then select the image you want to upload for the logo, to display on seller profile page then click on save.

    Upload LOGO

    Now, admin can also upload Seller Shop Logo from his/her admin Panel of the Multivendor App.

    Admin needs to follow the below procedure to Upload Logo for his/her Seller:

    Multivendor admin panel>>Go to Sellers>>Click “Seller Listing” from the drop-down menu>>Select the seller to upload his store logo>>Click on “Edit” from Action menu>>Scroll down and Upload the Logo>>Save Changes.

    upload seller logo

    Admin End

    Now, go to Edit Seller Section and Upload the Shop Logo of that Particular seller from admin panel.

    Seller Logo Admin end
    To display Logo on the product description page, paste the below code on product.liquid template:
    <div class="wk_seller_store_logo" data-productid ="{{product.id}}"></div>
    
    
    <div class="wk_seller_detail_logo" data-productid ="{{product.id}}"></div>
    Instruction for Marketplace

    Follow the below process to paste the code:

    • Go To Themes
    • Click on Customize Theme button
    • Click on Edit HTML/CSS button
    • Select product.liquid file from the Templates where you want to show the link
    • Paste the code
    • Click on save

    Edit/Change the Labels of the field

    Admin can edit or change the labels as per requirement.

    Go to Sellers “Shop Page Settings” from the main menu of the app as shown below.

    Admin Dashboard

    You can change the labels as shown in below screenshot:

    Change Labels

    Display of seller products on the seller profile page

    All the products of that particular seller will be displayed on the seller profile page itself.

    The updated seller profile page with the banner and the configuration set by admin will look like this.

    Seller Profile Page 11

    SELLER COLLECTION:

    Now you can create seller collection pages instead of a seller profile page with all the similar seller information from the: Admin panel >> sellers >> seller profile page settings.

    The seller collection page can be created in two ways i.e, with collections OR without collection.
    With collection: Select this if you want to create collections corresponding to all sellers on the Shopify side.
    Without collection: Select this if you want to display the collection pages without creating the collections for all the corresponding sellers on the Shopify side.

    NOTE: Please check carefully before saving the changes whether you want to select “with collection” or “Without collection” as once the collections are created selecting “with collection”, you will have to delete the collection manually in case you want to change the seller profile type to “without collections“.
    Also if Merchant have more than 5000 sellers than we would recommend to not use with collection for Seller profile type.

    screenshot-akram-sh.webkul.com-2022.03.07-22_16_58

    Please NOTE: On updating the seller profile type, you need to regenerate the seller category page from the “Storefront configuration” section here:

    screenshot-akram-sh.webkul.com-2022.03.07-22_32_41

    Also, please note: If you have a customized seller profile page and you want to change the seller profile type, you need to make some changes from the wk-seller-category.liquid file in your theme instead of regenerating the page as regenerating the page will vanish the custom work and populate the default seller profile page provided by us.
    If you want to change the seller profile type from “with collection” to “without collection” set the value to “0”
    If you want to change the seller profile type from “without collection to with collection” set the value to “1”

    screenshot-akram-store2.myshopify.com-2022.03.07-22_55_32
    screenshot-akram-store2.myshopify.com-2022.03.07-22_55_51

    CODE IMPLEMENTATION FOR SELLER COLLECTION PAGE:

    You need to add these codes for the seller collection pages:

    Copy following code into collection.liquid template before collection name and banner.
    {% section ‘wk-seller-category’ %}

    Copy following code into collection-template.liquid template and add class inside the collection banner and collection title div. To hide the collection banner and collection title from the Seller Collection page.
    “wk-collection-profile-hide”

    Copy following code into collection-template.liquid template and add class inside the parent div for products and filters. To hide the products when customer switches from one Tab to another( Seller Product , Feedback , Reviews, Policy, Description ).
    “wk-seller-products”

    NOTE: Now, the seller collection is now compatible with Shopify store 2.0.

    akram

    In the Shopify store 2.0:

    Follow the path to add seller category profile section shopify store > online store > customize > collections > add section > select, seller category profile and click on save button.

    ak5
    akram-2

    CODE IMPLEMENTATION OF SELLER COLLECTION PAGE FOR SHOPIFY STORE 2.0.

    You need to add these codes for the seller collection pages:

    Copy the following code into main-collection-banner.liquid template in the parent div.
    {wk-collection-profile-hide}

    Copy the following code into main-collection-product-grid.liquid template in the parent div.
    {wk-seller-products}

    Seller collection page on the storefront:

    The seller collection page will look similar to the seller profile page:

    screenshot-akram-store2.myshopify.com-2022.03.07-22_39_03

    Note:

    • Before proceeding further kindly make sure that the handle name should be the same on the Shopify seller collection end and multi-vendor seller end
    • In case Collection is not created then you can create it by going to Multivendor Admin Panel >> Sellers >> Sellers Listing >> Click on Three dots >> Select Edit >> On Edit Seller Page click on “More Action” Button >> Click on Create Collection as shown below.
    • In case you are not finding this button then kindly wait as it takes a little time to create a collection at the Shopify end.
    create-collection

    Demo

    Use below link and credentials to use the demo of the multivendor marketplace App for Shopify:-

    https://multivendor-marketplace-5.myshopify.com/pages/seller-profile

    Support

    In case of any further query, feel free to raise a ticket at http://webkul.uvdesk.com/ or drop a mail at [email protected]

    Thanks for reading this blog!!! 🙂

    . . .

    Leave a Comment

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


    2 comments

  • Muskaan Agrawal
    • Supriya Srivastava (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content