Collection page
Last updated
Last updated
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.
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.
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:
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
In case you want to have a mobile image for each collection you need to do the following:
Go to Settings > Metafields
Pick Collections
Pick Add definition
In the name add Mobile image
Pick Select content type and choose File
In Accept specific file types pick only Images
Save
There you can add your mobile specific image
Then go to the customize panel and navigate to the collection page
Pick the Collection banner section
From the new popup pick Mobile image
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.
Style -- more details here
Enable breadcrumbs -- this will show/hide the breadcrumbs navigation below the main banner
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.
This will show/hide the filters
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:
This will enable/disable the sorting dropdown on the right side of the filters.
The settings below are about the products grid - items size, items per row, spacings, etc.
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
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.
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.
Then go to one of your collections and you'll see a field like this at the bottom of the page:
Go to the Image-Mobile field and click the dynamic icon:
