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

Header background

Kalles - Collections list sections

Collections list, Collections list manual, Collections list packery, Collection list simple
Annie

Written by Annie

Last updated

1228 views

On this page


This section allows you to show a list of collections with many designs. Shopify 2.0 allows you to add this section to any pages that you wanna use.

1. Collections list

Steps: In the theme editor (Customize) > Add section > Collection list simple > Save.

1.1. Collection item

Go to Collection list > Add collection item. You can choose a Collection and adjust an image, an icon, a title, a link for each item.

21.gif

1.2. Collections list settings

HEADING OPTIONS

  • You can enter the Heading and Subheading, choose the design for the heading, also can choose text align: center.

22.gif
  • Enable Button heading and config style for it.

23.gif

GENERAL OPTIONS

  • Collection item design: there are many designs for collection item. You can adjust collection item with some color options. Each color option will depend on the collection item design.

Please check this video to know more about collection designs:

  • Open link in current window or new tab

OPTIONS IMAGE COLLECTION

  • You can config Source, Space bottom, Image padding, Image rounded, hover effect, Image ratio, size, position. Please check this video:

BOX OPTIONS

  • Layout design: Grid or Carousel.

    For Carousel layout, you can Enable loop, auto playing, scroll bar. Config position, visible, style, color for Prev, next button and Page dot.

  • You can choose Items per row and Space horizontal items

Please check this video to config in detail:

DESIGN OPTIONS

  • Please follow this guideline to config Layout, Background, Margin/Padding for the section.

2. Collections list manual

Steps: In the theme editor (Customize) > Add section > Collections list manual > Save.

2.1. Collection item

Go to Collection list > Add collection item. You can choose a Collection and adjust an image, a title, a link for each item.

item.gif

2.2. Collections list manual settings

HEADING OPTIONS

  • You can enter the Heading and Subheading, choose the design for the heading, also can choose text align: center.

heading.gif

GENERAL OPTIONS

  • Collection item design: there are many designs for collection item. You can adjust collection item with some color options. Each color option will depend on the collection item design.

Please check this video to know more about collection designs:

  • Open link in current window or new tab

OPTIONS IMAGE COLLECTION

  • You can config Space bottom, Image padding, Image rounded, hover effect, Image position. Please check this video:

COLLECTION BOX LAYOUT

  • Select layout for group collection: there are many designs of box layouts for you to choose. You can see them in this video:

DESIGN OPTIONS

  • Please follow this guideline to config Layout, Background, Margin/Padding for the section.

3. Collections list packery

demo.gif

Steps: In the theme editor (Customize) > Add section > Collections list packery > Save.

3.1. Collection item

Go to Collections list packery > Add collection item. You can choose a Collection and adjust an image, a title, a link for each item.

Moreover, you can choose Item width for desktop, tablet and mobile. With each item width, you will have a different layout:

3.2. Collections list packery settings

HEADING OPTIONS

  • You can enter the Heading and Subheading, choose the design for the heading, also can choose text align: center.

heading.gif

GENERAL OPTIONS

  • Collection item design: there are many designs for collection item. You can adjust collection item with some color options. Each color option will depend on the collection item design.

design.gif
  • Open link in current window or new tab

OPTIONS IMAGE COLLECTION

  • You can config Space bottom, Image padding, Image rounded, hover effect, Image ratio, size, position. Please check this video:

  • Space horizontal/vertical items:

space.gif

DESIGN OPTIONS

  • Please follow this guideline to config Layout, Background, Margin/Padding for the section.

4. Collection list simple

sction.gif

Steps: In the theme editor (Customize) > Add section > Collection list simple > Save.

4.1. Collection list simple blocks

Go to Collection list simple > Add collection > you can add many collection items to show in this section.

You are allowed to choose a collection, enter a label, add a link for each collection item.

block.gif

4.2. Collection list simple settings

settings.gif

GENERAL OPTIONS

  • you can choose Title color, title hover color, config Space between items on desktop, tablet and mobile.

DESIGN OPTIONS

  • Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[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.