Product Grid

In this section, you can configure the content that should be displayed on the collection page, manage the sidebar and decide what it should display.

Template -> Product grid

Layout

Top spacing

The option can be changed to Small, Medium, or Normal. The value for each option on the desktop and mobile can be specified in pixels by adjusting the Section top spacing settings under Theme settings -> Layout. If you need to disable top spacing, choose None.

In the following example, you can view the top spacing settings:

Width

The Width option controls how the content or image within this section is displayed across the storefront page. It determines how much horizontal space the element occupies in relation to the overall browser window or container.

Setting

Description

Default

Displays the content within the standard theme container width. This setting keeps your layout consistent with the general page structure and aligns the section with other elements such as headers, footers, and side margins.

Boxed

Restricts the content to a narrower container centered on the page. This creates a more compact and balanced layout, ideal for highlighting specific sections without stretching across the full width of the screen.

Wide

Expands the section to occupy the full browser width. This setting provides a more immersive and modern layout, particularly effective for large background images or promotional banners. It is optimized for screens with a width of 1440px or greater to maintain image quality and proportion.

Usage Tip:

Use Wide mode for visually striking sections such as hero banners or promotional images, and Boxed or Default for standard content areas to maintain visual consistency throughout your store.

Here’s a clear, detailed explanation written in the professional tone and structure of Shopify theme documentation for the “Number of columns”, “Number of columns on tablet”, and “Mobile grid” options:


Number of Columns Settings

These options define how many articles or products appear per row across different device types — desktop, tablet, and mobile. Adjusting them ensures your layout remains visually balanced and responsive on all screen sizes.

Option

Description

Values / Range

Details

Number of columns

Controls how many articles (or products) are displayed side by side in a single horizontal row on desktop devices.

1–5

You can display between 1 and 5 items per row depending on your design preference and content density. For example, a setting of 3 columns creates a balanced grid that works well for most layouts. On mobile devices, this setting automatically defaults to 1 article per row for readability.

Number of columns (tablet)

Defines how many articles are shown in each row when viewed on tablets.

1–3

Adjust this to ensure that your layout remains visually clear and legible on mid-sized screens. For example, setting 2 columns offers an optimal balance between text size and image clarity on tablets.

Mobile grid

Configures the layout structure for mobile screens.

List mode, One item per row, Two items per row

Determines how blog articles or products are presented on smaller screens: <ul><li>List mode – Displays each article stacked vertically with full-width text and image for easy reading.</li><li>One item per row – Shows a single compact article per row.</li><li>Two items per row – Displays two articles side by side, ideal for visual content or compact product cards.</li></ul>


Example Layouts

Below are examples of how the Mobile grid options affect layout:

  • List mode: Each article occupies the full width of the screen, suitable for text-heavy blogs.

  • Two items per row: Two articles are displayed side by side, ideal for showcasing multiple visuals or compact posts.


Tips

  • Use 1–2 columns for image-focused designs and better visibility.

  • Use 3–5 columns for dense layouts with more content per screen, such as product grids.

  • Always preview changes in mobile view using the Shopify theme editor to ensure proper spacing and alignment.

Products per page

The Products per page setting controls how many products are displayed at once on a collection page before additional products are loaded using pagination or the “Show More” button. You can set the number of visible products anywhere from 8 to 50 items. This option helps you balance page performance and browsing experience — fewer products per page improve loading speed, while more products provide a continuous viewing experience for shoppers.

Recommended use:

  • For faster loading times, use 8–16 products per page.

  • For large-screen or grid-heavy layouts, use 24–50 products per page.


Filtering

The Filtering option determines how product filters (such as color, size, price, or tag-based filters) are displayed on the collection page. You can choose one of the following display modes:

Option

Description

Vertical

Displays filters in a sidebar on the left side of the collection page. Recommended for desktop layouts with enough horizontal space.

Vertical tabs closed

Shows filters in a collapsible sidebar that stays minimized until opened by the user. Ideal for a clean, space-saving layout.

Horizontal

Displays filters in a row above the product grid, keeping the sidebar hidden. Common for minimal, full-width layouts.

Hide

Disables the filter display entirely. Useful for stores with small catalogs or when filtering is not required.

Tip: Filtering options are powered by Shopify’s Search & Discovery app. To customize available filters (e.g., color, size, material), edit them directly in your Shopify admin → Search & Discovery → Filters section.

You can manage the filters in the shopify admin menu: Content -> Menus

In the following example, you can view the filters designs available:

Product Grid Visibility and Behavior Options

These options define how products, filters, and navigation behave within the Collection Page product grid. They help you control how customers interact with large product collections across desktop and mobile devices.

Option

Description

Enable checkbox products count

Displays the total number of products available for each filter option in the sidebar or dropdown filter list. This helps customers see how many items are associated with each filter (for example, “Shoes (12)”).

Enable main products count

Shows the total number of visible products in the current collection. The count updates dynamically when filters are applied, giving users clear feedback on how many products match their criteria.

Enable dynamic products grid

Automatically adjusts the product grid layout when filters are applied or when the number of displayed products changes. This creates a smoother visual transition without reloading the entire page.

Enable sorting

Adds a sorting dropdown above the product grid, allowing customers to sort products by different parameters such as Best selling, Price (low to high), Price (high to low), Newest, or Alphabetical order.

Enable sticky filter button for mobile

Displays a floating or fixed-position filter button on mobile screens. This allows users to open the filter panel at any time, even when scrolling through the product list, improving usability on smaller devices.

Pagination

Controls how additional products load on the collection page. You can select one of three modes for product navigation:

“Show More” Button

Loads additional products when the user clicks the Show More button. Ideal for improving page performance and giving users control over when new content loads.

Pagination Buttons

Displays numbered page navigation (e.g., 1, 2, 3…) below the product grid. This is a traditional pagination method suited for collections with many products.

Auto Scroll

Automatically loads more products as the customer scrolls down the page (infinite scroll). This provides a seamless browsing experience and reduces clicks, especially on mobile devices.


Notes

  • These visibility and navigation options enhance user experience and performance by providing flexible ways to display large collections.

  • Combining Dynamic Grid, Sorting, and Auto Scroll offers a smooth, modern browsing flow.

  • For stores with many products, Pagination Buttons may improve SEO and page load time.

Pagination Alignment

The Pagination alignment setting determines the horizontal placement of pagination controls on the collection page. Pagination controls allow customers to navigate through multiple product pages.

Option

Description

Left

Displays the pagination controls aligned to the left side of the collection section. This layout is useful for aligning with text or filters on the left.

Center

Places pagination controls in the center of the page, offering a balanced and visually neutral layout. This is the most commonly used option.

Right

Positions the pagination controls to the right side of the collection section, aligning them with other right-oriented design elements.

Tip: Use the Center alignment for better readability and visual balance, especially when using grid-based layouts.


Show Text “No More Products”

The Show text “No more products” option controls whether a message appears when all available products have been displayed on the collection page.

Setting

Description

Enabled

Displays the message “No more products” after all items in the collection have been loaded. This provides users with clear feedback that no additional products are available.

Disabled

Hides the message, leaving the product grid as-is when the last items are reached. This creates a cleaner appearance but may cause users to expect more products to load.

Recommendation: Enable this setting if your collection uses “Show More” or Auto Scroll pagination. It helps prevent confusion for customers when the product list ends.


Products Section Overview

The Products section allows you to configure how individual product cards appear on your Collection pages. It defines how product images behave on hover, what visual effects are displayed, and what interactive buttons and product details are shown to customers. These settings help you customize the look and feel of your product grid to better align with your brand and user experience goals.


Product Image Settings

Option

Description

Available Values / Notes

Image hover effect

Defines the animation or visual effect displayed when a user hovers over a product image. This helps create a dynamic shopping experience and can highlight product visuals more effectively.

Available options:Basic theme settings — Uses the global hover effect defined in theme settings. • Disable — No hover effect will be applied. • Zoom in #1 — Slight zoom-in animation for focus effect. • Zoom in and rotate — Zoom-in with a subtle rotation for a modern feel. • Zoom in #2 — Stronger zoom-in effect for a bolder look. • Zoom out #1 — Smooth zoom-out when hovered. • Zoom out #2 — Slightly faster zoom-out animation. • Slide — Image slides horizontally to reveal movement. • Shine — Adds a reflective “shine” animation across the image.

Image ratio

Controls the aspect ratio and shape of product images for consistent presentation across the grid. Choose the ratio that best suits your product imagery.

Available options:Auto — Automatically fits images based on their original proportions. • Portrait (3:4) — Vertical format ideal for fashion or tall products. • Landscape (4:3) — Horizontal format for wide product images. • Square (1:1) — Balanced option that fits most product types. • Round (1:1) — Circular image style, ideal for minimal or lifestyle-focused designs. Note: Refer to the theme’s initial documentation for image ratio recommendations and cropping behavior.


Product Image Action

Option

Description

Available Values / Notes

Image action

Defines what happens when customers hover or interact with the product image.

Available options:Only image — Displays only the main product image without interaction. • Show second image on hover — Displays the next image from the product gallery when hovered. • Gallery — Enables a small image carousel or slideshow within the product card.

Customize (Gallery customization)

When the Gallery option is enabled, additional customization settings become available to fine-tune product card appearance.

See below for detailed settings.


Option

Description

Text align

Aligns the text and details (e.g., title, price, vendor) within each product card. Left alignment is recommended for traditional layouts; Center alignment works best for minimal grids.

Underline on hover

Adds an underline effect to the product name when hovered, enhancing interactivity.

Show badge “Sale”

Displays a “Sale” badge on products that are discounted or on promotion.

Show badge “Sold Out”

Adds a “Sold Out” label to products that are out of stock, providing clear availability status.

Show badge “Feature”

Marks specific products as featured. Useful for highlighting bestsellers or editor’s picks.

Show “Countdown”

Displays a countdown timer for limited-time offers or flash sales (requires a metafield setup).

Show vendor

Displays the product vendor or brand name under the title.

Show type

Displays the product type (e.g., "Shoes", "Accessories") under the product name.

Show price

Shows the product’s current price and sale price (if applicable).

Show small description

Displays a brief text snippet under the product name. You can create and assign this text using metafields.

Truncate product name

Limits the product title length to one line for cleaner visual presentation.

Enable quantity

Allows customers to select a quantity before adding an item to the cart. Button type is always “Show only icon”.

Button “Add to cart”

Controls the visibility and style of the Add to Cart button on desktop. Options include: • Hide • Show • Show only text • Show only icon

Button “Add to cart” on mobile

Same as above, but applies specifically to mobile layouts.

Enable review stars

Displays product rating stars, typically synced with a review app such as Shopify Product Reviews or Judge.me.


Media Buttons

Device

Option

Description

Desktop

Show wishlist

Displays a wishlist icon allowing users to save products for later.

Show compare

Enables a compare icon that allows customers to compare multiple products side by side.

Show quick view

Adds a Quick View button for viewing product details in a pop-up without leaving the collection page.

Mobile

Show wishlist

Enables wishlist functionality for mobile shoppers.

Show compare

Activates compare functionality on mobile.

Show quick view

Displays the Quick View button on mobile product grids.


Usage Notes

  • Use hover effects and badges strategically to highlight promotions or enhance interactivity.

  • Gallery customization allows deeper engagement by letting users browse product images without opening product pages.

  • Keep Add to cart, Wishlist, and Compare visible for fast shopping actions.

  • Always test settings on both desktop and mobile to ensure optimal visual consistency.

Last updated