.png)
Introduction to the Project
Releaf Online is an e-commerce website developed on the Wix platform with design assets created in Canva. Its primary purpose is to offer users an easy-to-navigate online shopping experience while maintaining a visually appealing and functional design.
Objectives of the Project:
Build a fully operational e-commerce website using Wix.
Incorporate professional and consistent branding using Canva-designed assets.
Enable seamless shopping cart integration and payment processing.
Ensure a responsive and user-friendly interface for visitors.
This website's target audience includes individuals looking for streamlined online shopping, particularly those seeking curated and niche products.
Planning and Design
The design and layout of the Releaf Online website were planned to ensure a professional and cohesive look. Canva was used to create the visual assets, including banners, logos, and promotional images.
Design Process in Canva:
Setting Brand Guidelines: The colour palette, typography, and brand identity were defined, ensuring uniformity across the website.
Creating Graphics: Using Canva's templates, custom images for the website header, banners, product showcases, and call-to-action buttons were designed.
File Export: All design files were exported in high resolution and formats compatible with Wix, such as PNG and JPG.
Wix E-Commerce Website Development: Step-by-Step Process
Wix was chosen for this project due to its user-friendly drag-and-drop interface, robust e-commerce capabilities, and easy customization.
Step 1: Setting Up the Wix Account and Choosing a Template
Account Setup: A Wix account was created by visiting Wix.com and signing up with the required credentials.
Template Selection: A suitable e-commerce template was chosen from the Wix template library. Templates designed specifically for online stores were explored.
Customization: The selected template was customized to align with the Releaf Online branding created in Canva.
Step 2: Customizing the Website Pages
The following key pages were created and customized:
Home Page: Included a hero banner, featured products, and quick navigation links.
Product Page: Showcased detailed product descriptions, images, and pricing.
About Us Page: Added a brief overview of the brand.
Contact Page: Integrated a contact form for customer inquiries.
Steps for Page Customization:
Drag-and-drop tools were used to add text boxes, images, and buttons.
Canva graphics were uploaded into Wix using the "Upload Media" option.
Product categories and call-to-action buttons were linked to relevant pages.
Step 3: Uploading Canva Design Files to Wix
On the Wix Editor, the "Media Manager" was accessed.
Canva-designed assets were uploaded in PNG/JPG formats.
Graphics were strategically placed on pages for banners, headers, and product showcases.
Step 4: Creating Product Listings and Categories
Navigated to Wix Dashboard > Store Products > Add Products.
Uploaded high-quality product images with detailed descriptions, prices, and stock levels.
Created product categories to improve user navigation (e.g., Featured Products, New Arrivals).
Step 5: Setting Up the Shopping Cart and Payment Integration
Activated the shopping cart by going to Wix Editor > Add > Store > Cart.
Linked the cart to all product pages to enable a seamless checkout process.
Configured payment methods under Dashboard > Settings > Accept Payments. Payment gateways like PayPal and Stripe were enabled for credit card transactions.
Tested the cart functionality to ensure a smooth shopping experience.
Step 6: Configuring Shipping Options
Navigated to Wix Dashboard > Store Shipping & Delivery.
Set shipping rules based on geographical zones (e.g., flat rate shipping, free shipping for orders over a certain amount).
Added shipping labels and estimated delivery times.
Step 7: Adding Essential Website Functionalities
To enhance the website's usability and performance, the following features were integrated:
SEO Optimization: Added meta titles, descriptions, and alt text for images under Wix SEO Tools.
Contact Forms: Integrated forms using Wix's built-in contact form builder.
Mobile Responsiveness: Ensured the design was mobile-friendly using the Wix Mobile Editor.
Site Analytics: Connected Wix Analytics to monitor traffic and user behavior.
Screenshot:
4. Testing and Launch
Once the website development was complete, a thorough testing process was carried out:
Usability Testing: Ensured smooth navigation and functionality on both desktop and mobile devices.
Cart and Checkout Testing: Verified that the shopping cart, payment gateways, and shipping settings worked correctly.
Performance Testing: Checked the website's loading speed and optimized images for faster performance.
SEO Check: Ensured all pages were SEO-optimized for better visibility on search engines.
The website was then published using Wix's "Publish" feature, and a custom domain was connected.
5. Challenges and Solutions
During the development process, several challenges arose, which were addressed with practical solutions:
Challenge | Solution |
Aligning Canva design elements in Wix | Used Wix's alignment tools and gridlines to position elements accurately. |
Optimizing product images for speed | Resized and compressed images before uploading to Wix. |
Configuring payment gateways | Followed Wix's step-by-step guide to integrate PayPal and Stripe seamlessly. |
6. Conclusion
The development of the Releaf Online website using Wix and Canva successfully achieved its goals of creating a professional, user-friendly e-commerce platform. By leveraging Wix's intuitive tools and Canva's design capabilities, a fully functional online store was built with minimal technical expertise.
Key Outcomes:
A visually appealing website with consistent branding.
A seamless shopping experience for users with cart and payment functionalities.
Increased accessibility through mobile responsiveness and SEO optimization.
Future Improvements:
Integrate advanced marketing tools like email campaigns and loyalty programs.
Expand product categories and enhance the product filter options.
Implement customer reviews and ratings for better engagement.
The Releaf Online project highlights the power of combining Wix and Canva to create a professional e-commerce website efficiently and effectively.
Comments