Start E-Commerce step by step with the Fabrity Starter Kit Package
Kamil Bogaczyk
Fri Feb 28 2025
Explore the Starter Kit Demo today!
BOOK A CALLListen to the guide instead of reading it, if you prefer.
Are you looking to launch or improve your e-commerce platform and want a reliable, efficient solution? The Fabrity Starter Kit for Magento could be the answer you’ve been searching for. Built on cutting-edge technologies and designed with user experience in mind, this e-commerce starter kit accelerates your online store’s growth while minimising effort and costs.
What is the Fabrity Starter Kit?
We built a seamless bridge between Open Source and SaaS solutions, combining the freedom and flexibility of Open Source with the rapid time-to-market and cost efficiency of SaaS.
Here’s an in-depth look at its functionalities, benefits, and how it works in practice.
The Fabrity Starter Kit combines Magento 2, a powerful e-commerce platform, with the Hyvä Theme—a modern, fast, and lightweight front-end solution. It comes equipped with a range of popular Hyvä UI components, designed to create a cohesive, visually appealing, and highly efficient online store. Fully WCAG compliant, accessible, and optimized for SEO and Core Web Vitals, it ensures a seamless and user-friendly experience.
This all-in-one solution is perfect for businesses that want to launch a high-performing e-commerce store with a polished design while operating within a limited budget. The Fabrity Starter Kit removes the complexity of crafting layouts from scratch, saving you both time and money.
Key Advantages of the Fabrity Starter Kit
Lightning-Fast Performance
The Hyvä Theme is known for its exceptional speed compared to the traditional Magento Luma Theme. Thanks to a lightweight architecture, reduced JavaScript files, and Tailwind CSS, web pages load in an instant. This ensures a smoother user experience, better conversion rates, and improved SEO performance.
Cost and Time Efficiency
The Starter Kit shortens development time by 30–50%, allowing businesses to go live faster. The inclusion of pre-designed components and a simplified tech stack keeps development costs low without compromising quality. It’s scalable too, leaving room for custom updates as your business grows.
Highly Customisable and User-Friendly
From prebuilt headers, menus, and banners to smooth product sliders and interactive footers, all components are easy to customise via Magento’s admin panel—no advanced coding required. This ensures your branding and style preferences are reflected effortlessly.
Fully Mobile-Responsive
All elements of the Fabrity Starter Kit are designed to adapt seamlessly to mobile devices. This includes responsive product carousels, banners, and navigation that ensure your online store looks great and functions flawlessly on smartphones and tablets.
Simplified Content Management
Small updates, such as changing banners, editing links in the footer, or updating product carousels, can be done independently via Magento’s CMS without requiring developer support. This empowers your team to take control of the store’s day-to-day operations.
WCAG Compliance and Accessibility
With support for WCAG standards, clear accessibility features, and compliance with regulations like Omnibus, the Fabrity Starter Kit ensures your store is inclusive and meets legal requirements.
Why Hyvä in Starter Kit
The Fabrity Starter Kit is built on the Hyvä theme, a well-known and trusted Magento 2 frontend framework. This not only ensures a modern and visually appealing design but also provides a stable and reliable foundation for your online store.
- With fewer JavaScript files and the use of tools like Tailwind CSS, pages load instantly, improving user experience and positively impacting SEO.
Hyvä Product Page Performance
Luma Product Page Performance
- The Starter Kit provides a consistent, aesthetically pleasing layout based on popular Hyvä UI components (header, menu, banners, sliders, footer, product carousels, etc.).
- All elements are fully responsive and adapted for use on mobile devices.
- Hyvä UI is fully compatible with Magento 2, which ensures simple integration with shop functionalities, additional modules or data from the admin panel.
- If necessary, certain sections can be extended or redesigned in the future based on Tailwind CSS and the slot system.
- Thanks to a ready-made set of key components and styles, there is no need to create a layout from scratch. You can easily customise your branding.
- This all translates into 30-50% less development time and therefore less expense.
- You can easily update content (banners, products in carousels, links in footer, etc.) without involving the development team - using standard Magento mechanisms (CMS, XML layout, configuration panels).
How Does the Fabrity Starter Kit Work in Practice?
Exploring the Core Features of the Homepage
The homepage on the Starter Kit has been designed to:
- Capture attention - eye-catching, professionally designed banners and visuals.
- Encourage engagement - interactive product carousels, sticky headers, and intuitive navigation.
- Ensure readability - a logical, responsive section layout.
- Easy to Edit - empower yourself to update and manage content effortlessly within Magento.
- Nurture best practice - high scores in Core Web Vitals while maintaining popular components
Sticky Headers (Header C-stacked) for Easy Navigation
- The sticky header keeps key elements (logo, menu, search bar, cart) accessible at all times, improving navigation and enhancing the customer experience.
- Layered layout: The ‘stacked’ version allows the top bar (logo, language, basket, etc.) and the navigation section (menu) to be displayed in separate layers.
- Sticky menus: We have added a ‘sticky’ mechanism so that the key elements of the header (logo, search engine, shopping cart, menu, wishlist, language selector) always remain on screen when scrolling down the page. This makes it significantly easier for users to navigate and access the search engine or shopping cart.
- Language selector: In the form of an opening popup that allows you to quickly switch between language versions. Designed entirely by Fabrity.
- Mega menu: An extensive four-column megamenu (B-4-column-megamenu) is placed in the header - ideal for shops with multiple categories.
Default Hyvä Header
Default Starter Kit Header
Hero Banners That Drive Engagement
High-resolution banners coupled with CTAs guide users to featured products, promotions, or new collections.
- Main, large banners presented in slider form. The user can move the slides with the arrows, and the ‘dots’ (pagination) show the number of available banners.
- You can insert graphics, advertising slogans, CTA buttons or any HTML content to encourage the user to navigate to certain places in the shop (e.g. promotion section, new collection).
- Depending on the screen resolution, the hero banner scales to maintain readability and appropriate proportions.
Product Carousels
Highlight bestsellers, new arrivals, or sales items in eye-catching sliders. These carousels allow users to explore multiple products effortlessly, driving up engagement and conversions.
- Carousels display, for example, recommended products, new products, bestsellers or promotions in the form of a sliding list of tiles.
- Each product tile includes price, availability, rating (rating with stars), choice of configuration (e.g. colour) and a button to add to the wishlist.
- Tiles end ‘in the middle’ of the last product to suggest that users can swipe through the list to see more.
- It is possible to define how many products should be visible at once and which categories/attributes should appear in the slider (e.g. only products from a particular collection).
Customisable Banners
- Whether it’s adding promotional messages or optimising for SEO with informative footer links, the customisable structure allows unlimited possibilities.
- In addition to the main hero banner, the Starter Kit allows smaller or larger banners to be inserted to promote further sections (e.g. seasonal collection, blog, events, news).
- The banners can be arranged in a variety of ways, either in a grid or as strips with a clear CTA.
Brand Slider
Showcase your partners or highlight key brands with image sliders, establishing credibility and trust with your customers.
- Presenting the logos of the most important manufacturers and partners in one place can strengthen the credibility of the shop. Additionally, we can include a ‘background’ image
- It works in a similar way to product carousels, allowing logos to move smoothly and reducing space on the homepage.
- You can easily adjust the number of logos visible, the size of the tiles, transition speed or effects (e.g. automatic scrolling).
Integrated Newsletter and Call-to-Action Modules
Increasing newsletter signups or driving attention to promotions is simple with pre-configured modules available right out of the box.
- Usually placed between sections of the homepage or in the footer, it encourages people to sign up to the mailing list.
- Magento 2 allows you to create additional sections (e.g. blocks with text, images, video) and insert them anywhere, which gives you a lot of freedom to expand the homepage and customise the layout for a particular client.
Customisable Extended footer (C-mega footer)
Like any Hyvä element, banners automatically adapt to smartphone or tablet screens.
- Several columns allow for the insertion of multiple links (e.g. to information pages, FAQ, blog), contact information or payment logos.
- Newsletter, social media, brief information about the company or its mission, legal policies, etc.
- You can edit individual blocks and columns in the Magento panel, without advanced development work.
Default Hyvä footer
Default Starter Kit footer
Intuitive Product Pages
The product page is optimised to provide clear, concise information, complete with features like size guides, colour swatches, customer reviews, and availability notifications.
The product page in the Starter Kit has been designed to:
- Provide key information - in a clear format (gallery, short description, reviews, price, availability).
- Make shopping easier - with intuitive selection of variants (size, colour), quick access to reviews, and easy addition to the basket or wishlist.
- Build trust - by showcasing reviews, ratings, and transparent pricing information (Omnibus).
- Increase conversions - through related product recommendations displayed in elegant carousels.
- Ensure compliance - with the integration of the Omnibus module, we help shops meet EU directives.
Product gallery (A-basic gallery)
- We use the A-basic gallery component, which presents the images in the form of an intuitive gallery.
- We adapted the component to the visual style of the theme so that the photos are clear and load quickly.
- Depending on the configuration, the gallery can have options to zoom in or switch between successive photos using thumbnails.
Review summary
- A product rating presented in the form of stars (e.g. 1-5), showing the average rating of the product.
- It allows the customer to see at a glance whether the product has a good reputation among other buyers.
Short description
- Helps to quickly convey the most important information about a product.
- The user can see key features (e.g. material, key functions, intended use) at a glance.
Size or colour selection (Rounded Swatches)
- We used Rounded Swatches, which allows different options (e.g. colours, sizes) to be presented in a user-friendly way with visual prompts.
- Instead of simply selecting from a list, the customer immediately sees the available options, e.g. rounded colour boxes or abbreviated sizes (S, M, L, etc.).
Price section
- The price of a product is one of the most important pieces of information on a page, so it is highlighted accordingly under the name or next to the description. We have used a different colour to make the product price visible.
- Magento 2 allows prices to be presented in different currencies by default - the integration with Hyvä maintains this functionality.
Availability Notification
- Users receive a clear message about whether a product is available and the expected delivery times.
- If a product is temporarily out of stock, customers can sign up for an email notification when it becomes available again.
Size Chart
- In industries like clothing or footwear, a size chart is essential to help customers avoid returns due to incorrect sizing.
- A link or button “Size Guide” typically opens a popup or redirects to a section with measurements and guidelines.
Customer Reviews Component (B-minimal)
- We’ve introduced B-minimal product reviews, which displays reviews and ratings in a clean, straightforward manner.
- Customers can leave reviews and ratings directly on the product page, building trust in the brand and product.
Omnibus Compliance Module
- In line with the EU Omnibus Directive, the lowest price from the past 30 days can be displayed (in the case of promotions).
- The installed module ensures price transparency and helps avoid errors in presenting discounts.
Related Products Carousels
- On the product page, carousels with related products are displayed, such as "You may also like," "Similar products," or "Buy together with."
- The carousels are tailored to match the rest of the site and have similar functions to those on the homepage (e.g. sliding, viewing price, ratings, and buttons for adding to the basket or wishlist).
- Displaying complementary or related items can encourage customers to make additional purchases.
Hyvä One Step Checkout
As part of the Starter Kit, we use Hyvä One Step Checkout, which significantly speeds up and simplifies the order completion process. Instead of several separate steps, the customer sees all the necessary fields and information on a single screen. This solution aims to increase conversion rates and streamline the shopping experience.
- We purposely do not display the header or footer on the checkout page to avoid distracting the user with additional elements.
- We focus all attention on completing the order, which statistically leads to higher efficiency (fewer abandoned carts).
- The checkout structure is clear and simple, allowing users to easily fill in the required fields (address details, payment methods, shipping, etc.).
- The layout has been tailored to customer preferences and based on user-friendly design principles, further encouraging quick order completion.
- The checkout design incorporates best practices in terms of WCAG and general guidelines for websites accessible to people with disabilities.
- Key elements (such as form fields and buttons) are appropriately marked and have clear labels to ensure they are easy to use, even with assistive technologies.
- Thanks to One Step Checkout, customers do not need to go through multiple steps (shipping, payment, review); instead, they can see all the necessary sections on one screen.
- This solution reduces the number of clicks and the time required to complete an order, improving the overall shopping experience.
Default Hyvä OneStep Checkout
Default Starter Kit OneStep Checkout
Our implementation enables the display of a product's historical lowest price, helping to meet new legal requirements for discount transparency.
This ensures the shop is legally compliant from the start and does not require additional modifications.
Best practices and recomended solutions for your Starter Kit configuration.
Home Page
- Language selector – supports international sales.
- Sticky menu – keeps header elements (logo, basket, menu) always visible.
- Notification bar above the header – easily share announcements (promos, free shipping, etc.).
- Expanded footer, menu, and header – space for links, info, and promotions.
- Newsletter sign-ups – built-in tool to gain subscribers.
- Simple, clean design – proven layouts popular across industries.
- Pre-built components (header, menu, banners, filters, carousels) save weeks of work.
- Easily customise layouts and branding to fit client style.
- Tailwind CSS tools allow quick adjustments to buttons, colours, fonts, and more.
Product Page
- Accessible design and code – clear labels, good contrast, large input fields improve usability and brand perception.
- Pre-built components (filters, carousels) save weeks of work.
- Hyvä's lightweight architecture (fewer JS files) enables faster loading times.
- Strong PageSpeed and Core Web Vitals scores improve Google rankings.
Checkout
- Collapsed discount code field – keeps checkout tidy and distraction-free.
- One Step Checkout – boosts conversions by simplifying checkout to one screen.
- No header or footer in checkout – reduces customer distractions.
Additional Features
- Proven solutions – tested in multiple projects, reducing error risk.
- Future-proof – Hyvä UI’s modular approach supports seamless expansion.
- User-friendly admin panel – Magento 2 offers advanced content tools, while Hyvä ensures a lightweight, modern front end.
- The store is nearly ready for launch, enabling faster sales.
- WCAG compliance ensured - Accessibility issues addressed.
Benefits to Your Business
- Faster Time-to-Market
Save weeks of development with a ready-to-use solution that requires minimal configuration.
- Improved User Experience
Optimised for speed and simplicity, the Starter Kit increases customer satisfaction and loyalty.
- Better SEO Rankings
Achieve strong Core Web Vitals scores and faster site speeds, critical for ranking highly in Google searches.
- Scalable to Your Needs
Easily expand features or adjust layouts as your business grows.
- Cost Savings
Lower development and maintenance costs mean you can invest more in marketing, product development, or other core areas.
Why Choose the Fabrity Starter Kit?
The Fabrity Starter Kit is not just a pre-configured solution; it’s a toolkit for success. Whether you're a small business entering the world of e-commerce or a medium-sized company looking for a cost-effective website improvement, this starter kit provides top-notch components, speed, and customisation options that are typically reserved for high-budget enterprises.
You don’t have to start from scratch, and you don’t have to compromise on quality.
Get Started Today
The future of e-commerce is here, and your business deserves a solution that keeps you ahead of the competition. With Fabrity Starter Kit, launching your Magento-based online store is faster, smarter, and more budget-friendly than ever.
Take the first step towards an optimised, scalable, and professional e-commerce presence today.
