Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Ecomus - Collection List sections

Collection List, Collection List Tab, Collection List Manual, and Collection List Simple.
Annie

Written by Annie

Last updated

484 views

On this page


There are 4 Collection List sections: Collection List, Collection List Tab, Collection List Manual, and Collection List Simple.

These sections allow you to create the collection list with feature images.

You can look over this video about 4 sections:

Steps: In the Theme editor (Customize) > Add section > Collection List > Save.

1. Collection List

1.1. Collection list item

To add a collection list item, click Add Block > "Collection item"

You have some options to configure the item:

  • Collection: Choose your desired collection.

  • Collection Image, Collection Title, Collection Link: Replace the collection default data.

The other block is Items View All, which allows you to create a button leading to a collection list of products.

2024-01-15_15-44-04.png

1.2. Collection List options

- Heading options

There are numerous options to adjust the heading and subheading. See the video below to have better insights.

- General options

  • Select collection list: If you use this option, the blocks will be replaced.

2024-01-15_14-26-07.png
  • Content position: Content position will depend on the selected design, it could be on the image or outside the image.

  • Content padding on image: Only applied for the design that has content on the image.

  • Enable half item: Add a collection at the end of the screen and divide it in half.

2024-01-15_14-32-10.png

- Slider settings

You have several options: Use prev/next button, Use dots, Navigation design, Navigation position, or Dots position. See the video below for better insight.

- Options for layout section and section padding

  • Enable Full-Width Section: Expand the collection to cover the entire screen width.

  • Boxed Full Width: Create a contained box for the collection.

  • Color Scheme: Select your preferred color as previously prepared. For detailed customization instructions, consult this document.

  • Rate padding (mobile): The mobile padding will be calculated based on the top-padding and bottom-padding.

2. Collection List Manual

2.1. Collection Items

  • Collection: Select the collection you want to display.

  • Collection Image, Collection Title, Collection Link: Replace the collection default data.

  • Column width: This dictates the horizontal space each item occupies, with configurations tailored for three devices: Desktop, Tablet, and Mobile. Refer to the image below for visual guidance.

item width.png

The item "New Arrival" item takes up 33% space horizontally

  • Row Count: In contrast to column width choices, this feature controls the vertical space occupied by items. If an item has a designated height, this option dynamically adjusts the item's height accordingly. This also has responsive options.

2.2. Collection List Manual options

To utilize the collection list manual, select "Add section," locate "Collection List Manual," and proceed to configure it by clicking on the respective option.

How to go to collection configurations.png

- Heading options

There are numerous options to adjust, you can read below:

  • Heading align: Choose between Default (Left) or Center alignment.

  • Heading: Input your desired header text.

  • Heading Tag: Select the heading tag from h2 to h6.

  • Heading font size: Pick from three font size options.

  • Section subheading: Enter your subheading using basic text editing tools.

  • Subheading size: Choose between Normal and Large.

  • Distance between heading items: Adjust the space between the heading and collection items.

- Options for collection items

To add a collection item, click on "Add Collection item". See image below.

how to add collection item.png

Explore various features within the collection item to enhance the appearance of your site. Refer to the options below for more details.

  • Collection design: Choose from 2 available designs.

  • Content font-size: Apply Base, Normal, Medium, or Large to your content.

  • Content font-weight: Opt for Normal, Medium, Semibold, or Bold.

  • Enable uppercase text: Activate uppercase formatting for your content.

  • Content position: Experiment with 4 positions, including Center, Center Bottom (Or Center), Left Bottom (Or Left), and Right Bottom (Or Right). Note that the appropriate location depends on the design.

  • Content padding on image: Adjust image padding, effective when the Content Position is not centered.

- Collection Layout

  • Row Height: Customize the height of items for Desktop, Tablet, and Mobile.

  • Item Spacing: Set the distance between items on Desktop, Tablet, and Mobile.

- Options for layout section

  • Enable Full-Width Section: Expand the collection to cover the entire screen width.

  • Boxed Full Width: Create a contained box for the collection.

  • Color Scheme: Select your preferred color as previously prepared. For detailed customization instructions, consult this document.

- Section Padding

  • You can adjust padding-top and padding-bottom in this config on the desktop and mobile screen.

3. Collection List Tab

See the video below to learn how to configure this section.

Color Scheme: To learn more about this, please refer to this document.

2024-01-05_16-28-05.png

Section Padding: Adjust the top and bottom padding of the section both on desktop and mobile.

2024-01-05_16-28-05.png

4. Collection List Simple

See the video below to learn how it's done

In the video, the color scheme had been skipped, to learn more about this, refer to this document.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.