Collection tabs grid

Written by Eira

Last updated 8 hours ago

23 views

On this page

The Collection Tabs Grid section is a powerful and flexible component designed to showcase multiple product collections in an organized, tabbed interface. This allows merchants to present a diverse range of products within a single, interactive area, enhancing user experience and improving product discoverability. Each tab represents a specific collection, and its content displays a customizable grid of products from that collection.

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

2. How to customize the Collection tabs grid section?

2.1. Tabs item Product grid block

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

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

Item title: Enter the title for this item.
Select collection: Select a product collection from your store to associate with this item. All information (products, image, description) from this collection will be used to populate the item's content.
To display the collection added in this section, you need to select the collection metafield in the Product carousel block.

2.2. Product Grid block

To add a Product Grid block to the Tabs item Product Grid, click the Add block button (plus icon ➕) under the Tabs item Product Grid.

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

General options

Select collection: Select a product collection from your store. Products from this collection will be displayed in this section.
Maximum items to show: Enter the maximum number of products to display from the selected collection. This helps you control the length of the product list and manage page space.
Products list: Replaces collection when selected.
Products border: Enable this option to add a border around each product card. A border helps to clearly delineate individual products and creates a more organized layout.
Product design: Select the overall design style for each product card. This shapes how the product image, title, price, and other details are arranged and presented.
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 on the product card. This is useful for stores selling products from multiple brands.
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.
Items per row (Mobile): Enter the number of items to display per row on mobile devices.
On a screen that is too small, the item will automatically be full
Spacing between items: Enter the spacing (gap) between individual items within the grid layout (unit: pixels).

Pagination products

Use pagination: Enable this option to activate a pagination mechanism for the section. This can include "Load More" or "View All" buttons for users to access more content..
Type: Select the type of pagination mechanism to be used.
- Loadmore button: A button that will load more items into the current list on the same page when clicked.
- View all: A button that will navigate the user to a separate page displaying all items.
Position: Select the position of the pagination button within the section (Left, Center, Right)
Distance to boundary: Enter the distance (spacing) from the button to the top/bottom boundary of the section (unit: pixels). This creates padding around the button.
Button label: Enter the text to display on the button. This text should be clear and encourage users to click to view more content.
Leave empty to use button's title default

Button style (default, outline, link,...): Select the design style for the button. This controls the visual appearance of the button, such as its background color, border, text style, and hover effects.
Enable button icon: Enable this option to display an icon next to the text on the pagination button. An icon can help clarify the button's function or add visual emphasis.
Size: Select the size of the pagination button. This affects the button's padding and font-size.
Button font weight: Select the font weight for the text on the pagination button. This helps control the visual weight of the button's text.

2.3. Other block

2.3.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.3.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.3.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.3.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.3.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.4. Collection tabs grid section

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

Options for tabs list

Tabs design: Select the overall design style for the tabs. This will shape the visual appearance of the entire tab component, including its shape, color, and basic interaction style
Tabs list position: Select the position of the list of tab labels within the section
Content font size: Select the font size for the content displayed within each tab pane. This controls the readability and information density of the content.
Tabs item border (Solid, Dashed, Dotted): Select the border style for each tab item. This style applies to the border around or beneath each tab, depending on the chosen Tabs design.
- Solid: A continuous, unbroken border line.
- Dashed: A border composed of a series of short lines.
- Dotted: A border composed of a series of dots.
Only working with design has border and inline
Tab item border width: Enter the width of the tab item border (unit: pixels)
Spacing between tabs items: Enter the spacing (gap) between individual tab items (unit: pixels). This spacing improves readability and distinction between tabs.
Distance between tabs heading and content tabs: Enter the spacing (gap) between the main section heading (if any) and the beginning of the tabs navigation and content area
This spacing is also used for the distance from tabs list to content

Layouts

Display colors by section: Enable this option to allow each section to manage its own color scheme independently
- 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
- Background section overlay: Select a color overlay that will be applied on top of the section's background
Width (Container, Wrap container, Full width): Select the width of the content within the section.
- Container: The content will be confined within a fixed-width (or max-width) container defined by your global theme settings.
- Wrap container: The content will be enclosed in a slightly wider container than the default, but still with limits.
- Full width: The content will span the entire width of the browser viewport, ignoring any container constraints.
Background image: Upload an image to be used as the background for this entire section. This helps create a prominent and engaging visual element.
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

Page width: Defines the maximum width of the page content, influencing layout and display on various devices.
Wishlist mode: Enables or disables the wishlist feature, providing users with a function to save favorite products.
You can Disable, Enable wishlist local, Enable wishlist account Install EcomRise free, Enable Growave wishlist

Remove collection URL: Eliminates the collection URL from the product page path, optimizing SEO and creating shorter URLs.
Remove the collection portion from product URLs for better SEO
Color display mode: Selects the product color display method, such as color list or count
Show color type: Displays All colors or Only color available. This option allows customers to see the complete color range of a product or focus solely on colors currently in stock.
Show secondary image on hover: Displays a secondary product image when hovering over it, giving customers a multi-dimensional view of the product.
Use new badge: Enables or disables the display of a "new" badge on new products, attracting customer attention.
Automatic "New" badge period: Enter the number of days a product will automatically display a "New" badge from its creation date. After this period, the badge will automatically disappear.
Use on sale badge: Enables or disables the display of an "on sale" badge on discounted products, stimulating purchases.
On sale badge display style: Selects the display style "Text" or "Percentage" for the "on sale" badge
Use pre-order badge: Enables or disables the display of a "pre-order" badge on upcoming products, informing customers of pre-order availability.
Use sold out badge: Enables or disables the display of a "sold out" badge on out-of-stock products, notifying customers of product availability.
Compare mode: Enables or disables the product comparison mode, allowing customers to compare products side-by-side for informed purchasing decisions.
You can Disable, Enable compare local, Enable compare account
Max products compare: 6
Show quick view: Enables or disables the "quick view" button, allowing customers to view product details without leaving the current page.
Show ultra button: Enables or disables the "ultra" button (custom button), allowing the addition of special action buttons to products.
Ultra buttons: Quick add, Choose options, Add to cart, View product
Show quantity selector: Requires showed ultra button and only show with button add to cart. Quantity selector button shows with Product Design 1,3,5,6,7,9,10
Show quick add: Requires showed ultra button
Text alignment: Adjusts the text alignment of products (left, right, center), customizing the display layout.
Show rating: Enables or disables the display of product ratings, providing customer feedback information.
To display a rating, add a product rating app.

Title font weight: Selects the font weight of the product title, creating emphasis and attracting attention.

Show currency codes: Enables or disables the display of currency codes next to product prices, providing clear currency information.
Price varies style: Choose a display style for variable product prices (e.g. "From [price]"), which helps customers understand the price range.
Price font weight: Select the font weight for the product price. This allows you to control the visual emphasis of pricing information, either making it stand out or blend more seamlessly with other text elements.
Maximum color to show: Limits the number of product colors displayed
0 to responsive auto number. Requires color limit is enabled.
Change product image when click swatch on event: Allows the product image to change when a user clicks on a color swatch, creating a more interactive and visual experience.
Click mode is forced on touch devices.

Enable color limit: Enables or disables the limit on the number of product colors displayed, allowing control over the color count shown on the product page.
Color image source: Selects the image source for product colors, allowing the use of actual product images or standard color images for display (Custom images or variant images)
Color shape: Selects the display shape for product colors (e.g., square, circle), customizing the color display interface.
Size display mode: Choose how the product size options are displayed.
Show size type: Choose which product sizes to display (All sizes, Only available sizes).
Enable size limit: Enables or disables the limit on the number of product sizes displayed
Maximum size to show: Limits the number of product sizes displayed, with "0" for responsive auto-adjustment based on screen resolution. (Requires size limit to be enabled.)
Right to left: Enable this option to activate right-to-left (RTL) language support. When enabled, the entire page layout, text direction, and components like carousels/slideshows will be mirrored to accommodate the reading direction of languages

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.