Build Your Online Shop Effortlessly with Odoo Ecommerce

Ready to create your own thriving online store? In this step-by-step no-code tutorial, we'll guide you through building a fully functional indoor-plant shop using the Odoo Ecommerce module, taking design inspiration from the popular bloomscape.com and video lessons from Odoo Learn. 

This tutorial assumes you already have a working Odoo v17 instance on your machine, for installation guide, please visit here.

Step 1: Setting Up

Before we can start building, let's tackle a few quick preliminary tasks:

1. Activate Dependencies

The "Website" and "E-Commerce" modules will be the dependencies for us to get started, additional modules such as "Spreadsheet dashboard for eCommerce" can be added for more particular needs.

2. Website Information

If you already have an existing domain name and logo, go to Settings, navigate to the Website Info section and input your details. Our plant store's will look like this:

Step 2: Header and Footer

Your website's header and footer are like the frame around a captivating piece of art. They provide essential navigation and information, influencing a visitor's entire experience on your site.

Here's what to include in our design:

• Header:
  • Company Logo: Place your logo prominently for instant brand recognition.
  • Navigation Menu: Keep it simple with links to your most important pages (Shop, About Us, Contact, etc.).
  • Search Bar: Allow visitors to quickly find specific products or information.
  • Shopping Cart : Make it easily accessible for a smooth checkout process.

• Footer:
• Copyright Notice: Protect your website's content.
• Site Map: Provide a quick overview of your website's structure.
• Social Media Links: Connect with visitors on other platforms.
• Contact Information: Offer an easy way for visitors to get in touch.
• Newsletter Signup: Encourage visitors to subscribe for updates and offers

Step 3: Homepage 

Your homepage is often the first point of contact between your business and potential customers. Choosing a clean, cohesive layout and high-quality imagery makes sure our digital storefront both aesthetically pleasing and easy to navigate.

Some of the few useful pre-defined template blocks: 

• Image: Capture attention with a bold image and a compelling call to action.
• Features and Carousels: Highlight top-selling or new items.
• Text - Image: Tell your brand story and feature key information.
• Testimonial: Build trust with positive customer reviews.
• Previews & Partners: Drive traffic to your blog and establish industry expertise.

Here's how they look in our homepage design:

Step 3.5: Customized Template Blocks

Do you know that Odoo allows for saving and reusing our customized blocks:

Step 4: Adding Products

With our visually appealing homepage ready, it's time to populate the store with the star attractions – our products! 

Key steps to follow:

1. Naming the product
2. Setting a sales price
3. Adding a description
4. Uploading an image
5. Adding a button to allow customers to share the product
6. Adding a rating button
7. Including a block with instructions on how to buy the product
8. Saving and publishing the product listing

Step 5: Product Management

Having a variety of product options makes an attractive business, and having a well-organized product catalog makes it profitable.

1. Variants and Stock

Customers love options! Whether it's different colors, sizes, or materials, product variants boost appeal. But with this flexibility comes complexity. Thankfully to Odoo, this can be easily manageable:

Key steps:

1. Enable Variants: Begin by activating the "Variants" option in your Odoo website settings.
2. Create Attributes: In the "Attributes and Variants" tab of your product, define attributes like size, color, or material to establish your product variations.
3. Configure Each Variant: Add images, set unique pricing, and manage stock settings (e.g., out-of-stock behavior) for each individual product variant.
4. Set Stock Levels: Accurately input the quantity you have on hand for each variant.
5. Save and Review: Save your changes and preview your product pages on your website to verify that your variants and stock information are displayed correctly.

2. Category

Organizing our products lets customers more easily browse the catalog and improves the browsing experience:

Key steps:

1. Create a New Category: Access "eCommerce Categories" and configure a new product category, optionally adding an image.
2. Assign Category to Product: In the "Sales" tab of your product, activate the newly created category.
3. Customize Category Display: On your website, adjust the category's position (left or top) and choose whether to display it collapsed or expanded.
4. Highlight Products: In edit mode, change a product's layout and add a badge to emphasize it within its category.

For brevity, this tutorial will stay with only two categories: Best Sellers and New Arrivals

Here how it looks in the Shop page:

Step 6: Checkout and Payment

A seamless shopping experience is crucial for converting visitors into loyal customers, let's look to optimize this important process.

1. Checkout Customization

Giving your customers the tools to thoughtfully consider their purchases is a win-win! Wish-lists let them save favorite items for later, while product comparisons provide valuable side-by-side information. These features enhance the shopping experience and increase the likelihood of conversions.

 Here's what the Cart page looks like:

2. Shipping and Payment

Setting up shipping and payment methods is a necessary struggle, Odoo allows to activate different shipping options, configure a custom shipping method, and add payment providers to your shop.

Shipping methods:

• Access Settings > Shipping and activate desired options.
• (Optional) Allow on-site payment and picking in Settings > Shipping.
• In Configuration > Shipping Methods, configure or create new methods:
  • Set up provider, delivery product, invoicing policy, and integration level.
  • Define destinations and add a description (optional).
  • Save and publish changes.

Payment providers:

• Go to Configuration > Payment Providers and activate desired options.
• Configure each provider's settings (display name, maximum amount, countries) in Configuration.
• (Optional) Allow saving payment methods and set fees in Configuration.
• Set to test mode, add a journal, and publish to make the provider available.

The Payment page:

Congratulations! Your plant shop is flourishing. 

Let's have a final look at our homepage in its completion:

To fully launch your website, the next step is deployment on a hosting server – stay tuned for a future article covering this process.

In the meantime, why not explore Odoo deployment options with odoo.sh?