Avoori lets you build a beautiful Shop/Store/E-Commerce websites, making your clients want to come back and purchase more. If you have already purchased/upgraded your website to an Online Store, it is time to create a shop module to display your products, prices, and promotions on any page of your website.
This guide will explain how you can add a Shop Module to your page, customize its design, and demonstrate a use case example you can implement on your own Avoori website.
Insert a Shop/Store/E-Commerce Module
Jump to the page designer, to start editing the page where you wish to place the Shop/Store/E-Commerce module.
Modules can be added inside rows, so be sure to create a row first where you want the shop items to appear. Then, add a new module by clicking on the gray plus icon. Choose the shop module from the list. If you prefer to find the module automatically, it’s also possible to type “shop” in the search bar on top.
Next, let’s get busy with customizing it!
The contents tab includes the following options:
Under the content option, you can define the type of products you will display in your feed. You can present Recent, Featured, Sale, Best Selling, Top Rated or Product Category. Make sure to add and manage your products on the Products panel of your website admin menu, as this is the data that will show on the module.
Pick the number of products to be displayed.
Select the number of columns to display.
Choose how to order your products. You can sort by popularity, rating, date or price.
You can enable pagination on your module by selecting this option.
If you want the shop module to open a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the Module Design
With these settings, you can customize your design.
When hovering over a product, an icon will appear. Select here that icon and its color and also pick the fading color that will display over an item and its text and icon when someone hovers over it.
A sales badge will appear over the discounted product. Here you can select the color of the badge’s background.
Customize the corners, borders, shadow, and color tone of your product image.
Control how your product text is displayed in terms of alignment and text shadow.
Define the font, color, alignment, line height, and other settings for the title of the product.
You can also adjust the font settings for the price text.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your shop module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Let’s show an example of how to display our five most popular products that are on sale.
On the shop content settings, we can select the options.
- Type: Sale Products
- Product count: 5
- Columns number: 5
- Order by: Popularity
Now, we customize the design options.
- Icon Hover Color: #e09900
- Sale Badge Color: #0c71c3
- Title Font Weight: Bold
- Title Font Size: 20px
- Price Font Weight: Italic
- Price Font Size: 18px