When you have an online store, it's important to display your products in a way that promotes sales. The one.com Online Shop integrates seamlessly with the Website Builder and has several options for displaying and highlighting products. Just drag one of the three Online Shop components to your workspace, adjust the settings to your liking and publish your website.
This article briefly introduces each shop component and gives instructions for inserting 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.
Featured products
The Featured products component allows you to display a small selection of specific products from your Online Shop. You can choose the individual products you want to display or slide the Feature entire category toggle under a category to display all items in a category. The widget will automatically update its display if you add items to a category or remove some from it.
Product widget
If you want to highlight one particular product, you can use the single-product widget. This widget lets you display one product with a "View details" and/or "Buy now" button.
You can use these two latter components as often as you like and on as many pages as you want. Both widget options are ideal for highlighting products you want to boost sales; use them on your front page to immediately draw attention to your products or perhaps on a subpage to accompany an extended product description.
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, the number of products shown per row, the colour and position of ribbons, 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 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 your shop's font and text colour. You can also select the number of products visible per page and row.
- Buttons - Set the text, font and style of the 'Add to cart' and 'Buy now' buttons.
- Navigation - Here, you can decide whether to show the Category selector or the "Sort by" selector, allowing your visitors to sort and filter the products in your shop. You can also activate the Search bar from here and edit the shop filters.
- Ribbons - Set the position and colour of ribbons (promotion labels) on your products. Go to the Online Shop administration to add a ribbon to a specific product.
The Featured products and the Product widget have almost the same customisation options as the All Products grid. However, note that the product widget does not have navigation options, and the 'Add to cart' button is unavailable.
Related articles: