Loading styles & counter
Choose what shoppers see while products load, and show how far through the catalog they are, under the products or on the Load More button.
Loading Style
- Placeholder products with a shimmer
- Slim bar across the top
- Animated bars with the loading text
| Style | What shoppers see |
|---|---|
| Free Indicator (default) | The spinner or dots from the Appearance tab. |
| Skeleton Cards | Placeholder products appear in the grid, matching your product layout, and are replaced by the real products. |
| Top Progress Bar | A slim animated bar across the top of the screen. |
| Bars | Animated equalizer bars with the loading text. |
| Pulse | A softly pulsing ring with the loading text. |
The Load More button always shows its own spinner while it loads, whichever style you choose. The Live Preview in the sidebar shows the selected style before you save.
Style settings
| Setting | Default | Shown for |
|---|---|---|
| Skeleton Cards | 4 (1–12) | Skeleton |
| Skeleton Color · Skeleton Shimmer | #e5e7eb · #f9fafb | Skeleton |
| Loader Color | #2563eb | Top Progress Bar, Bars, Pulse (the Free indicator keeps its Appearance color) |
| Loader Size (px) | 32 (16–80) | Bars, Pulse (their height) |
| Top Bar Height (px) | 3 (1–10) | Top Progress Bar |
Each setting appears only while a style that uses it is selected. Tip: set Skeleton Cards to the number of products in a row (or two rows). All styles stop animating for shoppers who prefer reduced motion, and screen readers still hear the loading message.
Product count
The Product Count card tells shoppers how far through the catalog they are.
Counter under the products
Adds a "Showing 24 of 60 products" line below the product list. Your theme's own result count is not affected.
Use %1$s for the number shown and %2$s for the total. Shown while the counter is on. Your theme's own count keeps its "Showing 1–36 of 40" range.
The counter appears only on archives with more than one page. With Numbered or Previous / Next pages it counts up to the end of the current page (page 2 of 18 per page shows "36 of 40"). It isn't shown on page builder grids, and it hides after an AJAX filter changes the results, because the new total isn't known.
Products left on the button
Adds how many products are left to the Load More button, e.g. "Load more products (24 left)", updated after each load.
Added to the Load More button. Use %s for the number of products left. Shown while the option above is on.
Works wherever the Load More button appears: the Load More mode, Hybrid after its automatic loads, and Load More + Show All. The count is left off when nothing is left, and on page builder grids.