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!
Define Contents
The contents tab includes the following options:
Type
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.
Product Count
Pick the number of products to be displayed.
Columns Number
Select the number of columns to display.
Order By
Choose how to order your products. You can sort by popularity, rating, date or price.
Elements
You can enable pagination on your module by selecting this option.
Link
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.
Background
Add a background color, gradient, image or video to your module.
Admin Label
You can modify the module’s label for easier identification.
Customize the Module Design
With these settings, you can customize your design.
Overlay
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.
Sale Badge
A sales badge will appear over the discounted product. Here you can select the color of the badge’s background.
Image
Customize the corners, borders, shadow, and color tone of your product image.
Text
Control how your product text is displayed in terms of alignment and text shadow.
Title Text
Define the font, color, alignment, line height, and other settings for the title of the product.
Price Text
You can also adjust the font settings for the price text.
Sizing
Adjust the width of the module.
Spacing
Customize margins and padding sizes.
Border
Define the border’s corner, style, color and width for your shop module.
Box Shadow
Here you can enable box shadow.
Filters
Adjust the hue of the module as a whole.
Animation
Give an animation style to the module, like fading or sliding when it appears.
Advanced settings
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.
Use Case
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
So Simple.