Collection page

This is the main template/page where your products are listed. You can see your collections by going to your Shopify admin area and then click Products -> Collections. Once you pick a collection (or if you create a new one) you'll be able to choose which products to be included, add featured image, description, etc.

The collection template of Marble consists of 2 main sections:

• Collection banner

• Collection

You can add more sections to this page by using the Add section button here:

More details about the 2 sections below.

Collection banner

The main purpose of this section is to present a good looking banner above the products list. The main details are automatically loaded from the collection like:

• heading

• description

• image

Along with that there are additional settings like:

• style

• height

• image picker (in case you want to change the image)

• image vertical position

• content management fields like: positioning, etc.

Default values

Some of the default values are set through dynamical Shopify properties. For example the image is set through such dynamic prop to load the collection featured image:

The heading is done in the same way:

Custom values

In case you want to attach other dynamic values, you can add metafields on your side and then link them through these dynamic fields. More details about the metafields here: https://help.shopify.com/en/manual/metafields/metafield-definitions

More details about connecting dynamic resources here: https://help.shopify.com/en/manual/metafields/displaying-metafields-on-your-online-store#connecting-metafields-to-your-theme-by-using-the-theme-editor

Example

In case you want to have a mobile image for each collection you need to do the following:

1. Go to Settings > Metafields

2. Pick Collections

3. Pick Add definition

4. In the name add Mobile image

5. Pick Select content type and choose File

6. In Accept specific file types pick only Images

7. Save

8. Then go to one of your collections and you'll see a field like this at the bottom of the page:
9. There you can add your mobile specific image

10. Then go to the customize panel and navigate to the collection page

11. Pick the Collection banner section

12. Go to the Image-Mobile field and click the dynamic icon:
13. From the new popup pick Mobile image

Collection

This is the main section that prints products in your site. The products are automatically loaded from your collection.

Here are the settings available for this section.

General

• Style -- more details here

• Enable breadcrumbs -- this will show/hide the breadcrumbs navigation below the main banner

Filters and sorting

The filters are mainly managed through a Shopify app called Shopify Search & Discovery . It can be installed from here: https://apps.shopify.com/search-and-discovery.

More details on how the filters are managed can be found here: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters#shopify-search-amp-discovery-app.

Enable filters

This will show/hide the filters

Filters type

This will change the filtering layout. The options are: horizontal and vertical. Examples below:

Horizontal:

Vertical:

The mobile view is a separate layout that is not affected by this setting. On mobile it always take the entire screen:

Enable sorting

This will enable/disable the sorting dropdown on the right side of the filters.

Products grid

The settings below are about the products grid - items size, items per row, spacings, etc.

Layout

The following settings will affect the layout size and spacings:

• Fullwidth -- will make the grid full width taking the whole screen

• Side margins -- will add spacing on both sides of your screen

• Side margins - Mobile -- will add spacing on both sides on mobile devices only

Grid

Products per row (desktop and mobile) will change the number of items you'll see per row. You can for example show 4 products per row on desktop, and 1 or 2 on mobile.

Products per page

Here you can pick how many products to be shown per page.

Please be aware that depending on what settings you pick for products per row you might end up having empty spaces on the last products row. The best case here is if the number can be divided by both products per row on desktop and mobile.

For example, if you pick 4 on desktop, and 2 on mobile, then products per page could be 4, 8, 12, etc.