Section catalogue: products, collections and search
Every section for showing products, collections and search results on your store, what it displays, and how to control the layout and behavior.
বাংলায়: এই সেকশনগুলো আপনার পণ্য, কালেকশন এবং সার্চ রেজাল্ট দেখায়। প্রতিটি সেকশনের নাম, কী দেখায়, এবং লেআউট সেটিংস এখানে আছে।
Where to find it: When you add a section, the picker shows these sections grouped by function. Some only work on specific page types (like Product page or Collection page).
Product sections
Show individual products or curated lists of products on any page type.
Product list
A horizontal rail or grid of product cards from one collection you pick. Cards show the product image, title, price and variant swatches (if any). A static header above displays the collection title and a "View all" link.
Key settings:
- Collection (which collection's products to show)
- Type (grid, carousel, or editorial/organic layout)
- Product count (1 to 16)
- Columns (1 to 8; mobile columns: 1 or 2)
- Horizontal and vertical gap (0 to 100px)
- Carousel mode on mobile (toggle; if off, switches to grid)
- Navigation icons for carousel (arrows, chevrons, large variants, or none)
- Icon background (none, circle, square)
- Section width (page or full width)
- Alignment (left, centre, right)
- Background color
- Top and bottom padding
Product recommendations
Related or complementary products linked to the product currently being viewed. On a collection or home page, it uses the same-collection fallback.
Key settings:
- Product (pick a specific product; blank uses the page's product)
- Type (related or complementary)
- Layout style (grid or carousel)
- Product count (3 to 10)
- Columns, mobile columns and gaps (same as Product list)
- Carousel navigation options
- Section width, alignment, background, padding
Carousel
A horizontal scroller of blocks. Most common use: a gallery of theme-provided card blocks (each with an image, title and description).
Key settings:
- Columns (1 to 8)
- Mobile columns (1 or 2)
- Section width (page or full width)
- Horizontal gap (0 to 100px)
- Background color
- Navigation icons and icon background
- Top and bottom padding
Product highlight
One picked product displayed large: a full image beside a card with title, price, a quick-add variant picker, and purchase buttons.
Key settings:
- Product (which product to show)
- Media position (left or right)
- Background color
- Top and bottom padding
Featured product
A single merchant-picked product on any page: a carousel media gallery beside a details column (title, price, variant picker, purchase buttons). Does not include the sticky add-to-cart bar.
Key settings:
- Product (which product to show)
- Section width (page or full width)
- Media position (left or right)
- Equal columns (toggle) and option to limit details width
- Gap between media and details (0 to 48px)
- Background color
- Top and bottom padding
Product hotspots
An image with clickable markers ("shop the look"). Each marker opens that product's details in a popup. Use it to let shoppers buy items from a photo.
Key settings:
- Image
- Media overlay (color, style: solid or gradient, direction up/down)
- Section width (page or full width)
- Section height (auto, 21:9, 16:9, 4:3)
- Hotspot color and inner color (for the markers)
- Background color
- Vertical gap between hotspot and popup (0 to 50px)
- Product typography for title and price in the popup
- Top and bottom padding
Collection and search sections
Display store collections or the results of a shopper's search query.
Collection
The main grid on a collection page. Shows all products in that collection with filtering, sorting and pagination or infinite scroll. Cards display product image, title, price and swatches.
Key settings:
- Type (grid, or editorial/organic layout)
- Card size (small, medium, large, extra large; grid only)
- Mobile card size (small = 2 per row, large = 1 per row)
- Auto-load on scroll (toggle) — if off, shows pagination with products-per-page (8 to 36)
- Columns (1 to 8; grid only)
- Mobile columns
- Column and row gaps (0 to 50px)
- Left and right padding
- Section width (page or full width)
- Full width on mobile (toggle)
- Background color
- Top and bottom padding
Collection list
A rail or grid of collection cards (image + title) from collections you pick, or all store collections if you pick none.
Key settings:
- Collections (pick up to 50; blank shows all)
- Type (grid, carousel, bento, or editorial)
- Columns (1 to 8)
- Mobile columns (1 or 2; carousel shows card count)
- Gaps (horizontal, vertical, or bento)
- Carousel mode on mobile (toggle)
- Carousel navigation icons
- Section width, alignment, background, padding
Collection list (template)
Like Collection list, but shows every published collection without a picker. Appears only on the Collections template page.
Key settings:
- Same settings as Collection list
- Wider default padding (48px top/bottom)
Collection links
Collections as a typographic row. Can show images and names (spotlight layout) or names only (text layout).
Key settings:
- Collections (pick up to 50)
- Layout (spotlight with image, or text names only)
- Section width (page or full width)
- Alignment (left, centre, right)
- Image position (left or right; spotlight only)
- Background color
- Top and bottom padding
Search
Appears only on the search results page. A static heading and search input at the top.
Key settings:
- Alignment (left, centre, right)
- Background color
- Top and bottom padding
Search results
The results grid on a search page. Works like the Collection grid — shows products matching the search term.
Key settings:
- Same as Collection (type, card size, auto-scroll/pagination, columns, gaps, width, background, padding)
Template sections (required pages)
Core sections that are required on specific page types — Product page, Cart page, Blog, and custom pages. Most stores use the presets to start.
Product information
The main section on a Product page: a carousel media gallery beside a column of product details (title, price, variant picker, purchase buttons and description). Includes a sticky add-to-cart bar at the bottom of the viewport.
Key settings:
- Section width (page or full width)
- Media position (left or right)
- Equal columns (toggle) and option to limit details width
- Gap between columns (0 to 48px)
- Sticky add-to-cart bar (toggle; on by default)
- Background color
- Top and bottom padding
Cart
The main section on the Cart page. Displays the list of items in the cart and a summary sidebar (visible when the cart has items). Below you can add merchant blocks.
Key settings:
- Section width (page or full width)
- Background color
- Text color
- Top and bottom padding
Page
The main section on custom pages. A content-width column where you add your own blocks.
Key settings:
- Gap between blocks (0 to 100px)
- Background color
- Top and bottom padding
Blog posts (index)
The main section on the Blog page. Shows a responsive grid of article cards (newest first).
Key settings:
- Background color
- Top and bottom padding
Blog post
The main section on an individual article page. The article text and approved reader comments.
Key settings:
- Gap between blocks (0 to 100px)
- Background color
- Top and bottom padding
404 (not found)
The page shown when a URL does not exist. A centred column with customizable alignment and height.
Key settings:
- Section width (page or full width)
- Height (auto, small, medium, large, full screen)
- Alignment (left, centre, right)
- Vertical position (top, centre, bottom)
- Gap between blocks
- Background color
- Top and bottom padding
Other ways people ask this
- product section kivabe arrange korbo
- collection page design kore dibo
- search page layout
- product grid customize
- cart page setup
- blog section add korbo
- product recommendations setup
- carousel section
- collection links arrange
- পণ্য বিভাগ কোথায় রাখব
- সংগ্রহ পৃষ্ঠা কীভাবে সাজাব
- সার্চ ফলাফল পৃষ্ঠা
- পণ্য গ্রিড লেআউট
- blog post page kothay
- product list collection kothay
- carousel or grid product display
- filter with product sections
Related pages
- Edit sections and blocks — how to add and arrange sections
- Offers and COD pages — landing page and order form sections
Related guides
Checked against the product on 2026-10-02.