Nexus theme documentation

Featured Collection Tab – Nexus

The Featured Collection Tab section in Nexus lets you showcase multiple product collections in a single tabbed interface. Each tab corresponds to a specific collection, and clicking a tab filters the product grid to display only that collection's products. This is ideal for stores with multiple categories who want to give shoppers a quick, seamless way to browse across collections without leaving the page.

General Settings

Color scheme: Select a color scheme (e.g., Scheme 1) to define the background and text colors for the entire Featured Collection Tab section.
Heading: Enter the section title displayed above the tabbed product grid (e.g., "Something Special For Every Occasion."). Use the rich text editor to apply bold, italic, or link formatting to the heading text.
Font style: Choose whether the heading text follows the theme's Heading font or the Body font style.
Font size: Set the HTML heading level for the section title. Options include H1, H2, H3, H4, and H5 (default: H3).
Products to show: Set the total number of products to display within each tab (e.g., 10). Use the slider to adjust the count.
Enable slider: Toggle on to display the products in a horizontal carousel/slider instead of a static grid. When enabled, shoppers scroll through products left and right within each tab.

Product Card Settings

Image aspect ratio: Control the shape of product images on each card. Options include Portrait (tall), Square, Landscape (wide), and Adapt (uses the image's original dimensions).
Show secondary image on hover: Toggle on to display an alternate product image when a shopper hovers over the card, providing a quick additional view without any extra clicks.
Show vendor: Toggle on to display the product vendor/brand name below the product title on each card.
Enable quick view: Toggle on to allow customers to open a quick-view popup with product details and an add-to-cart option directly from the product grid, without navigating away from the page.
Show image background: Toggle on to display a solid colored background area behind each product image within the card.
Image background color: When "Show image background" is enabled, set the background color applied behind product images (e.g., #F9F6F8 for a soft blush tone).

Add to Cart Color Settings

Enable add to cart color: Toggle on to apply fully custom colors to the add-to-cart button displayed on each product card.
Background: Set the default background color of the add-to-cart button (e.g., #DCC5D6 for a muted mauve).
Label: Set the text/icon color of the add-to-cart button in its default state (e.g., #38212E for a dark plum).
Hover background: Set the background color of the add-to-cart button when a customer hovers their cursor over it, creating a visual interaction cue.
Hover Label: Set the text/icon color of the add-to-cart button on hover (e.g., #FFFFFF for white text on a darker hover background).

View All Button

Show view all: Toggle on to display a "View All" button below the tabbed product grid that links directly to the full collection page for the active tab.
Button style: Choose the visual style for the "View All" button. Options are Primary (filled/solid style) or Secondary (outlined/ghost style).

Mobile Layout

Number of columns: Set how many product card columns appear on mobile screens. The Double column option displays two products side by side (2 columns) on mobile for a compact, thumb-friendly browsing layout.

Spacing Settings

Desktop padding top: Set the space above the section on desktop screens (e.g., 100 px).
Desktop padding bottom: Set the space below the section on desktop screens (e.g., 80 px).
Mobile padding top: Set the space above the section on mobile screens (e.g., 40 px).
Mobile padding bottom: Set the space below the section on mobile screens (e.g., 40 px).

Tab Block Settings

Each Tab block added within this section defines one of the collection tabs displayed in the tab bar (e.g., ALL, SKIN CARE, HAIR CARE). You can add up to the maximum number of tabs using the Add Tab button. The first tab added automatically becomes the default "All" tab. Clicking a tab filters the product grid to show only products from the corresponding collection.

Tab label: Enter the display name shown on the tab button in the section header (e.g., "Makeup", "Skin care", "Hair care"). This is the text customers click to filter the product grid.
Collection: Select the Shopify collection linked to this tab. When a shopper clicks the tab, the product grid updates to display only products from this collection.

How to Set Up the Featured Collection Tab Section

Go to Online Store → Themes → Customize.
On the Home page template, click Featured collection tab in the left sidebar, or click Add section → Featured collection tab to add it.
In the section settings panel, choose a Color scheme, enter a Heading, and configure font style, font size, product count, and card settings.
Click Add Tab to create a new tab block. Enter a Tab label and select the Collection to link to that tab.
Repeat to add more tabs for each collection you want to feature (e.g., Makeup, Skin care, Hair care).
Optionally enable the slider, quick view, and "View All" button.
Click Save to apply your changes.

Pro Tips:
Keep tab labels short and clear so they fit neatly in the tab bar on all screen sizes (e.g., "Makeup", "Skin Care", "Hair Care").
Use the slider mode when each collection has more than 4 products to keep the layout clean on desktop.
Enable "Show secondary image on hover" to give shoppers a richer browsing experience without extra clicks.
Use a consistent image aspect ratio across all collections to maintain a uniform, professional look in the product grid.

Nexus Shopify Theme Documentation

Categories