Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Customize page style
  • Page header
  • Select collections to show
  • Change layout
  • Set up collection images
  • Change image aspect ratio
  • Add image overlay

Was this helpful?

  1. Collections

Collection list page

Last updated 4 months ago

Was this helpful?

The Collections list template provides the layout and design of the /collections page that displays your store's collections in a grid. Use this page to give customers an overview of all or selected collections.

Customize page style


Click the page section to edit the general styles, available for all page templates:

Page header


Choose to show the Page title and add optional Text below the title.

Click Collection list page section to find settings

Setting
Description

Show page title

Display the title of the collection list page.

Text

Add multiple lines of rich text to describe the page.

Select collections to show


By default, the Collection list shows all published collections. You can choose to display only Selected collections. To customize your list, choose 'Selected' and add collection to the collection list.

Click Collection list page section to find settings

Setting
Description
Options

Collection to show

Choose which collections to display on the page.

All Default Selected

Change layout


Change the number of columns to display for desktop and mobile screens.

Click Collection list page section to find settings

Setting
Description
Options

Number of columns on desktop

Select the number of collections per row on desktop screens.

2 3 4 Default

Number of columns on mobile

Select the number of collections per row on mobile screens.

1 Default 2

Number of rows on desktop

Set the number of rows to display on desktop.

3-10 Default: 5

Set up collection images


Choose which images to use for the collection items. By default, the collection image will be used. If no collection image is set, the first product's image will be used.

To change the collection image, go to Products > Collections in your Shopify admin. Click the name of the collection, then click Add image or Edit > Add image.

Click Collection list section to find settings

Setting
Description
Options

Image source

Choose which image to display for the collection list items.

First product image Collection image Default

Change image aspect ratio


Change the aspect ratio to crop images to be a uniform shape.

The aspect ratio of an image is the proportion between its width and height (w:h). A square image has equal width and height (1:1), whereas most images are either wider (2:1) or taller (1:2).

Click Collection list section to find settings

Setting
Description
Options

Aspect ratio

Select an aspect ratio to crop images to be a uniform shape, or select Natural to display images in their original shape.

Natural Default Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

Add image overlay


The image overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readability.

  • Choose a Color scheme for the overlay and overlay text

  • Change the Opacity to make the overlay more or less transparent

Click Collection list section to find settings

Setting
Description
Options

Overlay opacity

Use the slider to change the transparency of the overlay.

0 - 100% Default: 20%

Collections are created and edited in your Shopify admin. See Shopify's to learn how to group products into collections.

Collections manual ↗
Cover

Color scheme

Cover

Section width

Cover

Section padding