When you have an online shop, it is important to both display your products and do it in a way that promotes sales. The one.com Online Shop not only integrates seamlessly with the Website Builder, but it also has several options available for displaying and highlighting products.
In this article, you will find a short introduction to the different shop components and how to insert them into your Website Builder site.
- The Online Shop Components
- Inserting components in the Website Builder
- Editing the look and style of your Online Shop
The Online Shop Components
In Website Builder, there are three types of Online Shop components:
The All products grid
This is the main online shop component. When you insert this on a page on your site, it will display all your products in the way that you would normally associate with an online shop. Note that you can only use this component once on your website.
The Featured products and the Product widget
The Featured products component allows you to display a small selection of specific products, while the Product widget lets you highlight one single product from your online shop.
You can use each of these components as many times and on as many pages as you want. Both widget options are ideal for highlighting products that you want to boost sales for; use them on your front page to draw attention to your products right away, or perhaps on a subpage to accompany an extended product description.
Tip: It is also possible to link to specific categories in the All products grid. That way, your customers won't have to first find the shop on your site and sort through the products to find something specific; you can lead them directly to this category from any page on your site. To do this, you need to publish the shop, open it in a browser, select the category and copy the URL. This can then be inserted as a link in a button, an image, or a piece of text in Website Builder.
Inserting components in the Website Builder
- Drag one of the Online Shop components into your workspace, from the menu left on your screen
- Adjust the size and placement of the shop component to your liking.
- Click Edit to adjust the look and style of the shop component in Website Builder to your preferences.
- Click Save and Publish to make your shop or the product widgets available online.
Editing the look and style of your Online Shop
You can set, among other things, how many products are shown per row, the color and position of promotion labels and the location of your shopping cart.
1 - Top/bottom menu
- Image ratio - Select the image ratio of your products, for example, portrait or landscape.
- Crop - Check this box if you want to crop images so they are all shown in the same size.
- Card - Check this box to show your products on a card; the product and description are outlined with a rectangular border.
- Products per row - Set how many products (2-8) should be visible per row.
2 - Properties panel
- Style - Set the font, text color and accent color of your shop. You can also select how many products are visible per page and the text and style of the "Buy" button.
- Image style - Set the image ratio and whether to crop images. You can also set a hover color that becomes visible if you move your mouse over a product.
- Navigation - Set if you want to show the Category selector and the "Sort by" selector, allowing your visitors to sort and filter the products in your shop.
- Promotion labels - Set the position and color of promotion labels on your products. Go to the Online Shop administration to add a promotion label to specific product.
- Cart - Set the position of the shopping cart on your page.
The Featured products and the Product widget have almost the same customisation options as the All products grid. One notable exception is the Product button option which is where you change the look and position of buttons in the widget components.
Related articles:
