Showing Product Cards as a Grid by Default

Some catalog templates support both list and grid display modes, but ship with the list layout as the default. If your storefront should open with product cards instead, the change is usually in the front-end state logic, not in the product data itself.

What to look for

• a CSS class on the catalog wrapper such as grid or list
• a switcher button that writes the chosen mode into localStorage, sessionStorage, or a cookie
• JavaScript that applies the initial mode on page load

Typical fix

If the template checks localStorage and falls back to list mode when nothing is stored, simply change the fallback to grid mode.

const viewMode = localStorage.getItem('catalogView') || 'grid';
document.documentElement.dataset.catalogView = viewMode;

If the mode is server-rendered

Some storefronts output the mode directly in the template or chunk. In that case, search for the default class name and change the base markup from the list variant to the card variant.

Why this matters

For visual product catalogs, the default view shapes the first impression. If users nearly always switch to grid mode manually, that is usually a sign the storefront should simply start there.