Theme Testing
Overview
Before submitting your theme to the Fynd Platform, comprehensive testing is crucial to ensure compliance with platform requirements and to ascertain flexibility, resilience, and high performance. The following areas require testing:
- Mandatory Features:
- Integrate Fynd Platform Theme marketplace testing assets to verify the inclusion of required features and proper functioning when interacting with users.
- Use the review checklist for validation.
- Performance:
- Follow best practices to meet GTmetrix performance standards.
- The GTmetrix grade must be A.
- The page speed must be < 1.4 seconds.
- Please refer our Vue Framework Best Practice Guide to enhance the page speed of your theme.
- Browser Compatibility:
- Verify that website content displays correctly across different web browsers such as Chrome, Safari, Firefox, etc., without any issues or inconsistencies.
- Validate whether your theme supports older browsers using tools like BrowserStack.
Additional Testing Suggestions:
- Temporarily disable JavaScript using Chrome DevTools to confirm functionality and website appearance without JavaScript.
- Involve individuals outside of your organization for unbiased theme testing.
Other Testing Requirements:
- Usability Testing: Identify potential issues, obstacles, or pain points that users might encounter while navigating the website and completing various tasks.
- Responsiveness Testing: Ensure that the theme provides an optimal and consistent user experience across various devices and screen sizes.
- Load Time Testing: Assess website speed using optimization tools. Ideally, the page speed must be < 1.4 seconds.
- Content Testing: Review and format text, images, and media to ensure that the content resonates with the target audience, aligns with the brand's message, and ultimately enhances the overall user experience.
- Functional Testing: Test the various functionalities and features of the website to ensure that it works as intended and provides a smooth and error-free user experience
- Performance Testing: Assess the website's responsiveness, speed, stability, and scalability under various load conditions
- Visual Design Testing: Evaluate aesthetics, color scheme, and typography to ensure that the website's appearance is visually appealing, consistent, and user-friendly.
- User Feedback: Gather input from users through surveys or testing sessions. User feedback is invaluable for e-commerce businesses as it offers direct input from the target audience, helping to identify areas for improvement, gauge customer satisfaction, and make data-driven decisions to enhance the overall user experience.
Checklist
To assess your theme for the Fynd Platform Theme marketplace, use this checklist to ensure it fulfills the necessary functional requirements. While not exhaustive, this checklist assists in addressing edge cases that the theme review team will test during the review process. To conduct these tests, populate your store with data and configure additional features with the help of Catalogue Management. Performing these tests in both the theme editor and the storefront is recommended.
Home Page
Please incorporate the following sections into the home page and ensure their proper functionality:
- One Hero Image
- Three Image Slideshow
- Five featured products using an Image Gallery
- Three distinct Featured Collection
- One Collection Listing
- One Category Listing
- One Newsletter using the Extension section
- One Instagram gallery using the Extension section
- One Application Banner
- One Testimonial section with at least 5 testimonials
- Two Hero Video
Continue adding sections until there are a total of 15 sections on the homepage.
Header
Please conduct the following tests on your header and ensure the following:
- The storefront name or logo displays correctly and is accessible
- Header icons or links display correctly and are accessible
- The navigation functions correctly, and the navigation titles are apparent
Additionally, please consider the following:
- Add a fallback logo for the storefront logo.
- Add a logo and test different aspect ratios in portrait and landscape modes: 16:9, 4:3, 3:2, 1:1
- Use a transparent background for the PNG image of the logo
- Ensure the logo scales appropriately
- Test different positions and alignments for the logo, if applicable
Furthermore, include the following in your navigation:
- Single row navigation with 6 menus items
- Double row navigation with 10 menus items
- Test single-level (L1) navigation
- Test two-level (L2) nested navigation
- Test three-level (L3) nested navigation
- Use max 15-20 characters in a menu title
- Implement a mega menu, if applicable
Footer
Please perform the following tests on your footer. And ensure the visibility and functionality of the footer text, icons, and images:
- Links and Navigation:
- Verify that all footer links (e.g., About Us, Contact Us, FAQs, etc.) lead to the correct pages.
- Check that external links (e.g., social media profiles) open in new tabs.
- Ensure that the links are correctly styled and visually distinguishable.
- Include max 3 menu items in the L1 navigation
- Test L2 nested navigation with multiple menu items
- Use max 15-20 characters in a menu title
- Copyright and Legal Information:
- Confirm that the copyright information in the footer is up-to-date and accurate.
- Validate the presence and accuracy of any legal disclaimers or terms of service links.
- Payment Icons: Verify that any payment icons (e.g., Visa, Mastercard) displayed in the footer are correct and functional.
- Social Media Links:
- Confirm that social media icons and links in the footer lead to the correct social media profiles.
- Test that the links open in new tabs and display the correct icons.
- Test Social media icon colors are configurable
- Responsive Design:
- Test the footer's appearance and functionality on different devices (desktop, tablet, smartphone) to ensure responsiveness.
- Check that the footer elements are appropriately adjusted and remain accessible on various screen sizes.
- Newsletter Subscription:
- A newsletter subscription should be added through the extension
- Test the newsletter subscription form to ensure users can input their email addresses.
- Check that the form provides appropriate validation for invalid email formats.
Sections
Please conduct testing on the following sections within your theme:
- Hero Image
- Featured Collection
- Collection Listing
- Image Slideshow
- Image Gallery
- Application Banner
- Hero Video
- Testimonial
- Extension section: Newsletter, Announcement bar, etc. through the extension
- Other Custom Sections
Hero Image:
- Verify that the image and accompanying text are correctly displayed.
- Check that any links within the image or text lead to the intended destination.
- Ensure the section is visually appealing and responsive.
Featured Collection:
- Verify that the featured collection showcases the correct products from the selected collection.
- Test the links to the individual product pages within the collection.
- Ensure that the collection image, title, and description are correctly displayed.
Collection Listing:
- Check that all collections are listed with their respective images and titles.
- Test the links to individual collection pages to verify they lead to the correct pages
Image Slideshow:
- Check that the slideshow displays all the specified images or banners in the correct order.
- Test the navigation controls (previous/next arrows or dots) to ensure a smooth transition between slides.
- Test the links to individual slides to verify they lead to the correct pages
- Verify that the slideshow is responsive and displays correctly on different devices and screen sizes.
- Test the autoplay behavior of the slides
Image Gallery:
- Verify that all images in the gallery section are displayed correctly and are not distorted or pixelated.
- Ensure that image captions or descriptions, if present, are correctly displayed and aligned with the images.
- If the images are clickable or lead to product pages or other sections, test the links to ensure they direct users to the intended destinations
- Verify that the images in the gallery have appropriate alt text for accessibility purposes.
- Test the images on different devices and screen sizes to ensure responsiveness.
Application Banner:
- Verify that the application banner is displayed prominently on the home page.
- Test that the banner is visually appealing and attention-grabbing.
- If the banner is clickable, test the links to ensure they direct users to the intended destinations
- Test the banner on different devices and screen sizes to ensure responsiveness.
Hero Video:
- Verify that the video is correctly embedded and plays smoothly.
- Test video controls are present and functional
- Test auto-play and play video in a loop are present and functional
- Ensure that the video caption and thumbnail image, if present, is correctly displayed and aligned with the video.
- Check the video's responsiveness and ensure it adjusts to different screen sizes.
Testimonial:
The Testimonial section on an ecommerce home page showcases customer reviews and feedback about products or services. Here are some common test scenarios for this section:
- Verify that the testimonial section is displayed prominently on the home page.
- Test that the testimonials are visually appealing and formatted correctly.
- Verify that each testimonial includes the image, name & description of the customer providing the review.
- If the testimonial section displays multiple testimonials in rotation, verify that the auto-play rotation is smooth and not too fast.
- Ensure that the testimonial caption or heading if present, is correctly displayed and well aligned.
Extension Section:
Here, the extension section can be used to add new features to the home page through plugin extensions, such as the Announcement bar, Instagram, Newsletters, etc.
Other Custom Sections:
If the theme includes custom sections, test them as per their specific functionality and design.
Pages
Please test the following pages or templates in your theme:
- User Account Dashboard
- Login Page
- Register Page
- Profile Pages
- Order List Page
- Order Tracking Page
- Shipment Details Page
- Profile Detail Page to manage user account settings
- Home Page
- Product Listing Page
- Collection Listing Page
- Product Detail Page
- Cart Landing Page
- Checkout Pages
- Wishlist Page
- Search Result Page
- Landing Pages
- Collections Page
- Categories Page
- Blog Landing Page
- Blog Page
- About Us Page
- Contact Us Page
- FAQs (Frequently Asked Questions) Page
- 404 Error Page
- Promotional or Section Pages
- Policy Pages
- Privacy Policy
- Terms & Conditions
- Shipping Policy
- Returns Policy
User Account Dashboard:
- Test account registration and login processes, ensuring that users can access their account dashboard.
- Verify that users can view their order history, track shipments, and manage their account settings.
Home Page:
- Verify that all featured products and banners on the home page are displayed correctly.
- Test that navigation links to different sections of the Home page work as expected.
- Ensure that the home page loads quickly and does not have any broken links or images.
Product Listing Pages:
- Test product filters (e.g., price range, category, size, colors, brand) to verify that products are appropriately filtered.
- Check that the pagination or infinite scrolling works correctly for multiple product listings.
- Verify that sorting options (e.g., by price, popularity, new arrivals) correctly arrange the products.
- Test product tiles are visually appealing with or without filters and responsive on different devices and screen sizes.
- Verify back to the top icon works as expected.
- Verify that the hiding brand name works as expected.
Collection Listing Page:
- Verify that all listed products of active collections are displayed on the listing page.
- Test that each collection is represented by its respective title and breadcrumbs.
- Test product filters (e.g., price range, category, size, colors, brand) to verify that products in that collection are appropriately filtered.
- Check that the pagination or infinite scrolling works correctly for multiple products in that collection.
- Verify that sorting options (e.g., by price, popularity, new arrivals) correctly arrange the products in that collection.
- Test product tiles are visually appealing with or without filters and responsive on different devices and screen sizes.
- Verify back to the top icon works as expected.
- Verify that the hiding brand name works as expected.
Product Detail Pages:
- Check that all product details, including images, video, 3d models, youtube URLs, descriptions, and specifications, are accurate and displayed properly.
- Test the "Add to Cart" button to ensure it adds the product to the cart successfully.
- Test the "Buy Now" button to ensure that it successfully directs the user to the checkout page.
- Customers can add a selected variant to the cart
- Variant information changes dynamically when different variants are selected
- Customers are prevented from adding more than the available quantity of items to the cart, and they are informed with a meaningful message.
- Verify that image zoom works as expected
- Product Detail Page level configuration
- Seller Store Selection
- Show Seller
- Show Size Guide
- Mandatory Pincode
- Price tax label text. The default text is "Price inclusive of all taxes"
- Share
- Wishlist
- Extension support allows adding relevant extensions, such as ratings and reviews, size comparisons, etc.
Cart Landing Page:
- Test adding products to the cart and verify that they appear correctly in the shopping cart.
- Check that the cart shows the correct quantity and total price of items.
- Test the functionality and validation checks to update or remove items from the cart.
- Verify that an error message appears when customers try to add more than the available quantity of items to the cart.
- Verify that the modal or drawer works as expected when applying any coupons.
- Verify that guest users can checkout if guest checkout is enabled
Checkout Pages:
- Single page checkout making more convenient and faster for customers to complete their purchases.
- Test the checkout process for different payment methods (e.g., credit card, UPI, COD).
- Verify that shipping options and costs are accurately calculated and displayed.
- Test completing a purchase and verify that the order is successfully processed.
Wishlist Page:
- Test adding and removing products from the wishlist to ensure it functions correctly.
- Check that the wishlist retains the saved products for the user's future reference.
- Verify that the wishlist products added on the product listing, collection listing, or page details page are displayed correctly on the wishlist page.
Search Result Page:
Perform the following tests on your search page to ensure complete visibility of search result attributes:
- Confirm that the initial load restricts the number of displayed results.
- Test pagination functionality:
- Verify that pagination truncates search results with five or more pages.
- Test the searched product listing with "View More" and an "infinite scrolling" within the page (if available).
- Verify error detection and handling, such as when no results are found.
Landing Pages:
- Test the Collections, Categories & Blog landing pages that direct to their respective collection, category, and blog listing pages, respectively.
- Test landing page links from the navigation to ensure they lead to the correct landing page.
- Verify that landing pages have the intended content and call-to-action.
- Test the landing pages on various devices (desktop, tablet, smartphone) to ensure responsiveness.
- If the landing pages have more items, test pagination or infinite scroll to ensure smooth navigation between pages.
Blog Page:
Please perform the following tests on your blog page and ensure the following conditions are met:
- Test that blog posts display correctly, including images, text formatting, and comments (if applicable).
- Verify that blog categories and tags correctly filter blog posts.
- Ensure the accessibility and responsiveness of all posts in the blog across different devices and screen sizes.
- Visibility of blog post information, including title, excerpt, author, date, and comment count.
- Test a blog with a large number of posts.
- Test the "View more" button (if applicable).
- Test the infinite scrolling (if applicable).
About Us Page:
- Verify that the About Us page provides accurate and up-to-date information about the ecommerce business and its history.
- Check for any links to team members, company culture, or mission statement, ensuring they work correctly.
Contact Us Page:
- Test the contact form to ensure users can submit inquiries or messages successfully.
- Verify that the displayed contact information (e.g., email, phone number) is accurate.
FAQs (Frequently Asked Questions):
- Check that all frequently asked questions and their answers are accurate and relevant.
- Test the functionality of the search feature, if available, to find specific FAQs.
404 Error Page:
- Test accessing non-existent URLs to ensure the 404 error page displays correctly.
- Verify that the error page provides options to navigate back to the main website.
Promotional or Section Pages:
- Test any temporary promotional or section pages to ensure they display the correct promotional content.
- Check that promotional offers and discounts are accurately applied during the checkout process.
Policy Pages:
The below policy pages are common in ecommerce websites:
- Privacy Policy: This page outlines how the website collects, uses, stores, and protects user information and data. It informs users about their privacy rights and how their personal information is handled.
- Terms & Conditions: The Terms & Conditions page sets out the rules and agreements governing the use of the website. It covers aspects such as website usage, intellectual property rights, disclaimers, liabilities, and user responsibilities.
- Shipping Policy: This page provides information about the shipping methods, delivery times, shipping costs, and any related policies regarding the shipment of products to customers.
- Returns Policy: The Returns page outlines the procedures and conditions for customers who wish to return or exchange products they have purchased. It covers return eligibility, timeframes, and the process for requesting returns.
Rich Media
The integration of rich media into your theme needs thorough testing. Ensure that your storefront is ready for rich media testing before proceeding with the evaluation. The following features require confirmation of functionality:
3D/AR Features:
Ensure that users can view 3D models seamlessly on both desktop and mobile devices.
Video Behavior (YouTube, Vimeo, MP4):
- Validate the accessibility of video controls for users.
- Verify the functionality to mute and unmute videos.
- Confirm that users can play and pause videos without any issues.
Variant Display with Rich Media
- Ensure that variants associated with rich media elements display correctly when selected by users.
- Verify that the inclusion of rich media does not disrupt the product card layout on the collection page for the following media types:
- YouTube videos
- Vimeo videos
- MP4 videos
- 3D models