Comment on 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
You can add more sections to this page by using the
Add sectionbutton 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:
Along with that there are additional settings like:
- 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:
- 1.Go to Settings > Metafields
- 2.Pick Collections
- 3.Pick Add definition
- 4.In the name add
Select content typeand choose
Accept specific file typespick only
- 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
- 12.Go to the
Image-Mobilefield and click the dynamic icon:
- 13.From the new popup pick
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.
This will show/hide the filters
This will change the filtering layout. The options are: horizontal and vertical. Examples below:
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 rowyou 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 rowon 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.