Collection Page

The collection page is one of the most visited pages in your store. This is where your customers browse, filter, and discover your products. Scale Theme offers a highly configurable Product Grid section that lets you control every aspect of the display.

Product Grid

Columns

The number of columns determines how many products are displayed side by side. You can set different values for desktop and mobile.

Setting	Options	Default
Desktop columns	1 to 5	4
Mobile columns	1 or 2	2

💡For most stores, 4 desktop columns and 2 mobile columns offer the best balance between product visibility and information density. Reduce to 3 columns if your product cards display a lot of information (variants, description, button).

Grid Layout

Four layout modes are available to vary how your products are presented:

Mode	Description
Grid (default)	Classic uniform grid, all products are the same size
Featured	The first product is highlighted (spans 2 columns and 2 rows on desktop)
Alternating	Every 5th product is expanded to 2 columns, creating a visual rhythm
List	Horizontal list display, image on the left and details on the right

ℹ️The Featured mode is particularly effective for highlighting a best-seller or a new product at the top of the collection. The List mode is ideal for products that need more context (description, specifications).

Card Spacing

Control the space between each product card:

Setting	Options	Default
Grid spacing	Tight / Normal / Wide	Normal

Option	Spacing	Recommended use
Tight	0.5rem (8px)	Gallery/moodboard look, board-style layout
Normal	20px	Versatile, suits most stores
Wide	2.5rem (40px) mobile, 3rem (48px) desktop	Generous spacing, premium and airy look

Border Radius

Setting	Options	Default
Border radius	0 to 50px (step of 2)	8px

This setting controls the corner rounding of product cards in the grid.

Grid / List View Toggle

Setting	Options	Default
Show view toggle	Yes / No	No

When enabled, a toggle appears above the grid allowing visitors to switch between grid view and list view. The visitor's choice is saved in the browser (localStorage) and persists between visits.

Products Per Page and Pagination

Products Per Page

Setting	Options	Default
Products per page	8 to 24 (step of 4)	16

This number determines how many products are loaded on each page of the collection. Additional products are accessible via pagination.

⚠️A high number of products per page (20-24) can slow down loading on mobile, especially if your product cards include secondary hover images. For optimal performance, 16 products per page is the best compromise.

Numbered Pagination

When the collection contains more products than the per-page limit, numbered pagination appears at the bottom of the grid. It includes:

Clickable page numbers
Previous/next arrows
The current page highlighted
Ellipsis for very long collections

ℹ️Pagination uses standard links (?page=2, ?page=3...) which is great for SEO. Each collection page can be individually indexed by search engines.

Product Card Styles

Scale Theme offers 7 different card styles, each creating a unique atmosphere for your collection.

The 7 Card Layouts

Layout	Description
Standard	Classic card with image, title, price, and content below
Lookbook	Editorial style, the image dominates with info overlaid
Minimal	Clean, no border or background, focus on the image
Tableau	Cards touch without spacing, art gallery effect
Overflow	The image slightly overflows the frame, dynamic effect
Ranking	Displays a ranking number on each product (1, 2, 3...)
Showcase	Premium presentation with enhanced visual effects

in the corner, ideal for best-sellers)

Image Ratio

Setting	Options	Default
Image ratio	Adapt / Square / Portrait / Tall Portrait / Landscape	Adapt

Option	Ratio	Use case
Adapt	Original	Preserves the native ratio of each image
Square	1:1	Uniform, ideal for most products
Portrait	4:5	Ideal for fashion and clothing
Tall Portrait	2:3	Even more vertical, strong visual impact
Landscape	3:2	For horizontal products (electronics, furniture)

💡Adapt mode preserves the original ratio of each image, giving a natural look. If your product images have different ratios and this creates an uneven appearance, switch to Square or Portrait for consistency.

Secondary Image on Hover

Setting	Options	Default
Show secondary image	Yes / No	No

When enabled, the product's second image appears on mouse hover. This is ideal for showing the product from another angle or being worn.

Card Content

Customize the information displayed on each card:

Setting	Description	Default
Show vendor	Brand/vendor name	No
Show price	Product price	Yes
Show description	Short product description	No
Show swatches	Variant color swatches	Yes
Show button	Action button on the card	No

Quick Action Button

When the button is enabled, you choose its behavior:

Setting	Options	Default
Button action	Add to cart / View product / Quick view	Add to cart
Button text	Custom text	"Add to cart"
Button style	Primary / Secondary / Tertiary	Primary

Action	Behavior
Add to cart	Directly adds the product to the cart (default variant)
View product	Redirects to the product page
Quick view	Opens a modal with product details without leaving the page

💡Quick View is an excellent conversion tool. It allows customers to see details and add to cart without leaving the collection, reducing back-and-forth navigation.

Title Position

Setting	Options	Default
Title position	Below image / Overlay on image	Below image

Only available with the Standard layout. The overlay option positions the title and price directly on the image, at the bottom.

Visual Effects

Setting	Options	Default
Hover effect	None / Lift / Glow / Tilt / Reveal	None
Background effect	None / Gradient Blob / Glow	None

Hover effect	Description
Lift	The card lifts slightly with a drop shadow
Glow	A luminous halo appears around the card
Tilt	The card tilts subtly in 3D based on mouse position
Reveal	A progressive reveal effect on hover

Card Background and Corners

Setting	Options	Default
Card background	Yes / No	Yes
Corner radius	0 to 30px (step of 2)	6px
Asymmetric corner	Yes / No	No
Asymmetric radius	0 to 60px (step of 2)	24px
Asymmetric corner position	Bottom-right / Bottom-left / Top-right / Top-left	Bottom-right

ℹ️The asymmetric corner is a signature design detail of Scale Theme. A single corner rounded differently from the others creates a unique and memorable look.

Sale Badges

Sale badges highlight products that are on sale:

Setting	Options	Default
Show sale badge	Yes / No	Yes
Badge text	Custom text with `[savings]`	"-[savings]%"
Badge color	Accent 1 / Accent 2 / Background / Text	Accent 1
Text color	Background / Text / Accent 1 / Accent 2	Background
Show compare-at price	Displays the strikethrough price next to the current price	Yes

ℹ️Use the [savings] placeholder in the badge text to automatically display the discount percentage. For example, -[savings]% will display "-25%" for a product discounted by 25%.

Product Sorting

Setting	Options	Default
Enable sorting	Yes / No	Yes

When sorting is enabled, a "Sort by" dropdown menu appears, offering the sort options configured in Shopify:

Relevance (default)
Best selling
Alphabetical (A-Z)
Alphabetical (Z-A)
Price ascending
Price descending
Date (newest)
Date (oldest)

The sort menu location depends on the filter type selected. See the Filters and Facets page for more details.

Empty Collection

When a collection contains no products (either because it's empty or because active filters exclude all results), a message is displayed:

The message includes:

Text indicating that no products match
A reset link to clear active filters and return to the full collection

Customizable Blocks

The Product Grid section supports injectable blocks at two positions:

Position	Description
Before products	Content appears above the product grid
After products	Content appears below the grid, before pagination

Custom Liquid Block

Inject custom Liquid code at the position of your choice. This lets you add promotional banners, descriptive text, or any other HTML/Liquid content within the collection page.

App Block

Integrate third-party Shopify app blocks directly into the collection page.

💡Use a Custom Liquid block in the "Before products" position to add a promotional message or seasonal banner at the top of your collection without modifying the template.

Animations

The product grid supports Scale Theme's animation system. When enabled, product cards appear with an entrance animation on scroll (fade, slide, zoom, etc.), with a stagger effect on the first 12 products.

Setting	Description
Enable animations	Enables card entrance animations
Animation type	Choose the animation (fade-up, zoom-in, etc.)
Stagger	Cascade effect with progressive delay

Global Settings

Like all Scale Theme sections, the collection page includes global settings:

Setting	Description
Color palette	Section color scheme
Container width	Narrow / Normal / Full / Full padded
Margins	Top and bottom padding (mobile and desktop separately)
Separators	SVG separators at the top and/or bottom of the section
Visibility	Hide on mobile or desktop

Best Practices

Optimize your images: Use consistently sized product images for a uniform look in the grid.
Choose the right number of columns: 4 columns for large catalogs, 3 for premium stores, 2 for products that need large images.
Enable quick view: It's a conversion accelerator that reduces friction.
Limit products per page: 16 is the optimal number. Beyond that, loading can slow down.
Test on mobile: Always check the appearance on a phone — that's where the majority of your visitors will be browsing.

On this page

Collection Page

Product Grid

Columns

Grid Layout

Card Spacing

Border Radius

Grid / List View Toggle

Products Per Page and Pagination

Products Per Page

Numbered Pagination

Product Card Styles

The 7 Card Layouts

Image Ratio

Secondary Image on Hover

Card Content

Quick Action Button

Title Position

Visual Effects

Card Background and Corners

Sale Badges

Product Sorting

Empty Collection

Customizable Blocks

Custom Liquid Block

App Block

Animations

Global Settings

Best Practices