Blocko

Top 29 Collection Product Grid Sections for Shopify (Updated Oct 2026)

Blocko has 29 free collection product grid sections for Shopify Online Store 2.0, from 15 themes across beauty. 28 ship as Shopify Liquid with merchant settings; 0 need no JavaScript at all. Each one has a live demo and a one-line prompt for your coding agent.

The list is ranked with Shopify-ready items first, then by the least JavaScript. Open any item to see its sections, settings and prompt, or use all sections by type to compare other kinds. Not affiliated with Shopify.

Compare at a glance

#NameThemeIndustryShopifyJavaScriptSettings
1Collection product gridBalmBeautyLiquid + HTML0.4 KB3
2Collection product gridBareBeautyLiquid + HTML0.4 KB3
3Collection product gridBlushBeautyLiquid + HTML0.4 KB3
4Collection product gridClipBeautyLiquid + HTML0.4 KB3
5Collection product gridDewBeautyLiquid + HTML0.4 KB3
6Collection product gridIsleBeautyLiquid + HTML0.4 KB3
7Collection product gridLatherBeautyLiquid + HTML0.4 KB3
8Collection product gridPrismBeautyLiquid + HTML0.4 KB3
9Collection product gridShelfBeautyLiquid + HTML0.4 KB3
10Collection product gridStubbleBeautyLiquid + HTML0.4 KB3
11Collection product gridTideBeautyLiquid + HTML0.4 KB3
12Collection product gridTintBeautyLiquid + HTML0.4 KB3
13Collection product gridTwistBeautyLiquid + HTML0.4 KB3
14Collection product gridVeilBeautyLiquid + HTML0.4 KB3
15Collection catalog gridBalmBeautyLiquid + HTML9.2 KB12
16Collection catalog gridBareBeautyLiquid + HTML9.2 KB12
17Collection catalog gridBlushBeautyLiquid + HTML9.2 KB12
18Collection catalog gridClipBeautyLiquid + HTML9.2 KB12
19Collection catalog gridDewBeautyLiquid + HTML9.2 KB12
20Collection catalog gridIsleBeautyLiquid + HTML9.2 KB12

Collection Product Grid sections

#1

Collection product grid

  • Balm
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#2

Collection product grid

  • Bare
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#3

Collection product grid

  • Blush
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#4

Collection product grid

  • Clip
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#5

Collection product grid

  • Dew
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#6

Collection product grid

  • Isle
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#7

Collection product grid

  • Lather
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#8

Collection product grid

  • Prism
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#9

Collection product grid

  • Shelf
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#10

Collection product grid

  • Stubble
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#11

Collection product grid

  • Tide
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#12

Collection product grid

  • Tint
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#13

Collection product grid

  • Twist
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#14

Collection product grid

  • Veil
  • Beauty
  • Shopify-ready

Responsive product listing with generic product names and prices.

0.4 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 3 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#15

Collection catalog grid

  • Balm
  • Beauty
  • Shopify-ready

Product grid with a promotional tile and progressive load-more behavior.

9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 12 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#16

Collection catalog grid

  • Bare
  • Beauty
  • Shopify-ready

Product grid with a promotional tile and progressive load-more behavior.

9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 12 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#17

Collection catalog grid

  • Blush
  • Beauty
  • Shopify-ready

Product grid with a promotional tile and progressive load-more behavior.

9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 12 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#18

Collection catalog grid

  • Clip
  • Beauty
  • Shopify-ready

Product grid with a promotional tile and progressive load-more behavior.

9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 12 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#19

Collection catalog grid

  • Dew
  • Beauty
  • Shopify-ready

Product grid with a promotional tile and progressive load-more behavior.

9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 12 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

#20

Collection catalog grid

  • Isle
  • Beauty
  • Shopify-ready

Product grid with a promotional tile and progressive load-more behavior.

9.2 KB JavaScript (vanilla Custom Element) · Shopify Liquid, 12 Theme Editor settings · category main-collection-product-grid

Live demo Details Open in browser

Frequently asked questions

What are the best collection product grid sections for Shopify?

Blocko lists 29 free, MIT-licensed collection product grid sections from 15 themes. 28 of them ship as Shopify Liquid today and the rest are complete HTML demos. The list is ranked with Liquid-ready items first, then by the least JavaScript, so Collection product grid from Balm comes first.

Are these collection product grid sections free to use?

Yes. Every item is MIT licensed, free to copy and edit, and needs no app or subscription. Blocko is not affiliated with Shopify.

How do I add one of these collection product grid sections to my Shopify store?

Open an item, copy its one-line prompt into your coding agent, or connect the Blocko MCP server at https://blocko.ai/mcp. The agent asks where the section should go before it changes any code.

Which industries do these collection product grid sections cover?

Beauty. Every industry with at least three matching items has its own list.

How much JavaScript do these collection product grid sections ship?

0 of 29 ship 0 KB of JavaScript. The heaviest is Collection catalog grid in Balm at 9.2 KB, registered as an idempotent Custom Element.

Related lists

Filter by industry

Filter by page type

Where these collection product grid sections are used.

Other sections

Markdown version for agents · Browse the full library · Connect your agent