Collections
The Collections element will show the collections as a list on your Collection template. You can select the specific collections to show, select from the collection metafield, or from the menu.
Notice: This element should only be use for Collection template.
1. Add Collections element
From the Shopify tab, drag and drop the Collections element to the place you want to show the collections.
2. Configure Collections
2.1. Show the Specific Collections
This is really easy, you just need to select the collections that you want to show and add it.
2.2. Show the collections from the Shopify menu
To show the Collections from a menu, you must create a menu in Shopify first, then select it in EComposer to show.
- Go to Shopify admin -> Online store -> Navigation to create a menu.
- Create your menu and link it to a collection that you want to show.
- Save the changes in Shopify and refresh the Collection page in EComposer (Publish the page first so your changes are saved).
- Select the collection according to the menu name you set in the Shopify navigation.
2.3. Add Sub-collection through Collection metafield and show in EComposer
- From the Shopify admin, go to Products -> edit Collections -> Metafield -> Show all. Add the collection URL to the Define sub-collections for the current collection field. Separated by commas.
- From the Collection element, you have to select the “From metafield of current collection” option in Collection Source. Then you can assign the collection template to the collection that you want and check it in the preview. You can follow this video below for details.
You can follow the steps below for details:
Note: The metafield only works in the collection template. It only shows on the live page and only shows when assigning that template to the collection.
For example: You can use this choice when you want to show sub-collections on a main collection.
2.4. Other settings
All of the options listed below, such as “Show image/Show title,” “Show description,” and “Show counter (Products count)“, are specific to the product.
You can change the counter texts as well as the Items show per row, the column gap or the row gap.
3. Design
3.1. Items
Helps you configure the style of the items with options for Background, Box Shadow, Border, Border Radius, Padding and Layout Flow.
3.2. Image
Here you can set the width, height or opacity for the collection images.
3.3. Title, Counter
It includes Alignment, Typography, Text Color, Text Shadow fields that are applicable to the text. Alignment and Typography can be set for all devices.
You can learn more about design options here.
