Introducation
Introducing Shopzy, a versatile ecommerce template designed for both single-vendor and multi-vendor platforms. Built with Bootstrap 5 and powered by Webpack, Shopzy ensures a smooth, responsive, and modern interface that adapts effortlessly to any device. Whether you're creating a store for one seller or a marketplace for multiple vendors, this template provides a scalable, user-friendly foundation for your project.
Shopzy is a Progressive Web Application (PWA), offering an app-like experience directly from the web. This allows users to install your site, browse offline, and enjoy enhanced performance, all while staying cost-effective. With its clean design and flexibility, Shopzy is the ideal choice for businesses looking to build a high-quality ecommerce experience without compromising on features or usability.
Welcome to the Shopzy Ecommerce Template!
Hi there,
Thank you for choosing Shopzy—we're excited to have you on board! You're just a few steps away from unlocking the full potential of your ecommerce project. With Shopzy, you're backed by a reliable, versatile template designed to meet all your needs, and we’re confident that you'll love working with it.
Before you begin, we recommend checking out our comprehensive documentation. It’s filled with all the information you need to get started quickly and easily. From setup to customization, we’ve made sure the guide is straightforward and user-friendly.
f you ever need further assistance, our dedicated support team is here to help. While the documentation covers most topics, don’t hesitate to contact us through our support system if you encounter any challenges. We're always ready to offer quick solutions and ensure your experience with Shopzy is seamless.
Thanks again for choosing Shopzy. We hope it brings you as much success as we had in developing it!
Best regards,
The Shopzy Team
Folder Structure
When you unzip the zip, you will find following folder:
- assets/css — folder with CSS files.
- assets/fonts — folder with fonts files.
- assets/images — folder with all the images
- assets/js — folder with JS files.
- assets/scss — folder with SCSS files.
Head Files
<!-- Fonts Link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!-- Bootstrap Link -->
<link rel="stylesheet" href="./assets/css/vendor/bootstrap.css">
<!-- Style Link -->
<link rel="stylesheet" href="./assets/css/main.css">
Javascript Files
<!-- Bootstrap Js -->
<script src="./assets/js/vendor/bootstrap.js"></script>
<!-- Theme Settings Javascript -->
<script src="./assets/js/theme-option.js"></script>
Webpack installation
Install nvm or nodejs,here we are using nvm so that we can use different node versions. use following link to download node.js www.freecodecamp.org/news/node-version-manager-nvm-install-guide/
Please open the file Visual Studio Code Editor and open terminal.
# install latest node
nvm install latest
# Use latest node (here we have used 20)
nvm use 20
# check node version
node -v
# Install package
npm i
# Run Project
npm run build
PWA Setting
A web app manifest is a configuration file in JSON format that provides essential information about a Progressive Web App (PWA) to the browser. This file defines how the app should be displayed, accessed, and interact with the user's device, ensuring it looks and feels like a native application.
To make a PWA installable, it must include a manifest file with key details, such as the app's name, icon, theme color, and start URL. The manifest file is linked to the main HTML using a element:
<!doctype html>
<html lang="en">
<head>
<link rel="manifest" href="manifest.json" />
<!-- ... -->
</head>
<body></body>
</html>
Manifest File
{
"name": "Shopzy",
"short_name": "Shopzy",
"start_url": "index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#336aea",
"orientation": "portrait-primary",
"icons": [
{
"src": "./assets/images/icons/icon-72x72.png",
"type": "image/png", "sizes": "72x72"
},
Service Worker
A service-worker.js file enables your app to cache files and data, manage network requests, and control how and when the cache is updated. It is particularly useful for making your web app work offline or in low-network conditions.
To use the service worker effectively, you’ll need to specify which files to cache (such as all CSS and JavaScript files) and how to handle requests when the network is unavailable.
Variables
Shopzy has used variables in rgb format so it will easy for the developer to use opacity. for using this variable use this format: rgba(var(--theme-color), 1).
File path: assets/scss/_variables.scss
:root {
--theme-color: 51, 106, 234;
--secondary-color: 254, 182, 2;
--light-gray: 248, 248, 248;
--white: 255, 255, 255;
--black: 0, 0, 0;
--title-color: 34, 34, 34;
--content-color: 136, 136, 136;
--border-color: 233, 237, 255;
--rating-color: 255, 149, 51;
}
Font used
Shopzy has used google fonts which i.e. Montserrat, sans-serif. The font family can be change as per requirements. You can found other fonts at https://fonts.google.com/
Font code can be found in the _variables.scss.
<!-- Fonts Link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
/* fonts */
$montserrat: "Montserrat", sans-serif;
Icons used
We’ve integrated the Remixicon icon library into the template. This open-source collection offers hundreds of free, high-quality icons, providing you with plenty of options to enhance your website’s design.
You can use icon using i tag:
<!-- home icon -->
<i class="ri-home-line"></i>
Only for RTL
If you want to use RTL only, please apply the code below.
<!-- direction RTL -->
<html lang="en" dir="rtl">
<!-- bootstrap css -->
<link href="assets/css/bootstrap/bootstrap.rtl.css" rel="stylesheet">
Dark Layout
If you want to use Dark layout, please apply the code below.
<!-- Add class dark in body -->
<body class="dark-mode">
Setup Video
To assist with the installation process, please refer to the following video tutorial. It offers a clear, step-by-step guide for setting up the application from start to finish.
Additional Information
For further assistance or any questions, don’t hesitate to contact our support team!