Enable Dark Mode!
how-to-customize-ecommerce-pages-in-odoo-15-website.jpg
By: Hasna VP

How to Customize eCommerce Pages in Odoo 15 Website

Functional Odoo 15 Website&E-commerce

Odoo offers an advanced platform to build an eCommerce page on the company website for selling products. The user will get various tools to design the eCommerce page in the Odoo Website builder. You can enhance the shop page with suitable snippets from the editing panel. Moreover, you will get the Customize button on each page on the Odoo Website that helps to customize the appearance of pages according to your requirements. You can provide various features on your eCommerce page using this button in order to attract customers to the products published on your page.

This blog will give you an insight into the appearance customization of the eCommerce page using the Odoo Website

The user can find the Customize button on Odoo Website as marked in the screenshot below. This button includes several features that can be used to improve the view of your eCommerce page.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

You can activate the required features from the given list according to your requirements. You can also customize the appearance of the eCommerce page using the HTML/CSS/JS Editor. The first important feature that can be activated with the help of the Customize menu is the Website Search Box. As we all know, a search bar can help a user to simplify the searching process by saving time and effort. By activating this feature from the Customize menu, Odoo will provide a search box on the eCommerce page which will guide a customer to locate required products on your page.

You can provide an option to add products to a cart by activating the Add to Cart button from the Customize menu. As the name indicates, this button will help the customer to add products to a cart. At the time you activate this feature from the Customize menu, a cart icon will appear in the preview of the product as marked in the screenshot below. A customer can collect required products in the Cart and purchase them later with the help of this feature.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

While publishing a product on the shop page, it is very important to give a brief description of the product. It will help the customer to get an exact idea regarding the uses of the products, warranty, and additional offers provided by the company. You can activate the Product Description feature from the Customize menu in order to add a description for products as shown in the image above.

It is possible to compare different products on your eCommerce page by activating the Comparison List feature.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

By activating this feature, the user will get a Comparison icon on each product that can be used to compare the price and features of a product with similar products on the shop page.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

You will get a compare icon on each product as marked in the screenshot above. This button will help you to add products to the compare list. The products added to the compare list can be seen at the bottom of the page. Click the compare list in order to compare the selected products.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

After comparing the features and prices of the selected products, you can add the required products to your cart with the help of the Add to Cart button.

By activating the Wishlist feature from the Customize menu, you can allow your customers to create a wishlist of their favorite products on the eCommerce page. Each product description will show the icon to add to the wishlist which can be used to add a product to your wishlist shown on the top of the screen as marked in the image below.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The Products tab in the Customize menu encompasses various features that help to enhance the product view on your eCommerce page. Using these features, you can allow your customers to easily locate their favorite products based on certain criteria.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

When searching for a particular product on your eCommerce page, you can provide different attributes and variants of that product to your customers so that they can easily select the most appropriate one according to their demand. The Attributes &Variants Filters option from the Customize menu will provide the facility to filter products based on various attributes and variants. When you configure a product in the backend, you are allowed to mention the attributes and variants of that product in order to show the on eCommerce filters.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The user will get the Attributes and Variants Filters as shown above.

Based on the budget of the customer, it is possible to filter products accordingly. You can use the Filter By Prices option to filter the products based on their prices. The customer can set a particular price range with the help of this feature and Odoo will filter products according to the selected price range.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

You can provide a Grid as well as a List view of products for your customers by enabling the Grid or List button from the Customize menu. This button can be used to select the view for products on your eCommerce page according to customers' demand.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

You will get another feature called List View (by default) in the Customize menu in order to set the List view as default.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The products can be viewed in a list by activating this option.

You can provide a complete image of the product by activating the ‘Images Full’ option.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The Show Sort By option will help the customer to sort products on your eCommerce page based on various criteria. This button is beneficial for customers for simplifying searching processes.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The customer can sort products based on Price- Low to High, Price- High to Low, Newest Arrivals, and Name.

In Odoo, the user can specify the eCommerce category of a product while configuring that product in the backend. This will help the customer to filter products based on the eCommerce Categories.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

These are the customizable features available on the main page of the eCommerce site. Odoo enables you to enhance the view of the product description page also with the help of the Customize menu. Let’s take a look at the customization of the product page by selecting a product from the eCommerce site.

Under the Customize menu, the user will get several options to improve the view of the product page as shown in the screenshot below.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

While making online purchases, you can provide alternative products for your customers as a part of the upselling strategies. This will help to improve online sales. On your eCommerce website, you can display alternative products by enabling the Alternative Products feature from the Customize menu.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

As you can see in the image above, the suggested alternatives can be seen below the selected product.

The Automatic Image Zoom feature can be activated in order to automatically zoom the image.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

You can provide a Buy Now button for customers to purchase a product directly for the product page without adding the product to any cart.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

Displaying ratings and reviews regarding a product will help the customer to get an idea about the product and make purchase decisions. You can display the ratings and reviews from your customers by activating the Discussion and Rating feature as marked in the image below.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The Image Zoom button will help the customer to zoom the image of the products. In order to get a separate list view of the variants of the product and product attribute table, you can use the List View of Variants and Product Attributes Table from the Custom menu.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

As you can see in the image above, the variants and attributes of the products can be seen at the bottom of the product page.

You can allow customers to select the required quantity of the product by providing a specific button. For this, you can activate the Select Quantity button.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

The user can adjust the required quantity of the product in the field marked in the screenshot above.

You can allow your customers to share product details through various social media platforms by providing sharing buttons. From the Customize menu, activate the Share Button and you will get several social media icons on your product page as shown below.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

While publishing a product on your eCommerce site, it is very important to show the terms and conditions of a product to your customers so that they will be able to know about the guarantee, shipping policy, return policy and many other policies offered by the company. In order to display the Terms and Conditions, activate the corresponding option from the Customize menu.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

You can provide a Wishlist button on the product page also with the help of the Customize menu.

We have discussed all customizable features available on the product page on your eCommerce website. Now, let’s take a look at the customization options available on the checkout page.

In order to specify extra information regarding the purchase, you can add an Extra Info step in the checkout procedures by activating the Extra Step Option from the Customize menu.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

By activating this feature, the customer will get a new window to specify feedback and reference regarding the purchase after confirming the address.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

It is possible to allow your customers to pay the amount of purchase using promo codes. In order to provide a field to specify the promo code, you can activate the Promo Code from the Customize menu.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

By doing so, the customer will get a specified field to mention the promo code during the payment process as marked in the image above.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

If there is any discount in the purchase amount, you can display it on the checkout page with the help of the Show Discount in Subtotal button. Activating this button will show the discount available in the subtotal.

how-to-customize-ecommerce-pages-in-odoo-15-website-cybrosys

Before confirming the payment, you can provide an additional field to the customer to accept the terms and conditions of the company. As you can see in the image above, activate the Accept Terms and Conditions checkbox from the Customize menu.

With the assistance of the Customize menu in the Odoo 15 Website Builder, a user can effortlessly customize the eCommerce page. This menu will help the user to enhance the view of the eCommerce website as well as improve the customer experience. Odoo offers simple but effective methods to customize the home, product, and checkout pages of your eCommerce site without any confusion.


If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 
whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message