Divi theme Shop Module |Wordpress Divi builder Documentation


Shop Module is a Module of Divi theme that helps you show products to any page. Shop module is used for WordPress e-commerce website. By using the Div Page Builder, you can easily use the shop Module. Divi Page Builder is a page builder that helps you shop for products for the shop page on the website. You can see the example of the Divi Shop module on the shop page of any WordPress website.

Documentation of divi theme shop module .

1. First, open the WordPress page in edit with the divi.

2. After opening the WordPress page in edit with the Divi, You have to insert a single row or a column.

3. After inserting a row or column you have to click on the insert model. After clicking on the Insert model you have to click on the shop module.

divi theme shop module

Now you have to do some settings in the shop module.
 Content
1. Type: Choose which type of products you would like to display.

I.Top-Rated Products
II. review product
III. FEATURED PRODUCTS
IV. Cell products
V. Products Categories
2. Product Count:- Define the number of products that should be displayed per page.

4. Columns Number:- Here you can choose how many columns to display

divi theme shop module example

5. Order By:- Choose your products should be ordered.

6. Background:- Here you can use the background color or background image or background video.

In this way, you can set the Divi Shop module. Now if you have to design, then you have to click on the design.

Design -

1. Image Rounded Corners: Here you can control the corner radius of this element. Enable the link icon to control all four corners at once.

2. Image Border Styles:- Here you choose the border style for the image border.
Image Border Width:- Choose the border with for image border.
Image Border Color:- Here you choose the border color for the image border.
Image Border Style:- Choose the border style for the image border.
Image Box Shadow:- Which box-shadow would you like to use for the image.
4. Text Text Orientation:- Alignment of text like (Left, center, right )
Title Text:- Use the tittle test here.
Title Font:- Choose the front for the title.
Title Font Style:- Styling for the title font.
Title Text Alignment:- Alignment of title text like (Left, center, right )
Title Text Color:- Choose the color for the title text. All colors are available.
Title Text Size:-How much size would you like to set for title text.

5. Title Letter Spacing:-Set the letter spacing of title.

6. Title Text Shadow:- Apply the shadow effect of the title text.

7. Price Text- Setting for the price text same like as title setting.
Price Font:
Price Font Style:
Price Text Alignment:
Price Text Color:
Choose custom Color
Price Text Size:
8. Price Text Shadow:- Apply the shadow effect on price.

9.Custom Margin:- Here you can use the custome margin for shop module ( Top margin,right margin,bottom margin,left margin)

10 . Custom Padding: Use custom padding like margin ( Top padding ,right padding,bottom padding,left padding)

In this way, you can easily design the shop module.

Divi Shop Model Demo -

To see the demo of the shop module, you have to open the same page of WordPress on which you publish the shop module.

divi shop module

Demo 2 -

divi shop module techno smarter
Please Share

Recommended Posts:-