12 Shoploops for Divi 5 (Free Download)

Divi 5 makes it easy to design custom product grids without code. In this free plan, you’ll receive 12 Shop Loops, all unstyled so they inherit your site’s common design variables for color, typography, and spacing. Use them in the Theme Builder to enhance store, category, and product archive templates, or place them on any page to highlight products.

Example

Let’s take a look at all 12 Shop Loops included in this pack. The download is later in the message.

Download 12 store loops for Divi 5

Get all 12 Shop Loops for free. Import them into your Divi library and use them in the Theme Builder or on any page with the Loop Builder.

What’s included (13 exports)

Once you download and extract it, you’ll find **12 Unstyled Loop Item** exports plus **1 all-in-one pack**.

Unstyled — Individual loops (12) → Inherits your global styles.
Unstyled — All Shop Loops (1) → Complete pack with all 12 loops combined.

How to use the shop loops

Have your download folder ready: we’ll import it and then apply a loop to a template.

1. Import loop items into the Divi library

Go to Divi → Divi Library. Click Import and export at the top of your screen.

In the Import and export layouts modal, switch to the Import tab and then click Choose File and select your JSON.

To elect Unstyled — Winkelloops (all) (or an individual Loop Item) to bring them in.

Click Import Divi Builder layouts kill.

You will now see all 12 Shop Loop items in the Divi library.

2. Apply a store loop in the Theme Builder

Go to Divi → Theme Builder and add a new template.

Add a new section within the template.

When the Insert section modal appears, click on the Add from library tab.

Select a Shop Loop layout to add to the template.

Click Use this section to insert the loop.

Make sure this is done in the Loop settings Loop element is enabled and make sure the following is selected:

• Search type: Message type
• Post type: Products

Adjust the Order by, OrderAnd Posts per page institutions.

Save the template and assign it to the desired views (for example, All product archive pages). Publish to apply to your store.

Alternative: Use a store loop on every page

Open a page in Visual Builder and click to add a new section. Select a Loop module and open it Loop institutions. Take care of it Products is selected in the Message type field and adjust the number of products to your preferences.

Customize your shopping loops

These Loop pieces are intentionally unstyled: they take your Global styles and adapt directly to your brand.

1. Update global styles once and see changes everywhere

Use Global Design Variables to adjust colors, fonts, and spacing. Because the loops are Unstyled, each card will automatically update on your site.

2. Customize modules within each loop item

Open a Loop Item in the layout and adjust a module in it. For example, you can adjust the text size of the product title headline just as you would with any other Divi module. The difference is that when you adjust a design setting within the loop, all other instances are automatically updated. Making changes in the Loop is quick and easy.

Use Divi 5’s right-click menu to quickly copy module styles from other parts of the page to ensure design consistency.

Use the Inspector to quickly edit colors, fonts, and media in the Loop.

3. Control layout with grid and flex

Pass within the Loop Row the Horizontal and vertical openings, Column widthsAnd Number of columns.

Use in the loop column Classification Direction, Justify contentAnd Align items to refine the map structure.

For example, add a Shop Now button and pin it to the bottom.

4. Scale changes with feature search and replace or extend

Do you need consistent adjustments across multiple sections? Use Find and Replace for one-time updates, or extend attributes to push style changes to matching modules across the entire template or page.

Tips for a better store UX

With a few strategic adjustments, you can take your WooCommerce store from functional to effective. With these practical tips, you can create product loops that effortlessly guide customers to the checkout while enhancing a polished appearance.

Responsive columns

Use Divi 5’s column buttons to control how your layout appears on smaller screen sizes. Using the Number of Columns field in the row layout settings, you can easily make your Shop Loop look great on any device.

In Layout → Number of Columnsadjust the value for each breakpoint directly using the Responsive editorno code required.

Readable titles

Keep product titles organized on all screen sizes with Divi 5’s design variables. Create a variable once and easily apply it to the Shop Loop and the entire page. Combine with a line height of 1.1-1.2 meters using Global Design Variables.

Visual hierarchy

Start with the product image, followed by a bold title and then the price in a larger, contrasting font. Place the Shop Now button below so it is always visible.

Move over feedback

Add subtle hover effects to product cards or Add to Cart buttons to keep users engaged. Use Divi 5’s hover status buttons to change colors or background gradients for more engagement.

Start building in Divi 5 today

These 12 Shop Loops give you flexible, fast product grids for Divi 5, with responsive, brand-conscious designs that are easy to maintain. Because they have no style, they automatically inherit your Global Design Variables, keeping colors, typography, and spacing consistent. They work seamlessly with Grid & Flex. Try building your next ecommerce store with Divi 5 today!