> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Featured Collections Links

> Promote multiple collections simultaneously with three distinct display styles: simple links, lifestyle image tiles, or product image tiles

## What this section does

The **Promotional Collections** section (internally called `featured-collections-links`) creates a versatile multi-collection showcase with three distinct visual styles:

* **Links** — Simple text-based collection links
* **Image tiles** — Visual tiles using collection or custom images
* **Product tiles** — Product-focused tiles overlaying featured product images

The section uses a split-screen layout with a promotional image and heading on one side, and collection links/tiles added via blocks on the other.

<Frame>
  <img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/galantis/connect/placeholder.png" alt="Promotional Collections Section" />
</Frame>

## Getting started

<Steps>
  <Step title="Add the section">
    From the Theme Customizer, click **Add section** and select **Promotional collections**
  </Step>

  <Step title="Choose display style">
    Set the **Types** dropdown to Links, Lifestyle image tiles, or Product image tiles based on your desired visual impact
  </Step>

  <Step title="Add collection blocks">
    Add **Collection link** blocks (typically 4-6) for each collection you want to promote, configuring images and links as needed
  </Step>

  <Step title="Configure layout">
    Upload a main promotional image, set your heading/subheading, and adjust section height and spacing
  </Step>
</Steps>

## Section settings

<Tabs>
  <Tab title="Display & Content">
    <AccordionGroup>
      <Accordion title="Types" icon="layer-group">
        **Dropdown** (default: Links)

        Controls the visual style of collection presentation:

        * **Links** — Minimal text links with arrows, fast-loading and straightforward
        * **Lifestyle image tiles** — Visual tiles using collection featured images or custom block images
        * **Product image tiles** — Product-focused tiles overlaying images of 3 featured products

        **When to use each**:

        * **Links**: Quick navigation without visual distraction
        * **Image tiles**: Balanced visuals for category exploration
        * **Product tiles**: Maximum product emphasis while promoting collections
      </Accordion>

      <Accordion title="Flip image/content position" icon="right-left">
        **Checkbox** (default: unchecked)

        Reverses the layout to swap positions of main image and collection links:

        * Unchecked: Image on left, collection links on right
        * Checked: Collection links on left, image on right

        Use when stacking multiple sections to create visual variety.
      </Accordion>

      <Accordion title="Heading" icon="heading">
        **Text field** (default: "Highlight multiple collection links")

        Main heading that introduces the collection grouping (e.g., "Shop by Category", "Explore Collections").
      </Accordion>

      <Accordion title="Subheading" icon="align-left">
        **Textarea** (default: "Collections")

        Supporting text below the heading that provides additional context.
      </Accordion>

      <Accordion title="Image" icon="image">
        **Image picker** — Upload or select a promotional image for the content side

        * Recommended size: 1440x1620px
        * Appears on one side of the split-screen layout
        * Should complement the collections being promoted

        **Image height - mobile** — Range slider: 0-100% (default: 100%)

        * Controls the height of this image on mobile devices
        * 100% = image fills the full section height on mobile
      </Accordion>

      <Accordion title="Enable border effect" icon="border-all">
        **Checkbox** (default: checked)

        Adds a decorative border effect around the main section image.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Products">
    <AccordionGroup>
      <Accordion title="Product - 1, 2, 3" icon="bag-shopping">
        **Product pickers** — Select 3 featured products

        * **Product - 1**: First featured product
        * **Product - 2**: Second featured product
        * **Product - 3**: Third featured product

        <Warning>These products **only display** when Types is set to "Product image tiles". They have no effect in Links or Lifestyle image tiles modes.</Warning>

        **Purpose**: When using Product tiles mode, these products serve as the background images for collection tiles, creating a product-focused visual style.

        **Best practice**: Choose products that represent the collections well or are hero products from those categories.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Layout">
    <AccordionGroup>
      <Accordion title="Section height" icon="arrows-up-down-left-right">
        **Range slider** — 20vw to 100vw (default: 55vw)

        Controls the minimum height of the entire section in viewport width units.

        * **55vw** (default): Section is 55% of the viewport width in height
        * Lower values (20-40vw): More compact, less dramatic
        * Higher values (60-100vw): More dramatic, full-screen feel

        <Info>Using viewport width units (vw) ensures the section scales proportionally with screen size.</Info>
      </Accordion>

      <Accordion title="Section width" icon="arrows-left-right">
        **Dropdown** (default: Full width)

        Controls the maximum width of the section:

        * **Page width** — Standard container matching theme page width
        * **Full width** — Edge-to-edge display (recommended for maximum impact)
      </Accordion>

      <Accordion title="Spacing - Desktop" icon="arrows-up-down">
        **Dropdown** (default: Default)

        Controls vertical spacing above and below the section on desktop devices:

        * **Default** — Standard spacing for balanced layouts
        * **Medium** — Moderate spacing for tighter designs
        * **Compact** — Minimal spacing
        * **None** — No spacing for seamless layouts
      </Accordion>

      <Accordion title="Spacing - Mobile" icon="mobile">
        **Dropdown** (default: Compact)

        Controls vertical spacing above and below the section on mobile devices:

        * **Default** — Standard mobile spacing
        * **Compact** — Reduced spacing (recommended)
        * **None** — No spacing for seamless mobile layouts
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

## Block types

### Collection link block

Add **Collection link** blocks to promote individual collections. Each block creates one collection link or tile depending on the Types setting.

<AccordionGroup>
  <Accordion title="Collection" icon="grid-2">
    **Collection picker** — Select which Shopify collection this link represents

    The collection provides:

    * Collection name (used as default link text)
    * Collection URL (used as default destination)
    * Collection featured image (used in Image tile and Product tile modes)
  </Accordion>

  <Accordion title="Text color" icon="palette">
    **Dropdown** (default: Main)

    Controls the text color for collection names/links:

    * **Main** — Primary text color from theme
    * **Accent** — Accent color from theme

    <Warning>This setting **only applies** to Lifestyle image tiles and Product image tiles modes. It has no effect when Types is set to Links.</Warning>
  </Accordion>

  <Accordion title="Link text" icon="text">
    **Text field** (default: "All")

    Custom text to display for this collection link. Can override the collection's default name.

    Examples: "Shop All", "View Collection", custom category names
  </Accordion>

  <Accordion title="Link URL" icon="arrow-up-right-from-square">
    **URL field** (default: /collections)

    Custom destination URL for this collection link.

    * **Overwrites the collection URL** if provided
    * Use to link to custom landing pages, filtered collections, or external pages
    * Leave default to use the collection's standard URL
  </Accordion>

  <Accordion title="Image" icon="image">
    **Image picker** (optional)

    Custom image for this collection tile.

    * **Overwrites the collection's featured image** when provided
    * Only relevant for **Lifestyle image tiles** and **Product image tiles** modes
    * Has no effect in **Links** mode

    Use custom images to:

    * Override collection images that don't match your desired style
    * Ensure consistent image quality and dimensions across tiles
    * Create themed or seasonal variations
  </Accordion>
</AccordionGroup>

**How to add collection blocks**:

1. In the Theme Customizer, click **Add block**
2. Select **Collection link**
3. Choose the collection and configure settings
4. Repeat to add more collections (typically 4-6)
5. Drag blocks to reorder collections

## Best practices

<CardGroup cols={2}>
  <Card title="Optimal collection count" icon="hashtag">
    Add 4-6 collection link blocks for balanced display. Too few looks sparse, too many overwhelms the layout and slows decision-making.
  </Card>

  <Card title="Choose the right type" icon="layer-group">
    Use Links for minimal distraction, Image tiles for balanced visual browsing, and Product tiles when products should be the hero.
  </Card>

  <Card title="Section height strategy" icon="ruler-vertical">
    Keep default 55vw for most use cases. Use 40-50vw for compact sections, 60-80vw for dramatic, full-screen experiences.
  </Card>

  <Card title="Fullwidth for impact" icon="maximize">
    Use Full width (default) for maximum visual drama. Only switch to Page width if matching other contained sections.
  </Card>

  <Card title="Product tile alignment" icon="bag-shopping">
    When using Product tiles, choose the 3 featured products carefully—they should represent or complement the collections being promoted.
  </Card>

  <Card title="Consistent tile images" icon="images">
    For Image tiles mode, ensure all collection images (or custom block images) have consistent style, dimensions, and quality.
  </Card>

  <Card title="Create visual rhythm" icon="wave-square">
    Use the flip setting when stacking multiple sections to alternate layouts and create a flowing, magazine-style design.
  </Card>

  <Card title="Update seasonally" icon="calendar">
    Refresh collection selections, images, and heading/subheading text seasonally to keep the section relevant and timely.
  </Card>
</CardGroup>

## Common use cases

**Category navigation hub** — Create a visual directory of your main product categories (e.g., "Men", "Women", "Kids", "Accessories")

**Shop by style** — Promote collections organized by aesthetic, occasion, or theme (e.g., "Casual", "Formal", "Outdoor", "Travel")

**Seasonal campaigns** — Highlight seasonal collections with timely imagery (e.g., "Summer Essentials", "Holiday Gifts", "Back to School")

**Brand collections** — Showcase collections by brand or designer for multi-brand retailers

**Sale promotions** — Feature sale or clearance collections alongside regular-priced categories

## Layout behavior

**Split-screen composition**:

* One side: Main promotional image with heading and subheading
* Other side: Collection links/tiles (added via blocks)
* Flip setting reverses which side is which

**Desktop**:

* Links mode: Vertical list of text links with arrows
* Image tiles: Grid of image tiles (2-3 columns based on count)
* Product tiles: Grid of tiles overlaying product images

**Mobile**:

* Stacks vertically: image at top, then collection links/tiles
* Flip setting does not affect mobile layout

**Tile behavior**:

* Image tiles: Each shows collection image (or custom block image) with text overlay
* Product tiles: Each shows one of the 3 featured products with collection name overlay
* Links: Simple text links, no images

## Display type comparison

| Feature             | Links            | Image Tiles       | Product Tiles     |
| ------------------- | ---------------- | ----------------- | ----------------- |
| **Visual impact**   | Minimal          | Medium            | High              |
| **Page load**       | Fastest          | Medium            | Slower            |
| **Best for**        | Quick navigation | Category browsing | Product focus     |
| **Images used**     | None             | Collection/custom | Featured products |
| **Mobile friendly** | Excellent        | Good              | Good              |
| **Decision speed**  | Fast             | Medium            | Slower            |

## Related sections

* **Featured Collection** — Promote a single collection with product grid and split-screen layout
* **Featured Products** — Display curated products in slideshow or grid format
* **Hero** — Full-width banner sections for dramatic promotional content