-
Notifications
You must be signed in to change notification settings - Fork 0
Description
Feature Overview
The Live Theme Demo feature will allow Dokan marketplace administrators and store owners to view a live preview of any theme available in the theme marketplace. This demo will provide a fully functional showcase of how a selected theme would appear and behave within a live store environment. The demo will present different product categories, promotional banners, key eCommerce features (such as top deals, best sellers, and add-to-cart functionality), and navigation menus. This feature will allow users to evaluate themes on both desktop and mobile devices before committing to applying them to their marketplace.
Requirements
Live Preview Functionality
- Admins and store owners should be able to click on a "View Demo Store" button for any theme in the theme marketplace.
- The demo must show how the theme would appear with sample data (products, categories, pricing, etc.).
- The demo should include a responsive design, accurately reflecting both desktop and mobile layouts.
- Key eCommerce features must be functional in the demo, including:
- Product categories: showcasing multiple types of products.
- Promotional sections: for displaying banners and marketing deals.
- Call-to-Action buttons: such as Shop Now and Add to Cart.
- Best Seller sections: featuring top products based on popularity or rating.
Product Page Demo
- Each demo must have a sample product page that displays:
- Product name, description, and price.
- Seller information.
- Reviews or rating sections (even if dummy data is used).
Add to Cart button functionality.
-
The product page should allow interaction, such as viewing product details or adding items to the cart.
Cart Page Demo -
The demo must include a cart page where selected products are displayed.
-
This page should show the following:
-
Product name, quantity, price, and total.
-
Cart summary with subtotals and totals (including tax and shipping estimates).
-
Functionality for applying coupon codes and proceeding to checkout.
Category Navigation
- The demo should showcase the theme’s category navigation system. It must support:
- Clicking on product categories and displaying a list of relevant products.
- Category filters (e.g., by price, rating, brand, etc.).
- This must be functional on desktop and mobile views.
Mobile Responsiveness
The demo should automatically adjust to different screen sizes, ensuring all features are optimized for mobile devices.
On mobile, users should be able to interact with key elements like product categories, promotional banners, and product pages as they would on desktop.
Exit or Apply Theme
There must be a clear "Back" button in the live demo to allow users to return to the theme marketplace.
A "Try Theme" button must also be displayed, allowing admins to apply the demoed theme to their live store directly from the demo screen.
Acceptance Criteria
Live Preview Functionality
-
Users can click on the "View Demo Store" button to see a fully functional demo of a theme.
-
The live preview displays sample products, categories, and promotions as they would appear on a real store.
-
The demo reflects the responsive behavior of the theme, accurately adjusting the layout for both desktop and mobile views.
-
Call-to-Action buttons, such as Shop Now and Add to Cart, are present and functional.
Product Page Demo -
The demo includes a sample product page showing product information, price, seller details, and an Add to Cart button.
-
Product reviews and ratings are visible (using dummy data if necessary).
Cart Page Demo
- Users can add sample products to the cart and see a functioning cart page.
- The cart page displays products, subtotal, tax/shipping estimates, and total price.
- The Apply Coupon and Proceed to Checkout buttons are functional in the demo.
Category Navigation
- Users can interact with category navigation, browsing products by category and using filters.
- The category system works across both desktop and mobile views.
Mobile Responsiveness
- The live demo is fully responsive, with an optimal layout for mobile users.
- Users can interact with the demo using mobile gestures, such as tapping on categories or products.
- Exit or Apply Theme
- A Back button is present to exit the demo and return to the theme marketplace.
- The Try Theme button is functional, allowing users to apply the demoed theme to their live store.