Back to Top

Magento 2 Multi Vendor Responsive Template

Updated 8 April 2024

After creating the world’s best marketplace plugin for Magento 2, we are now going to release Magento 2 Marketplace Responsive Template. This theme will support all screens either you are viewing your marketplace store site on iPhone, iPad, Android-based mobile devices, or small or big screen devices it will work very fine on all screens.

Note: The theme supports both, Magento 2 default platform and Webkul Magento 2 Multi Vendor Module as well. This means the theme can also work independently without installing the Webkul Marketplace extension.

Watch the below video tutorial to understand the extension workflow :

H2gEdca9AiA

Features Of Marketplace Responsive Template

  • It will adjust your complete template view in screen format.
  • To adapt the responsiveness of Magento 2, we are not editing core templates or files, it’s a complete package.
  • working with all third-party, modules having responsiveness.
  • Easy to Make a review and contact the seller.
  • The product image gallery is already included in the template means for product thumbnails you don’t need to increase the area. The gallery will display the rest of the product images in the carousel format.
  • Admin can mark any product as “Featured” and “Seller’s Pick”.
  • Admin can choose the custom product labels for Products.
  • Mega menu supported.
  • Retina-based product zooming.
  • Complete flat design.
  • Social media sharing option included.
  • Lightbox product thumbnail zoom.
  • Working with all Magento 2 marketplace add-ons and modules.
  • Admin can enable and disable the RTL(Right to left) features.

Installation Of Magento 2 Marketplace Responsive Template

Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento 2 root directory on the server as shown below.

Installation Of Magento2 Marketplace Responsive Template

Searching for an experienced
Magento 2 Company ?
Find out More

After the successful installation, you have to run these commands in the Magento 2 root directory.

First command- php bin/magento setup: upgrade

cmd

Second Command – php bin/magento setup:di: compile
installation

Third Command – php bin/magento setup:static-content:deploy
php

After running the commands, you have to flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below.

Installation Of Magento2 Marketplace Responsive Template

Configuration For Multi-lingual Support

For multilingual support, the admin will navigate through Store->Configuration->General ->Locale Options and select the locale as German (the language into which the admin wants to translate his store content).

192.168.15.136_m246247_pub_admin_admin_system_config_edit_section_general_key_64cfc8171160bd6be76d60af4d0a216b19aa0c507b286cba394b23f44e7100aa_(Webkul store screenshots)

Magento 2 Marketplace Responsive Template Translation

If a user wants to translate their module from English to German then they need to follow the path app/code/Webkul/Agorae/i18n in their unzipped Magento 2 Agorae folder and will get a CSV file with name “en_US.csv”. Now they will rename that CSV as “de_DE.csv” and translate all right side content after the comma in the German language. After editing the CSV, save it and then upload it to the path app/code/Webkul/Agorae/i18n where they have installed Magento 2 on the server. The module will get translated into the German Language. It supports both RTL and LTR languages.

 Magento2 Marketplace Responsive Template Translation

Magento2 Marketplace Responsive Template Translation

The user can edit the CSV like the image below.
Magento2 Marketplace Responsive Template Translation

Configuration Of Magento 2 Marketplace Responsive Template

Admin will configure the Marketplace Responsive Template under Stores > Configuration > Agorae. Here the admin will configure the settings for the theme as shown below in the snapshot.

192.168.15.136_m246247_pub_admin_admin_system_config_edit_section_agorae_key_64cfc8171160bd6be76d60af4d0a216b19aa0c507b286cba394b23f44e7100aa_(Webkul store screenshots)

192.168.15.136_m246247_pub_admin_admin_system_config_edit_section_agorae_key_64cfc8171160bd6be76d60af4d0a216b19aa0c507b286cba394b23f44e7100aa_(Webkul store screenshots) (1)

192.168.15.136_m246247_pub_admin_admin_system_config_edit_section_agorae_key_64cfc8171160bd6be76d60af4d0a216b19aa0c507b286cba394b23f44e7100aa_(Webkul store screenshots) (2)192.168.15.136_m246247_pub_admin_admin_system_config_edit_section_agorae_key_64cfc8171160bd6be76d60af4d0a216b19aa0c507b286cba394b23f44e7100aa_(Webkul store screenshots) (3)

After this the admin will navigate through -> Content ->Design ->Configuration to set the layout for the theme.
192.168.15.136_m246247_pub_admin_admin_dashboard_index_key_6f4f4e2e284981fe1948cc713c9b5443fec8c2b94faa1dfe54bed02804549efb_(Webkul store screenshots)

Here the admin will click on the edit button, after which he can apply a different theme and select the layout for the theme.
192.168.15.136_m246247_pub_admin_theme_design_config_index_key_94888654023c948b00a5371922ac03fde535e61901719dd98e96150fef8d9a01_(Webkul store screenshots) (1)

After clicking the edit, another page will open up where the admin can select any installed theme to apply as shown below in the snapshot.
192.168.15.136_m246247_pub_admin_theme_design_config_edit_scope_default_key_df86b68709919e8507cef79a0f7f555aad7bb4c2fab34f3906c2aa78858f24f0_(Webkul store screenshots)

Product Settings

Admin can mark any product as “Featured” and “Seller’s Pick” and choose custom product labels for the products.

192.168.15.136_m246247_pub_admin_catalog_product_edit_id_1_key_dec08d881622a5219c7e138913236b55ca69f30e964d13c258c415c9f1dc5d42_(Webkul store screenshots)

Home Page Setting

At the homepage, the user can view an attractive slider and this can be configured by the admin from the backend.

NextJS provides ultra-fast speed due to server-side rendering and excellent image optimization using  Magento 2 Multi Vendor NextJS Theme. 

Configuration Of Magento2 Marketplace Responsive Template

Admin will navigate through Agorae->Manage Slider Images to set the images for the slider as shown below in the screenshot.
192.168.15.136_m246247_pub_admin_admin_dashboard_index_key_6f4f4e2e284981fe1948cc713c9b5443fec8c2b94faa1dfe54bed02804549efb_(Webkul store screenshots) (1)

Configuration Of Magento2 Marketplace Responsive Template

Now the admin will click on the “Add Image For Slider” to add the images for the slider as per the below screenshot.
Configuration Of Magento2 Marketplace Responsive Template

Add Images For Various Levels Of Categories

Now let us explain how the admin can set images for various level of categories from the admin panel.
Configuration Of Magento2 Marketplace Responsive Template

In the backend, admin can see top two first level category like the below image.
Configuration Of Magento2 Marketplace Responsive Template

The third level category will display on the homepage like the image below.
Configuration Of Magento2 Marketplace Responsive Template

Top third level categories will display on the homepage. Admin will also choose thumbnail images for those categories which will appear on the homepage.

192.168.15.136_m246247_pub_admin_catalog_category_index_key_c4b69e71620dee8805c2eb977cd11d6f5d455b2ef49905dc654812bd07a6f887_(Webkul store screenshots)

After the third level of categories, top four products of Marketplace will be displayed as shown below in the snapshot.
Configuration Of Magento2 Marketplace Responsive Template

At the end, top seller’s logo and name will be displayed. The logo which seller sets at their profile, that logo will appear on the homepage and their name.

Configuration Of Magento2 Marketplace Responsive Template

Agorae Home Page

frontend-home-page-1-1

On the product page, you can see the most popular products with Seller details. You can start your shopping from here. In above screenshot, you can see the seller who has sold out their maximum product. Here you can see the different categories at the home page with seller information and most loved stuff from delighted sellers.

Product Page

Here you can see the seller details on the product page.

product page

Category Page Grid View

Here you can see a Grid view of category page with Seller Information, Wishlist, and the Comparable Products.
Agorae Home Page

Category Page List View

List view of category page with Seller Information looks like this screenshot.
Agorae Home Page

Home Page Header Cart

You can see attractive product cart basket at the home page like this screenshot. Here the customer can see their products in the cart basket and from here they can redirect to cart page and proceed to checkout.

Agorae Home Page

Mega Menu

Here you can see the Mega Menu appearing under the Main category – “Women”. The Main category has it’s image and the sub-categories also have their identifiable images.
Agorae Home Page

Sign In

Using this field you can easily login to your account by entering your valid details.
Agorae Home Page

Sign Up

Using this field you can create your account without any difficulties.
Agorae Home Page

Seller’s Collection Page

At the Seller’s Collection page, the user can see products, Seller’s Pick, Reviews, Make a Review and Contact Seller tabs. On the banner, the user can see the seller’s logo, name, and location.

seller-collection

The seller can upload the Company logo and Company banner from their Seller Profile, you can follow the path My Account -> Seller Profile and upload the logo and banner as per the below screenshot.
Agore Home Page

Seller’s Pick

Here the customer can view products for which seller had enabled the Seller’s Pick while adding products.
Agore Home Page

At the front-end, Seller’s Pick is displayed like this image.
Seller's Pick

How to Add Product Labels

From the backend, the admin will select and upload various labels for products under Stores > Configuration > Agorae >Manage Product Images as shown below in the snapshot, and also enable the Right-to-left features under Store > Configuration > Agorae > Enable RTL to support languages that are written from left to right. 
Agore Home Page

On the front end, the seller can choose labels for their products while adding products.
Agore Home Page

When the admin enables  RTL features a product will look like this as shown in the below screenshots.

192.168.15.136_m24642_pub_test-category.htmlsnapshots

At the checkout page, the product is appear as shown in the below screenshots. 

192.168.15.136_m24642_pub_checkout_cart_snapshots

Support Default Magento 2 Agorae Theme

Now the Agorae theme also supports with default Magento 2.

Home Page

Category Page

Product Page

Customer Registration Page

Current Product Version - 5.0.2-p1

Supported Framework Version - Magento 2.0.x, 2.1.x, 2.2.x,2.3.x, 2.4.x

. . .

Leave a Comment

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


2 comments

  • Mohamed Hamza
  • 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