Store theme

This page controls the appearance of the store page, that is the list of products your visitors see when they browse your catalog. Set the predefined theme, the product grid, the image rendering and the margins around the list here.

Come here when you launch your store and want to align its presentation with your visual identity, when you change predefined theme, or when you adjust the grid density to highlight a specific number of products.

Your changes are saved in one go with Save at the top of the page, or discarded with Cancel.

General

This section sets the foundations of the store theme: the predefined template, the title and description shown at the top of the list, and the background and text colors applied to the whole page.

Pick a Theme to apply a coherent template (layout, ratios, spacing); you can then refine each setting in the following sections. Fill in the Store name and the description to introduce your catalog to your visitors and to search engines. Set the Background and the Text color to ensure a readable contrast.

Grid

The grid defines how your products are laid out on the page. The right setting depends on the number of products, the format of their visuals and the density you want: a wide grid showcases each product, a tight grid gives the impression of a rich catalog.

Set the Number of columns to choose between 2, 3, 4 or 5 products per row. Adjust the Column gap and the Row gap to space out or tighten the grid. Set the Products per page to control pagination — a high value spares visitors a click to the next page, but slows down the initial load.

Media

This section drives how each product image is displayed in the list. A consistent visual presentation reinforces the credibility of your store.

Pick the Image ratio so that every thumbnail shares the same proportion. Enable Contain the image to show the entire visual without cropping (useful when your photos don't have a uniform framing). Enable Swap image on hover to display the second product photo when the visitor hovers their mouse on it, giving an extra preview without clicking.

Enable the Out-of-stock label to clearly mark unavailable products: enter the text shown on the thumbnail (for instance "Sold out").

Grid spacing

This section adjusts the inner margins around the product grid. They control the space between the page edges and the first product.

Use All sides to apply the same margin on all four sides in a single setting. Use Top, Right, Bottom and Left to adjust each side independently when you want a deliberate offset (for example more space at the top to breathe after a banner).

Text spacing

This section adjusts the margins around the text on each product thumbnail (title, price). They control the space between the image and the information beside it.

Set Top, Right, Bottom and Left to give the labels more or less room depending on the density of your grid.