The highly flexible website building system in Odoo 15 assists you in customizing web pages according to your needs in a professional way. As we all know that the appearance of a web page is a crucial factor in drawing the attention of visitors. Using the advanced customization tools in the Odoo ERP system, you can effortlessly design and customize each page on your website.
This blog is about the appearance customization of web pages in Odoo 15.
According to your business requirements, the pages on your website can be modified using the Customize option in Odoo. You can use the ‘Go-To Website’ button from the eCommerce dashboard of the Website module.
This button will lead you to your company website configured in Odoo. As you can see in the screenshot below, you will get the Customize button for each page on your website.
The Pages button will help you to manage pages and edit menus on each page. New pages can be easily added to your website using the ‘New’ button. Here, we are going to take a look at the appearance customization of Home, Shop, Events, Forum, Blog, Courses, Appointment, and Contact Us pages.
Home Page
For the Homepage of your website, you will get the HTML/CSS/JS Editor option that can be used to customize your homepage as per your requirements. Using codes, you can add features to the home page with the help of this option.
Additionally, you will get the Track Visitor option to track and keep a record of visitors of your website in Odoo.
Shop
The Shop page on your company website will act as the eCommerce platform for selling products. You can make this page more attractive by adding additional features. Use the Customize button to add more details about the product so that the customer can easily understand the offers you provide.
You can efficiently enhance the view of the Shop page by enabling required options from the Customize menu. Enabling the Website Search Box option will provide a search box on this page. This can be used to search for products on the Shop page.
The Add to Cart option from the Customize menu can be enabled to get the option to add required products to your cart from the preview of the product itself. As marked in the screenshot below, the cart icon will appear after enabling the corresponding option that can be used to add your favorite products to a cart. This will help you to collect required products in a folder and purchase them later whenever you want.
Activate the Product Description option to give a brief note regarding the product on the Shop page as shown in the image above. The product description will help a customer to understand the product and offer provided by your company.
The Comparison List option can be activated to allow comparing products on your website.
A customer can use this feature to compare products based on their price and features.
Using the Compare icon, you can add products to the compare list which will appear at the bottom of the Shop page as marked in the screenshot above. By clicking on the Compare button, you can easily compare the selected products.
The Add to Cart button can be used to add a product to your shopping cart.
You can allow your customers to add products to their wishlist by activating the Wishlist feature on the Shop page.
Under the Products field in the Customize menu, you will get the Attributes & Variants Filters, Filters By Prices, Grid or List Button, Images Full, List View, Show Sort By, and eCommerce Categories options to activate.
The Attributes &Variants Filters will help you to filter the products based on different attributes and variants. While configuring a product in Odoo, you can specify the attributes and variants of the product to show them on the eCommerce site.
As you can see in the screenshot above, you can select required attributes or variants from the given list and Odoo will filter the products accordingly.
Providing the Filter By Prices option for customers on the Shop page will help them to filter the product based on a certain price range.
The customer can adjust the price in the given field as shown in the image above. Based on the selected price range, Odoo will filter products for customers. By activating the Grid or List button from the Customize menu, Odoo will give separate options on the screen to view the product in the grid and list views.
Activating this option will help a customer to select a suitable view for the products on your website.
To get a complete image of products on the Shop page, you can activate the ‘Images Full’ option.
If you want to set the List View as default for the products on the Shop page, you can select the corresponding option from the Customize menu.
This option will arrange products in a list as shown in the screenshot above.
The Show Sort By option can be used to provide Sort By option to customers. This will be helpful to sort products based on certain criteria.
Using this feature, a customer can sort products based on Price- Low to High, Price- High to Low, Newest Arrivals, and Name. This option will simplify the searching operations for demanded products by customers.
While configuring a product in the backend, you can specify the eCommerce category of each product to display them on the eCommerce site. This will help the customer to filter products based on the configured eCommerce categories.
These are the customizable features available in Odoo 15 to enhance the appearance of the eCommerce page of your website.
Events
To provide more details about upcoming events and enrich the website view, you can customize the Event page effortlessly. The Show Sidebar option will display a side panel on the screen as shown below where you can include details regarding About Us, Country Events, Follow Us, Photos, and Quotes. The options to enable the corresponding features will appear after activating the Show Sidebar option.
The sidebar can be used to add details about the event or the company as per your requirements.
The Events on your website can be filtered based on countries using the Filter by Country option. By enabling this feature, customers can easily search for events based on a particular country.
You can provide another filtering option on the Event page based on the date of events by activating the Filter by Date option. The events can be filtered as Upcoming Events, Today, This Month, and Past Events.
The list of events can be arranged in a card-like structure using the Card Design feature from the Customize menu. The layout of the events can be set Columns to show the events separately as shown in the image below.
You can activate the Show Templates from the Customize menu to display the event template on each event description.
Forum
The forum page can be customized easily by using advanced features from the Customize menu that will help you to provide a user-friendly platform for website visitors. You can arrange the published forums in a list view by using the List View feature.
The Show Last Post option can be used to display the latest post published on each forum in the preview.
As you can see in the image, the customer will get an idea about the last post issued under each post. Using the Show Post Count feature, you can show the number of posts included in each forum. Regular forums and courses can be split using the Split regular forum/courses option. This will give a separate view of the regular courses and forums.
Blog
The Blog page on your website can be utilized to publish blogs about your company and the products & services you provide for customers. This page plays an important role in providing adequate knowledge about your business. So, you can customize this page to make it more attractive. Click the Customize button to get the list of features available on the Blog page.
You can enable the website search box to provide a search bar on the web page that will help visitors to search for any blogs on your website.
This feature lets your customers easily locate required blogs about a particular topic. The view of the blog page can be enhanced by adding information like Author, Comments/View Stats, Cover, and Teaser & Tags.
As you can see in the image above, the name of the author of each blog will be displayed on the respective blog that will help the customer to understand who wrote the blog. The number of comments and views can be also added to the screen by enabling the corresponding feature from the Customize menu. Teasers and Tags can be also added to the screen that will help to simplify the searching process.
The preview of each blog can be designed as a card like structure as shown in the image below.
To get this feature, you can use the Cards Design option from the Customize menu. The Increase Readability button will be helpful to attract readers to your blog by increasing the readability of the meta description of each blog.
You can allow the readers to view the blog page in a list view by activating the List View option. Additionally, you can able to add a sidebar on your blog page as shown in the image below.
In the Sidebar, you can include information about your blog or company, social media links, archives, and tags. This will help a customer to know more about your company and company services. The Top Banner option can be used to show the latest post in the banner.
When a customer visits your blog page, you can provide a view of the latest post from the banner itself. The corresponding option from the Customize menu can be activated to get the banner feature as marked in the image above. The banner in the image is set as a Full-Width Cover. If you don’t want to show the latest post on a full-width cover, you can turn off the feature from the Customize menu.
Help
The Help page on your website will serve as a platform to submit tickets regarding queries from customers. A customer can directly visit this page to add queries regarding the products and services that a company provides. From the Customize menu, you will get the Track Visitors option to activate.
This feature will help you to track the visitors to your website.
Courses
Customization of the Courses page will help you to add useful features for customers. These features can be utilized to improve the view of the web page. In order to provide a search bar for the customers to search for the required courses, you are allowed to activate the Website Search Box feature.
Using this feature, a participant can easily search for the courses provided by your company on the website. When a new post appears on the website, you can inform the visitor about the new post by adding a New Content ribbon as shown in the image below.
By adding so, the visitors can easily identify new content on your website. You can display the latest achievements of users with the help of the Display Achievements features from the Customize menu. As marked in the screenshot below, a visitor can observe achievements of other users on the right side of the screen.
Similarly, you can use the Display Leaderboard feature to show the leaderboard on the Courses page. Just like on any other page, you will get the Track Visitor option on this page also.
Whenever you create a new page on the website for any kind of business purpose, you can use the Customize menu to provide additional features on the new page. With the help of the advanced editing tools available in the Odoo Website Builder, you can design your pages in a professional manner. To know more about the editing tools available for designing your web pages, you can check the ADVANCED WEBSITE BUILDING BLOCKS IN ODOO 15 blog on our website.