Collection list manual

The Collection list manual section allows you to manually showcase specific product collections on your homepage. It offers flexible layout options for desktop, tablet, and mobile views. This section is ideal for curating featured categories or seasonal highlights.

1. How to access the Collection list manual section?

Step 01: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.

Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Collection list manual.

2. How to customize the Collection list manual section?

2.1. Collection list item

Click on Collection list manual section > Add block (plus icon ➕) > Collection item block

On each block, you can configure:

Collection: Select a Shopify collection to display; this links the item to an existing collection in your store.
Collection image: Upload or choose an image to represent the collection
Leave empty to use 'Collection image in Shopify admin'
Collection title: Enter a custom title for the collection.
Leave empty to use 'Collection title in Shopify admin'
Collection link (optional): Add a custom link to the collection item.
Leave empty to use 'Collection URL in Shopify admin'

Desktop column width: Defines how wide each collection item appears on desktop (e.g., 33% = 3 items per row).
Desktop row count: Sets the number of rows to display on desktop; you can adjust using the slider or type a number.
Tablet column width: Determines the width of each item on tablets (e.g., 50% = 2 items per row).
Tablet row count: Specifies how many rows to show on tablets.
Mobile column width: Sets how wide each collection item appears on mobile (e.g., 50% = 2 per row, 100% = 1 per row).
Mobile row count: Sets how many rows will display on mobile devices.

2.2. Collection list manual

You can configure some general options for the section below:

2.2.1. General options

Collection design: Choose a layout style for displaying your collections (different designs may affect image shape, spacing, and content placement).
Content font size: Set the size of the text inside the collection blocks (e.g., Small, Medium, Large).
Content font weight: Select how bold the text appears (e.g., Regular, Semibold, Bold).
Content position: Choose where the collection title and product count appear:
- Center: Displays content in the center of the image.
- Center bottom: Displays content at the bottom center of the image.
Content spacing: Adjust the distance (in pixels) between the content (text) and the edge of the image.
Depending on the 'content position'. Not work when 'content position' is center. Only work on desktop, on mobile it automatically adjusts to be responsive

Show count items: Toggle ON to display the number of products in each collection.
Count label: Customize the label text shown under the collection title
Only work when enable 'Show count items'

Image rounded: Toggle ON to apply rounded corners to the collection images.
Enable border: Toggle ON to add a border around each collection image.
Image padding: Set the amount of space (in pixels) between the image content and the border.
Only work when 'Enable border'

Image hover effect: Applies a visual animation to the image when a user hovers over it with their cursor—for example, selecting “Zoom in” will slightly enlarge the image on hover.
Hovering effect will resize your images
Item effect when hover: Adds an animation or style to the entire collection item when hovered—for example, “Border run” animates a border around the item, giving users a more interactive and engaging experience.

2.2.2. Collection layout

Desktop row height: Sets the height (in pixels) of each collection block row when viewed on desktop screens.
Tablet row height: Sets the height (in pixels) of each collection block row when viewed on tablet devices.
Mobile row height: Sets the height (in pixels) of each collection block row when viewed on mobile devices.
Spacing between items: Controls the horizontal and vertical space between collection items on desktop layout. You can choose from predefined spacing values.
Spacing between items (Tablet): Controls spacing between items specifically for tablet devices.
Spacing between items (Mobile): Controls spacing between items specifically for mobile screens.

2.2.3. Layouts

Display colors by section: When turned on, it allows each section to use its own color scheme. It is off, meaning the section follows the global theme colors.
Color scheme: Lets you choose a predefined color scheme that affects text, background, and button colors in this section.
Background section overlay: Adds a semi-transparent color overlay on top of the section background. The slider controls the transparency level (e.g., 0.5 means 50% opacity).
Width: Sets the width behavior of the content.
- Wrap container: means the content will follow the site’s max container width.
- Container: Similar to "Wrap container" but may be slightly narrower or follow theme-specific padding.
- Full width: Content stretches edge-to-edge across the entire screen.
Background image: Allows you to set a background image for the entire section.
- Use the Select button to upload your own image or click Explore free images to choose from stock options.
Padding top: Adds spacing above the content within the section. Measured in pixels
Padding bottom: Adds spacing below the content within the section. Also measured in pixels
Padding rate mobile: Sets the amount of vertical padding on mobile devices as a percentage of the desktop padding. For example, 75% means mobile devices will get 75% of the desktop padding value.

2.2.4. Theme Settings

Page width: defines the maximum width of the main content area on the website.

2.2.5. Custom CSS

Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.