Collections List

The Collections List section allows merchants to showcase collections in a flexible and customizable grid or slider format. It includes a variety of settings to control the layout, content, and style, ensuring the section can be tailored to suit any store design or functionality. Additionally, users can customize each collection block independently, including updating the image, title, and description.

Section Settings

The Collections List Section Settings provide options to customize the overall look and behavior of the section.

1. Color Scheme

   • Color Scheme

     • Choose the background and text color for the entire section.

   • Card Color Scheme

     • Customize the appearance of individual collection cards.

2. Container Settings

   • Use Container

     • Toggle the container setting to wrap the section within a defined width for better alignment with other content.

3. Slider Settings

   • Use Slider

     • Enable a slider view to display collections as a carousel.

   • Enable Arrows

     • Add navigation arrows for the slider to let users easily browse through collections.

   • Card Ratio

     • Adjust the image ratio for collection cards (e.g., Auto, Square, Landscape).

4. Heading and Subheading

   • Add a Heading and Subheading to introduce the section.

   • Adjust the Heading Size (Small, Medium, or Large) to suit the page design.

5. Items Per Row

   • Control how many items are displayed per row on various devices:

     • Desktop Columns

       • Set the number of items for desktop screens.

     • Tab Columns

       • Define the number of items for tablet screens.

     • Mobile Columns

       • Adjust the number of items for mobile devices.

   • Center Gap

     • Adjust the spacing between items for better visual balance.

6. Section Padding

   • Fine-tune the section's spacing:

     • Top Padding

       • Adjust the space above the section.

     • Bottom Padding

       • Adjust the space below the section.

Block Settings

Each block in the Collections List section represents a collection card and comes with its own customizable settings, as shown in the image.

1. Collection

   • Collection

     • Select a collection to display in the block.

2. Image Customization

   • Collection Image

     • Override the default collection image with a custom image for the block.

3. Content Details

   • Collection Tag

     • Add a tag or label to highlight specific details.

   • Collection Title

     • Customize the title of the collection displayed in the block.

   • Collection Description

     • Add a brief description or details about the collection, using rich text formatting for emphasis.

4. Call-to-Action

   • Show More Text

     • Add a call-to-action text for users to explore the collection further (e.g., "Shop Now" or "Explore Collection").

Steps to Add and Configure the Collections List Section

1

Access the Theme Editor

1. Go to Online Store > Themes in your Shopify admin.

2. Click Customize to open the theme editor.

2

Add the Collections List Section

1. In the theme editor, click Add Section.

2. Search for Collections List and add it to your desired page.

   

3

Configure Section Settings

1. Adjust the Color Scheme to match your store's design.

2. Enable or disable Use Slider and customize the slider's behavior as needed.

3. Add a Heading and Subheading to introduce the collections displayed.

4. Define how many items appear per row on desktop, tablet, and mobile.

5. Fine-tune the Padding to ensure the section integrates seamlessly with other content.

4

Add and Customize Blocks

1. Add blocks by clicking Add Block under the section.

2. For each block:

   • Select a Collection to display.

   • Upload a custom Collection Image if needed.

   • Add a Collection Title, Tag, Description, and Show More Text to enhance the block's content.

5

Save and Preview

1. Click Save after configuring the section and its blocks.

2. Preview the section on both desktop and mobile to ensure proper layout and functionality.

Best Practices

• Use custom images for blocks to ensure consistent visuals.

• Optimize headings and descriptions for clarity and SEO.

• Test the section on multiple devices to confirm alignment and spacing.