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

Header background

Gecko - Collections list packery

Mie Tran

Written by Mie Tran

Last updated

262 views

On this page


This section allows you to show the collections and text. You can go to Theme sections > Add section > Search and add Collection List Packery to configure it.

packery.gif

1. Collection List Packery item

You can click on Add Collection Item to add more collection items for this section.

item.gif
  • Collection: Select a collection that you want to show on collection item. You can set it blank (It's not required.)

  • Collection image: It allows you to upload an image for the collection item.

  • Item width: This option allows you to set the width for the collection item both on Desktop, Tablet and Mobile devices. With different widths for each item, you will have different presentations for these blocks. You can refer to this video to know more:

Untitled 3.gif
  • Collection label: Enter the content of the label. Leave empty to use 'collection title'.

  • Link (optional): Input the link for the collection item. Leave empty to use 'collection url'.

2. How to configure the Collection List Packery section?

2.1. HEADING OPTIONS

  • Heading design: There are a total of 15 heading designs.

  • Heading align: Align the title to the left, center.

  • Heading: Enter the content of the heading.

  • Enter an icon name on heading: Go to LineAwesome to get the icon that you want to show on the design 6.

  • Subheading: Enter the content of the subheading.

  • Space bottom (px): This allows you to change the space between the heading and content.

spaces_tdDF4h55NE3bVEDpck0F_uploads_TkCEiQv8E2pbQmtKJpBx_2022-12-23_15-57-21.webp

2.2. GENERAL OPTIONS

  • Collection item design: There are totally 15 heading designs.

  • Title color, Title hover color, Subtitle color, Count color, Border color.

  • Collection subtitle: Enter the content of the sub title.

  • Open link in: This option allows you to set the link to open in the current window or a new window when a customer clicks on the button.

You can refer to this video to know more about the item design:

2.3. OPTIONS IMAGE COLLECTION

  • Space bottom(both on desktop, tablet & mobile): Space between image and info of collection

  • Enable border, Image padding, Image rounded: Configure the display for images

  • Image hover effect, Collection hover effect: Configure the animation for the item

    spaces_tdDF4h55NE3bVEDpck0F_uploads_cwoyCBbWuZ2cIyfbqah7_2022-12-24_10-21-58.webp
  • Image ratio, Image size, Image position: choose the frame for image collection

  • Space horizontal items and Space vertical items: Configure the spacing between items

spaces_tdDF4h55NE3bVEDpck0F_uploads_5udle65Zldein8kQVXy0_2022-12-24_10-23-13.webp

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.

We highly recommend Shopify apps from our partners.

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