Fluorescent
Cornerstone
Cornerstone
  • Cornerstone Help Center
    • Start using Cornerstone
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Video tutorials
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 heading tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
  • Theme styles
    • Theme settings
    • Style presets
      • Demo layouts
    • Colors
    • Fonts
    • Animation
  • Pages
    • Templates
      • Home page
      • Blog page
      • Blog posts
      • Collections list page
      • Contact page
      • Customer accounts
      • Password page
      • Search page
      • 404 page
    • Sections
      • Section styles
      • Content blocks
      • Blog posts
      • Collapsible row list
      • Collection list
      • Collection list buttons
      • Contact form
      • Countdown banner
      • Countdown bar
      • Featured collection
      • Featured collection with media
      • Featured product
      • Grid
      • Icon with text columns
      • Image hero
      • Media with content split
      • Multi-column
      • Newsletter
      • Newsletter compact
      • Overlapping media with content
      • Promotion grid
      • Quick links
      • Rich text
      • Sales banner
      • Scrolling content
      • Slideshow
      • Tabbed collections
      • Testimonials
      • Video hero
    • Popups
      • Sign up popup
      • Age verification
      • Countdown signup popup
      • Promotional popup
  • Header
    • Announcement bar
      • Language selector
      • Country selector
      • Social media icons
      • Announcements
    • Header
      • Logo
      • Layout and style
      • Mega navigation
      • Transparent header
    • Mobile menu
    • Search bar
  • Footer
    • Footer
      • Contact and social block
      • Links block
      • Logo block
      • Newsletter and social block
      • Text and image block
      • Language and currency
      • Payment icons
      • Custom liquid
  • Products
    • Product listings
      • Layout and style
      • Product card details
    • Product badges
    • Quick shop
  • Product pages
    • Product template
    • Layout and style
      • Media gallery
      • Sticky product details
      • Recommended products sidebar
      • Breadcrumbs
      • Navigation buttons
      • Gift card recipient form
    • Overview blocks
      • Product header
      • Description
      • Variant selector
      • Buy buttons
      • Share icons
      • Collapsible rows block
      • Complementary products
      • Custom option
      • Customer support block
      • Image block
      • Image with text block
      • Information popup
      • Product labels
      • Payments and trust
      • Stock level indicator
      • Text block
      • Text columns with icons
      • Text list with icons
      • App blocks
    • Variant options
      • Chips
      • Swatches
        • Enable swatches
        • Use default colors
        • Use custom colors
        • Use custom images
        • Change swatch styles
        • Show on product cards
        • Dynamic option availability
      • Sibling product swatches
      • Media grouping
    • Product recommendations
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Quick cart
      • Added to cart popup
    • Free shipping bar
    • Low inventory warning
    • Cross sells
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up section
  • Section styles
  • Select feature collection
  • Collection items style
  • Section layout
  • Section header

Was this helpful?

  1. Pages
  2. Sections

Collection list buttons

Last updated 1 month ago

Was this helpful?

Use the Collection lists buttons section to display selected collections as clickable buttons, either in multiple rows or in a single row slider that visitors can swipe through.

Editing templates will change all pages that use the same template. for different page layouts, or in the same template.

Set up section


In the editor side panel, click (+) Add section and select Collection list buttons. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles

Sections include general styles. Click the section to find options for spacing, and animations.

Select feature collection


Select multiple Collections to display as buttons that link to those collections.

We recommend adding a Collection image in your Shopify Admin. If no image is set, Cornerstone will use a product image from that collection by default.

STEPS

In your theme editor (Customize):

  1. Click on Collection list buttons to open the settings.

  2. Under the Collection listing, use the Select collections button to check off all the collections you want to feature.

  3. Select the Number of columns to display on both desktop and mobile screens_._

    The size of the collection images will change according to the number of columns.

  4. In the Collection list, click and hold the drag-and-drop handles ⋮⋮ to reorder your collections.

  5. Click Save.

Collection items style


Customize the appearance and shape of the collection images.

Click section to find settings

Setting
Description

Show product counts

Choose to display the number of products in each collection.

Style

Choose to display collection items with a simple border (Outlined) or a solid color background (Filled).

Shape

Choose to display collection items as a Rectangle or with Slightly rounded corners.

Image source

Choose to display the Collection image or First product image for the collection items.

Image position

Display images to the Left or Right of collection item titles.

Image aspect ratio

Apply circle crop to images

Choose to crop all images to appear as circles. This setting applies only when the Image aspect ratio is set to Square.

Image spacing

For both desktop and mobile, change the space around images: between 0px and 20px.

Image size

For both desktop and mobile, set the pixel width of images for mobile screens: between 40 and 80 pixels.

Title font

Set the collection title font to the Body or Heading font selected in your theme settings.

Section layout


Display collections in a Grid or single-row Slider. Then choose the Number of columns to display in one row.

Click section to find settings

Setting
Description

Number of columns on desktop

Choose how many collections to show per row on desktop screens: either 3 or 4 columns.

Number of rows on desktop

Choose how many rows of collection items to display on desktop screens. You can Show all rows of collection items at once or limit the initial number of rows between 1 and 5. Visitors can reveal additional rows by clicking a “Show all” button.

Grid spacing

Change the spacing between collection list buttons. Select Comfortable for more spacing or Compact for less.

Number of columns on mobile

Choose how many collections to show per row on mobile screens: either 2 or 3 columns.

Number of rows on mobile

Choose how many rows of collection items to display on mobile screens. You can Show all rows of collection items at once or limit the initial number of rows between 2 and 5. Visitors can reveal additional rows by clicking a “Show all” button.

This settings does not apply if you enable the slider.

Enable slider on mobile

Display collection list items in a single-row carousel that visitors can swipe left and right view more.

Section header


Add section headings and an optional button above the collection list.

STEPS

In your theme editor (Customize):

  1. Click on Collection list to open the section settings.

  2. Enter Accent text to display a small label above the heading.

  3. Enter Heading text to display a section title in the top-left.

    The default heading is "Collection list."

  4. Enter Subheading text to display below the heading.

  5. Select or paste a URL for the Button Link.

    The link is set to "All collections" by default. You can customize your list of collections in the Collections list template.

  6. Change the Button label (e.g. "View all collections").

    Leave this field blank to remove the button.

  7. Click Save.

Setting
Description

Center header content

Display headings in the center above the section. Uncheck this option to align headings to the left.

Accent

Add text to show a small heading above the main section heading.

Heading

Add text to show a main heading above the section.

Subheading

Add text to show a subheading below the main heading.

Maximum text width

Set the maximum width of heading text between 400 and 1000 pixels.


Related links

Choose to crop all images to be a single uniform shape. Select Portrait (2:3), Portrait (4:5), Square (1:1), Landscape (5:4), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our .

Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's .

The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more,

Section spacing

Section animations

Rich text editor guide ↗
read "What is a Call to Action?"
Collection list
Collection list page
Featured collection
Featured collection with media
show dynamic page content
Create new templates
Image settings guide
Page cover image