Designing your online storefront on Instant Site

Your online storefront is the actual store where customers browse for products. On Instant Site, they access it via a direct link ending with /products (for example, mystore.com/products).

The storefront includes several essential elements:

• Product grid with product cards on it
• Product pages
• Store categories
• Navigation elements

To customize your online storefront's look and feel, you can use the built-in design options in the site editor.

Designing product grid on catalog pages

The product grid is a list of product cards that gives customers a brief overview of the items in your online catalog. It appears on all category pages as well as on the front page of your store, as it is seen via a direct link ending with /products.

Example of a product card in the product grid

You can adjust product card size and aspect ratio, change the spacing between cards, hide or display elements like price or the “Buy Now” button, and more. For example, portrait image orientation is ideal for showing apparel, and large-size images are best for showcasing jewelry details, home decor elements, and so on.

To adjust product grid design:

1. From your store admin, go to Website and click Edit Site.
2. In the Page dropdown at the top, select Catalog.
3. Click Categories & Product grid.
4. Expand Catalog page settings and Product card settings to make the changes.
5. Click Publish.

Designing product pages

A product page in your online store includes a gallery, a description, and all product details. It’s where customers can study the item and read reviews for it.

You can set the product page layout and decide whether to show specific card elements based on your business needs. For example, if you have a gallery of high-quality product photos, it’s better to show full-size images so customers can pay attention to all of them. Additionally, you can zoom in on the main product image on hover.

To adjust product page design:

1. From your store admin, go to Website and click Edit Site.
2. In the Page dropdown at the top, select Product.
3. Click Product details.
4. Expand the settings to make changes to the product page layout and details.
5. Click Publish.

The changes will be applied to all product pages in your online store.

Setting up category name display

By default, all the products you add to your online store appear in the default category that is featured on the main page of your store. If you create more root categories or subcategories to make it easier for customers to navigate your store, they are displayed as a list:

You can choose where to display category names or hide names or category images completely.

To set up category name display:

1. From your store admin, go to Website and click Edit Site.
2. In the Page dropdown at the top, select Catalog.
3. Click Categories & Product grid and expand Categories settings.
4. Choose your option from the Name position dropdown.
5. Click Publish.

The changes will be applied to all pages in your online store that feature categories.

Adjusting navigation elements in your store

Each store has a number of navigation options, including breadcrumbs and “Previous” and “Next” arrows to switch between products. Showing these elements can make it easier for buyers to make a purchase.

To adjust product page navigation:

1. From your store admin, go to Website and click Edit Site.
2. In the Page dropdown at the top, select Product.
3. Click Product details.
4. Expand Navigation to make the changes.
5. Click Publish.