Collection group

Written by Eira

Last updated 7 hours ago

16 views

On this page

The “Collection group” section is designed to showcase your most important and engaging product collections in a clear and effective way. It focuses on displaying collections in a column or grid format, with each collection highlighting “Top Products” along with their name and price. This is a great way for customers to quickly grasp key products or categories, encouraging them to explore your store further.

1. How to access the Collection group 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 the Collection group section.

2. How to customize the Collection group section?

2.1. Product item block

To add a Product item block to the Collection group section, click the Add block button (plus icon ➕) under the Collection group section.

After adding the Product item block, you can adjust its settings using the sidebar—located on the right or left side of your screen depending on your device

Title: Enter the main title for this content block. This title will capture the user's attention and summarize the section's content.
Select collection: Select a product collection from your store. Products from this chosen collection will be displayed in the section.
Products list: This is not an input field but a display area for products from the selected collection.
Replaces collection when selected.
Button label: Enter the text to display on the call-to-action button. This text should be clear and encourage users to click.
Button link: Enter the URL that the button will link to when clicked. This can be a link to the collection page, a specific product page, or any other page within or outside your store.

2.2. Other block

2.2.1. Section heading block

The Section Heading block allows you to add a title and description to different sections of your page, you can customize this block with options below:

Design heading: Choose a design for the header to ensure aesthetics
Horizontal: Select how horizontal lines will be displayed with the heading
Only work on desktop
Text Alignment: Align the Section heading block to the left, center, or right
Spacing between items: Adjust the space between the heading and the text (measured in pixels).
Margin bottom: Define the space between the Section Heading and the next section to maintain a balanced layout.

2.2.2. Heading block

To add a Heading block to the Section heading, click the Add block button (plus icon ➕) under the Section heading.

Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)

Heading: Enter the heading text to display. This is the main content you want users to read.
Line-height: Select the line height for the heading.
- Default: Uses the default line height of the font or theme.
- Fit: Automatically adjusts the line height to optimally fit the font size and content, often resulting in tighter text.
Size: Select the font size for the heading. This directly impacts the prominence and readability of the heading.
Text color: Choose the color for the heading text. Ensure this color has good contrast with the background for readability.

2.2.3. Subheading block

To add Subheading block to the Section heading, click the Add block button (plus icon ➕) under the Section heading.

Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)

Text (Shift + Enter to line break): Allows users to add textual content, providing information, descriptions, or explanations.
Hidden <br> on mobile: Remove unnecessary line breaks on mobile devices
Hidden on mobile: Choose whether to hide the heading completely on mobile devices for a streamlined display.
Choose "Custom size inline" to freely adjust the size in the Custom Size Options section.

Custom size options

Font size (Desktop/Mobile): Set different font sizes for each device type to ensure a responsive and visually appealing layout.
Letter spacing (in pixel): Adjust the space between letters to enhance readability and design precision.

2.2.4. Icon block

To add Icon block to the Section heading, click the Add block button (plus icon ➕) under the Section heading.

Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)

Image: Upload an image file to display. This is ideal for logos, illustrations, or any other graphic you wish to use.
SVG code: Paste SVG (Scalable Vector Graphics) code directly into this field. SVG is an ideal vector graphic format for icons or simple graphics, scalable without loss of quality, and can be color-customized with CSS.
Icon color: Choose the color for the icon. This option applies to icons rendered from SVG code or those sourced from an icon library.
Show line icon: Enable this option to display a line icon (outline icon) instead of a filled icon, if your theme supports both styles.

Width: Select the width setting mode.
- Auto: The width will automatically adjust based on the content and available space of its parent element. This is the default and often the most flexible setting.
- Custom: Allows you to specify a custom width. When this option is selected, detailed width input fields for each device will appear.
Width (Desktop): (Only visible when Width is set to Custom ) Enter the width of the element on desktop screens
Width (Tablet): Enter the width of the element on tablet screens
Width (Mobile): Enter the width of the element on mobile devices

Spacing

Top padding: Enter the value for the top padding of the element (unit: pixels). This padding creates space between the top edge of the content and the top edge of the element.
Bottom padding: Enter the value for the bottom padding of the element (unit: pixels). This padding creates space between the bottom edge of the content and the bottom edge of the element.
Rate padding (mobile): Enter the padding rate value for the element on mobile devices

2.2.5. Button block

To add Button block to the Section heading, click the Add block button (plus icon ➕) under the Section heading.

Once the Button block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)

Label: Enter the text that will be displayed on the button. This is the main content users will read to understand the button's function
Link: Enter the URL that the button will link to when clicked. This can be an internal page within your store, a collection, a specific product, or an external link.
Open this link in a new tab: Enable this option to open the link in a new browser tab or window when the button is clicked.
Make button full width: Enable this option to make the button expand to the full available width of its containing element. This can make the button more prominent, especially on mobile devices.
Button style: Select the visual style of the button (Defaul, Outline, Link,...)
Size: Select the size of the button (e.g., Small, Medium, Large,...). This affects the button's height and internal padding.
Font weight: Select the weight or boldness of the font on the button (e.g., Normal, Bold). This impacts the prominence of the button text.

Icon

Icon: An icon is a small graphic element used for illustration or emphasis.
Icon position: Select the position of the icon relative to the text or element it accompanies
Icon size: Select the size of the icon
Icon spacing: Enter the spacing between the icon and its adjacent text or element (unit: pixels).

2.3. Collection group section

After adding the Collection group section, you can customize its settings in the left or right sidebar (depending on your screen size)

General options

Image ratio: Select the aspect ratio (Adapt to image, Square, Portrait, Landscape,...) for the image. Setting an aspect ratio helps ensure consistency in layout
Full image: Enable this option to make the image span the full available width of its containing element.
Show vendor: Enable this option to display the vendor name of the product. This is useful for stores selling products from multiple brands.

Product layout

Maximum items to show: Enter the maximum number of items to display in this section. This helps you control the length of the list
Items per row (Desktop): Enter the number of items to display per row on desktop screens (large screens). This shapes the column layout for desktop users.
Items per row (Tablet): Enter the number of items to display per row on tablet screens. This adjustment optimizes the display for intermediate devices, typically 2 or 3 columns.
Spacing between items: Enter the spacing (gap) between individual items within the grid layout (unit: pixels).

Options for product items

Heading items style: Select the styling for the elements within the heading area. This can influence how the main heading
Enable button: Enable this option to display a call-to-action button within the section. When enabled, the button design options will become available.
Design button: Select the design style for the button. This controls the visual appearance of the button, such as its background color, border, and text style.
- Default: A solid background button with contrasting text color (often brand colors).
- Outline: A button with a border and transparent or text-colored background (stroke effect).
- Simple: A button with only text and no obvious background or border, often styled just like a link but with button-like padding.
Size: Select the size of the button. This affects the button's padding and font-size.
Button font weight: Select the font weight for the text on the button. This helps control the visual weight of the button's text.

Options for layout section

Make section full width: Enable this option to make the section span the full width of the browser, ignoring the theme's usual content width constraints
Color scheme: Select the color scheme that will be applied to this section. A color scheme typically includes settings for background color, primary text color, secondary text color, and other accent colors, helping maintain design consistency and brand identity.

Section padding

Top padding: Enter the value for the top padding of the element (unit: pixels). This padding creates space between the top edge of the content and the top edge of the element.
Bottom padding: Enter the value for the bottom padding of the element (unit: pixels). This padding creates space between the bottom edge of the content and the bottom edge of the element.
Rate padding (mobile): Enter the padding rate value for the element on mobile devices

Theme Settings

Show rating: Enable this option to display star ratings for products (if available). This feature typically requires integration with Shopify's product reviews app or a custom review system.
To display a rating, add a product rating app.
Show currency codes: Enable this option to display currency codes (e.g., USD, VND) next to product prices.
Price font weight: Select the font weight for product prices. This adjustment helps to emphasize or soften the price within the layout.
Price varies style: Select the display style when a product's price varies

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.