Cuddly Pets is a modern, responsive eCommerce template built with Bootstrap 5.3.3, designed specifically for pet shops.
dev and build folders)dev and build folders)- All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.
- This is not a WordPress theme, It is a HTML5 template
/buildThe build directory is automatically created when you run the npm run build command. It contains the final, processed files that are ready for deployment. This directory typically includes compiled CSS, minified JavaScript, optimized images, and other assets that have been prepared for production. The contents of the build directory are the final artifacts that are uploaded to the server, ensuring that only the optimized and production-ready files are deployed.
/devThe dev directory is created when you run the npm run dev command. It is used to store files and configurations specific to the development environment. This directory typically includes development configuration files and staging files used before the final deployment. It often features an integrated local server, such as browser-sync, to display real-time results during development. The dev directory helps streamline testing and development in a dedicated environment before moving on to deployment.
/gulpThe gulp directory contains files related to Gulp, a task runner used for automating tasks in the development workflow.
gulp/configContains configuration files for Gulp tasks, which may include environment settings and task-specific options.
gulp/tasksHolds JavaScript files that define various Gulp tasks such as compiling Sass, minifying JavaScript, and optimizing images.
/node_modulesThe node_modules directory is automatically created by npm and contains all the dependencies and modules required for the project to function. Its primary purpose is to store various Node.js modules and packages that the project depends on. This directory is managed by npm, and its contents should not be edited manually. Instead, npm handles the installation, updating, and removal of packages as specified in the package.json file. The node_modules directory is used internally by npm and the project to resolve and manage dependencies.
/srcThe src directory contains the source files for the project that are actively developed and will be processed for the final build.
src/assetsThe assets directory contains static assets used in the project, including:
src/assets/images: Stores image files used in the project.src/assets/js: Contains JavaScript files including application scripts and third-party libraries.src/assets/scss: Holds Sass (SCSS) files that will be compiled into CSS.src/assets/vendor: Contains third-party libraries or frameworks.src/viewsThe views directory contains HTML templates and components used for rendering the final pages. It includes:
src/views/blocks: Stores reusable HTML blocks or partials that can be included in other templates.src/views/components: Contains individual HTML components or templates.gulpfile.jsThe gulpfile.js is the configuration file for Gulp, a task runner utilized in this project. Its primary purpose is to define and configure tasks that automate various aspects of the development workflow, including file processing and asset management. The file contains JavaScript code that sets up Gulp tasks, including task definitions and their dependencies. It is used to define and execute Gulp tasks that streamline and automate development processes, making repetitive tasks more efficient and manageable.
package.jsonThe package.json file is essential for managing a Node.js project, containing metadata about the project along with its dependencies and scripts. It includes project details (like name and version), a list of dependencies (both runtime and development), and custom scripts for automating tasks such as building or testing the project. This file centralizes configuration and facilitates efficient management of project dependencies and automation.
package-lock.jsonThe package-lock.json file is automatically created and updated by npm to ensure consistent dependency versions across installations. It provides a detailed record of the exact versions and resolved locations of all project dependencies, ensuring that every environment uses the same dependency tree. This file helps maintain uniformity and prevents discrepancies between different installations of the project.
Your computer must have installed nodejs to run this template. We built this project using node version 20, so to avoid conflicting packages included in this project, we recommend using node version 20. You can watch the video to download and install
You must have to install packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.
After installing the necessary packages with npm install, you can build your project by using the following commands:
npm run dev This command starts a development server that watches your files for changes and automatically rebuilds the project. It allows you to preview your changes in real-time during development.npm run build This command compiles and optimizes your project for production, bundling and minifying your files into a build directory, ready for deployment.These commands help you develop and prepare your project for production efficiently.
Lazy loading is a performance optimization technique that delays loading images until they are needed—specifically when they are about to enter the viewport. This reduces the initial load time and bandwidth usage, making your website faster and more efficient.
This section describes how to implement lazy loading for images using the Intersection Observer API, with an exception for images with the class .logo-image.
<img class="brand-image" src="https://placehold.co/500x500"
data-src="assets/images/brands/Alleva-logo.png" alt="Alleva-logo">
<script>
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll("img:not(.logo-image)");
if ("IntersectionObserver" in window) {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // Replace src with actual image URL
img.classList.add("loaded");
imageObserver.unobserve(img);
}
});
});
lazyImages.forEach((image) => {
imageObserver.observe(image);
});
} else {
// Fallback for browsers that don't support IntersectionObserver
lazyImages.forEach((image) => {
image.src = image.dataset.src;
image.classList.add("loaded");
});
}
});
</script>
data-src attribute containing the actual image URL.src attribute is initially set to a placeholder image to reduce load time..logo-image class, ensuring logos and similar elements are loaded immediately.IntersectionObserver API is used to observe when these images enter the viewport.IntersectionObserver triggers, replacing the src attribute with the value from data-src.loaded with an additional CSS class for styling or further processing.IntersectionObserver, the script falls back to immediately loading all images by setting their src attributes from data-src.You can style images that are being loaded or have been loaded using the .loaded class:
img {
opacity: 0;
transition: opacity 0.3s ease;
}
img.loaded {
opacity: 1;
}
By incorporating lazy loading, your website will become faster, more efficient, and provide a smoother user experience.
This guide explains how to install a template using FTP.
Please ensure you have purchased and downloaded the template source files from ThemeForest before proceeding.
After purchasing the template from ThemeForest, download the source files to your local machine.
The source files will include a build folder among other necessary files.
Launch your preferred FTP client (e.g., FileZilla, Cyberduck, etc.) and connect to your hosting account.
Once connected, navigate to the directory where you want to install the template. Typically, this is the public_html directory or the root directory of your website.
Locate the build folder in the downloaded source files. This folder should contain the final processed files that are ready for deployment. If you haven’t already done so, run npm run build to generate these build files.
Upload all the files within the build folder to the public_html directory on your server. Make sure the files are uploaded to the correct location to avoid any issues with the template’s functionality.
After the upload is complete, visit your website to ensure that the template has been installed correctly. Check various pages to confirm that everything is displaying as expected.
All items included in this template package are either created by me or are properly licensed according to ThemeForest requirements.
For items that are not my own creations, I make an effort to include the license information within the item’s folder or in the initial lines of the related files.
If the license is not readily available, you may need to visit the item’s website (if a URL is provided) or contact the author directly to obtain the license details.
If you have any difficulties or problems, please contact us via email: serviceschaair@gmail.com
We truly appreciate and really hope that you'll enjoy our template!
If you like our template, plase rate us 5 star !