12 Shop Loops For Divi 5 (Free Download)
Divi 5 makes it easy to design custom product grids without code. In this free pack, you’ll receive 12 Shop Loops, all Unstyled, so they inherit your site’s global design variables for color, typography, and spacing. Use them inside the Theme Builder to power shop, category, and product archive templates, or drop them onto any page to feature products.
Preview
Let’s take a look at all 12 Shop Loops included in this pack. The download is further down the post.
Download 12 Shop 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)
After you download and unzip, 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) → Full pack with all 12 loops combined.
How To Use The Shop Loops
Keep your download folder handy — we’ll import, then apply a Loop to a template.
1. Import Loop Items Into The Divi Library
Go to Divi → Divi Library. Click Import & Export at the top of your screen.
In the Import & Export Layouts modal, switch to the Import tab, then click Choose File and select your JSON.
Choose Unstyled — Shop Loops (All) (or any individual Loop Item) to bring them in.
Click Import Divi Builder Layouts to finish.
You’ll now see all 12 Shop Loop Items in the Divi Library.
2. Apply A Shop Loop In The Theme Builder
Go to Divi → Theme Builder and add a new template.
Inside the template, add a new section.
When the Insert Section modal appears, click the Add From Library tab.
Select a Shop Loop layout to add to the template.
Click Use This Section to insert the Loop.
In the Loop settings, ensure that Loop Element is enabled and ensure the following is selected:
- Query Type: Post Type
- Post Type: Products
Adjust the Order By, Order, and Posts Per Page settings.
Save the template and assign it to the views you want (e.g., All Product Archive Pages). Publish to apply across your store.
Alternative: Use A Shop Loop On Any Page
Open any page in the Visual Builder and click to add a new section. Select a Loop module and open the Loop settings. Ensure Products is selected in the Post Type field and adjust the number of products to suit your preferences.
Customizing Your Shop Loops
These Loop Items are intentionally Unstyled — they inherit your Global styles and adapt to your brand out of the box.
1. Update Global Styles Once & See Changes Everywhere
Use Global Design Variables to adjust colors, fonts, and spacing. Because the loops are Unstyled, every card updates automatically across your site.
2. Tweak Modules Inside Each Loop Item
Open a Loop Item in the layout and adjust any module within it. For example, you can adjust the Heading text size of the product’s title just like you would any other Divi module. The difference is that when you adjust any design setting within the loop, all other instances update automatically. Making changes to the Loop is quick and easy.
Use Divi 5’s right-click menu to quickly copy module styles from other areas of the page to ensure design consistency.
Use the Inspector to quickly edit colors, fonts, and media across the Loop.
3. Control Layout With Grid & Flex
Within the Loop Row, adjust the Horizontal and Vertical Gaps, Column Widths, and Number of Columns.
Inside the Loop Column, use Layout Direction, Justify Content, and Align Items to fine-tune the card structure.
For example, add an Shop Now Button and pin it to the bottom.
4. Scale Changes With Find And Replace Or Extend Attributes
Need consistent tweaks across multiple Sections? Use Find And Replace for one-shot updates, or Extend Attributes to push style changes to matched modules across the template or page.
Tips For Better Shop UX
With a few strategic tweaks, you can take your WooCommerce store from functional to effective. These practical tips can help you create product Loops that guide shoppers effortlessly to checkout while reinforcing a polished look.
Responsive Columns
Use Divi 5’s Column controls to control how your layout displays on smaller screen sizes. Using the Number of Columns field in the Row’s Layout settings, you can easily make your Shop Loop look great on every device.
In Layout → Number of Columns, adjust the value for each breakpoint on the fly using the Responsive Editor, no code required.
Readable Titles
Keep product titles tidy on all screen sizes using Divi 5’s Design Variables. Create a Variable once and easily apply it across the Shop Loop and entire page. Pair with a 1.1-1.2em line height using Global Design Variables.
Visual Hierarchy
Lead with the product image, followed by a bold title, then price in a larger, contrasting font. Position the Shop Now button below so that it is always visible.
Hover Feedback
Add subtle hover effects on product cards or Add to Cart buttons to keep users engaged. Use Divi 5’s hover state controls to change colors or background gradients for increased engagement.
Start Building In Divi 5 Today
These 12 Shop Loops provide you with flexible, fast product grids for Divi 5, offering responsive, brand-aware designs that are easy to maintain. Because they’re unstyled, they inherit your Global Design Variables automatically, keeping colors, typography, and spacing consistent. They work seamlessly with Grid & Flex. Try building your next ecommerce store with Divi 5 today!
The post 12 Shop Loops For Divi 5 (Free Download) appeared first on Elegant Themes Blog.
The Tech Zone
Comments
Post a Comment