Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Shop/Store/E-Commerce Module with the Website Page Designer

Shop/Store/E-Commerce Module with the Website Page Designer

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.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?