Start your Online Shop
Publish your First Product through a Beautiful Page
Odoo’s ‘Inline Editing’ and Building Blocks approach makes creating product pages easy.
Let’s make a start with creating products in our webstore
- Create your first product to sell online.
- Set a price & add a nice picture.
- Makes sure you add some descriptive text about your product
- Add the Share snippet so that shoppers can share this page through social networks.
- And experiment with the Drag and Drop website builder tooling to create a beautiful product page
- Launch the “website” app
- Click "Go to Website" (top left)
- Go to shop (top right)
- Top right: New -> product
- Enter a Product Name > Continue
- Edit the price by selecting and modifying the price. Set here the price for the standard version of your product
- Upload an image by clicking the “no camera” symbol on the webpage
- Add a text description about your product by dragging from the left toolbar a text block and completing it with a product description
- Don't hesitate to experiment with other controls taken from the left to create a stunning product page. Have also a look under the category "Features" in the toolbox to create visual and marketing impact for your product. If your page looks professional in all its aspects (marketing, text, layout, graphics), this will improve your scoring.
- Add a share block to make it possible to share this product page on social media
- Don’t forget to save (top right)
- And don’t forget to publish (slider top right, change it from "unpublished" to "published")
Activity step 2: create some beautiful products
- Create about 10 products of your choice as perfectly as you can. Some products should have the potential for variants. (like a different size or color). Don't create those variants as products - you will learn later in this course how one single product can have variation with a matching picture and price. Some of your products should be up or downselling alternatives for one of your products (for example a cheaper and a more expense smartphone alternative for the one the customer is looking at). Some of your products should be crosselling targets (for example, the matching protective cover for a smartphone your sell, a cork screw if you sell wine)
Set Product Attributes and Manage Variants
Selling online requires a simple and intuitive way for shoppers to find the product they want. Odoo gives you the opportunity to easily set attributes on products (size, color, power, etc.). Those attributes allow you to:
- search for them in order to easily find a product;
- manage and sell variants.
So the idea is to have a standard product, but to allow some variation of it, like a different color, more memory, a different size, a different packaging. But it should still be the same product though!
- Create a product available in several variants (e.g. T-shirts with sizes and colors). Each combination of attribute values is a variant.
- Add extra price amounts for one of those attributes (e.g. the gold color case is more expensive than the black one).
Replace the main picture of one variant.
Then, have a look at the product page of the online shop.
- You need to leave the website builder. If you are on the top level of the "website" app, you will see in the top bar a "Configuration" option. Click it
- Check if "Attributes" are enabled: Configuration > settings : look under "Product Catalog" and make sure you check "Attributes and Variations". This will make variations in color, size, etc... possible.
- Configuration > Attributes > Create (and now define the name of an attribute such as "size, color, capacity, packaging,...").
- Under type, you define the selection element which will be shown on the product page to select this attribute variation, such as a radio button, a selection, or color if you want a color selection...)
- Once done creating all attributes, you need to define the selection variations for that attribute. Go to Configuration > attribute values > create. Have there one line for each possible value an attribute can have. In the field "attribute" you will see a selection of the attributes you have already defined. Complete the column "value" with a possible value (one for each line). Use a short descriptive text for "value": it will be shown next to the radio buttion or other selection element, so make sure it is clear. For example, if your Attribute is "Packaging" (for drinks), then a Value could be "6-pack can 33cl"
- Tip: Don't worry about the fact that some of your products are not available in all Attribute Values. You will be able to indicate which values do exist for a given product.
- In case of "color", fill also the column "HTML color index" with an hexadecimal value preceeded by a sharp symbol (#). (Tip: hex colors #ff0000 is red, look up on https://www.color-hex.com/)
- You will now first have to publish those products which require variants. So go the the website builder, shop, and visit every product you want to have variants. Make sure you publish it (top right slider, mover from "unpublished" to "published")
- Leave the website builder, and make sure you are on the home page of the "website" app. Go to Catalog > products
- You should see some products now. If you don't see any, you forgot to publish
- Click on the product where you want to define some variants
- Cick tab "Variants". Hit "Edit". Add the variants and the attribute values you want to display for this product.
don' forget to save your work. You should of course select more than 1 value - it would not make sense to have only 1 value for a selection. In above example, you see we did set up green and blue for our grapes.
- If you now click the hierarchy symbol on the top where it says "n Variants", you will see a list view of the different variant combinations for this product. Hit edit to adapt the product picture so it will match your Attribute value (e.g. show a picture of "blue grapes" for the attribute value blue)
- Often, a variant will have a different price than the base version of the product. On the above picture, top left, you see "Variant Prices". Click this one. You will now see a list with the different attribute value combinations. If you want something to be more expansive than the base price, change the price from 0 to a positive amount which is the extra cost for this combination compared to the base product. You can also go for a negative figure in case there is a price decrease.
Activity step 3: create variants
- Create for 2 of your products variants.
- Have at least one of your products change picture depending e.g. on the color selected.
- Can you get the checkboxes changing color. (Tip: hex colors #ff0000 is red, look up on https://www.color-hex.com/
- Can you get a different price when a more expensive variant is selected?
Checkout in a couple of Clicks!
Lets check if you can now already buy something from the webshop.
- Add some products to your cart.
- Review the order and process the checkout.
- Enter a specific delivery address.
- Because you are connected as the admin, feel free to customize all the pages you come across by changing the displayed titles, explanations, etc. For instance, add the payment instructions in the Confirmation page (bank account, delay to pay, post-payment process, etc).
- A confirmation e-mail is automatically sent to the customer.
- Have a look at the incoming orders: It should appear (probably under the unpaid orders if you didn't pay). The backoffice can now validate the order as soon as you get paid.
- You can apply Online payment methods & delivery methods (see below). If the customer pays through any online payment method, the quotation is automatically validated as an order if this platform confirms the payment processing to Odoo. THe shopper gets redirected to a Thank you page on your Odoo website.
- To build a nice custom Thank you page, perfom the checkout process while being logged in as a user with proper access rights. When you land on the page, you can customize it at will, using the Odoo Website Editor and its great building blocks.
- To automatically adapt tax rates to the client localization, have a look at the fiscal positions in the Accounting chapter.
Activity step 4: checkout and back-office
- Let a customer buy some of your products. (let him continue till checkout)
- Let a customer place some products in the cart, go to the checkout, but abandon just before confirming the purchase
- Let the backoffice sales have a look at the orders. You find this on the dashboard screen of the website app under "Order". There will also be a tile "Unpaid orders" you can consult.
- After an hour, you should also see an "abandonned carts" entry. Send a recovery mail to this customer suggesting some help from the backoffice sales.
- Take a snapshot of the order screen the backoffice employee can check as proof you did this. By the way, the default setting for "abandonned chart" is to consider is abandonned after 1 hour. You can set this on the Configuration>settings screen