Brickspace Lab
Contact usContact ShopifyTry a theme
Space
Space
  • Space documentation
  • Getting started
    • Selecting theme colors
  • Theme typography
  • Guides
    • Using color and option swatches
    • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing "Add to cart" for a product
  • Disable "quick add" for a product
  • Templates
    • Collection template
  • Product template
  • Blog template
  • Article template
  • Sections
    • Sections
      • Announcement
      • Header
      • Cart drawer
      • Menu drawer
      • Search drawer
      • Footer
      • Tooltip
      • Fixed menu
      • Featured product
      • Footer
      • Fixed menu
      • Slideshow
      • Email sign-up
      • Video
      • Alt collection grid
      • Banner
      • Block reveal
      • Blog posts grid
      • Collage
      • Collapsible content
      • Collection list grid
      • Collection list slider
      • Collection slider
      • Comparison table
      • Contact form
      • Countdown
      • Custom liquid
      • Discount
      • Featured collection grid
      • Icon grid
      • Image hotspot
      • Logo list
      • Marquee
      • Navigation slider
      • Product list
      • Recently viewed
      • Rich text
      • Search banner
      • Slider
      • Split banner
      • Static chat
      • Store locater
      • Tabs
      • Testimonial grid
      • Testimonial slider
      • Text highlight
  • General
    • Changelog
      • v2.1.1
      • v2.1.0
      • v2.0.0
      • v1.2.1
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
      • v2.0.0
    • Cloning a demo theme
      • Shimmer
Powered by GitBook
On this page
  • Section overview
  • Section Settings
  • Block Settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Sections

Collection list slider

Section overview

The Collection Slider section displays a horizontally scrollable carousel of collection cards, allowing merchants to showcase multiple collections in an engaging and space-efficient manner.

Common Use Cases

  • Highlighting different product categories on the homepage

  • Featuring seasonal or trending collections in a visually appealing way

  • Creating a browsable overview of your store's catalog

  • Combining collection cards with custom content blocks for promotional messaging

Usage Tips

  • Select collections with visually consistent featured images for the most polished appearance

  • Adjust card width settings to control how many collections appear on screen at once

  • Consider enabling the split layout option for larger screens to keep heading content visible while scrolling

  • Use content blocks strategically to add promotional messaging or calls-to-action between collections

  • For mobile optimization, set card width mobile to 10/12 or 12/12 to ensure collections are properly visible

Section Settings

Setting
Description

Collection

Select which collections to display in the slider

Heading

Add a title for the slider section

Content

Add descriptive text that appears above the slider

Button label

Text for the optional button below the heading

Button url

URL for the optional button

Top spacing

Amount of space above the section (0-300px)

Bottom spacing

Amount of space below the section (0-300px)

Color scheme

Background color theme for the section

Custom color

Custom background color (when "Custom" is selected for color scheme)

Text color

Control whether text appears in light or dark mode

Border color

Set the color of section borders

Button color

Style for the button below heading content

Enable color fade

Makes the section influence the page background color as user scrolls

Border position

Where borders appear around the section

Card width mobile

Width of each card on mobile devices (1-12/12 grid)

Card width desktop

Width of each card on desktop devices (1-12/12 grid)

X alignment

Horizontal alignment of section heading content

Arrow alignment

Horizontal alignment of slider navigation arrows

Arrow placement

Vertical position of slider navigation arrows

Enable margin

Add horizontal margins to the section

Enable scroll margin

Add margins to the scrollable area

Enable split

Display heading and content next to the slider instead of above it

Enable split heading

Split the heading into multiple lines

Visibility

Control which device types the section appears on

Auto scroll delay

Time between automatic slide transitions (0 to disable)

Enable arrows

Show navigation arrows for the slider

Enable indicators

Show indicator dots for slider position

Enable scrollbar

Show scrollbar for the slider

Block Settings

Content Block

The Content block allows you to add custom text, images, or videos between collection cards in the slider. Limited to 20 blocks per section.

Setting
Description

Heading

Title text for the content block

Content

Rich text content for the block

Button label

Text for the optional button

Url

URL for the button link

Image

Upload an image to display in the block

Show image as background

Display the image as a background behind content

Video

Upload or link a video to display

Enable autoplay

Automatically play video when visible

Enable mute toggle

Show mute button on videos

Enable loop

Continuously loop video playback

Minimum height

Set minimum height for the content block

Enable padding

Add interior padding to the content block

Color scheme

Background color theme for the block

Border color

Set the border style for the block

Text color

Control whether text appears in light or dark mode

Button color

Style for the block's button

Enable gradient

Add a gradient overlay to the block background

Text position

Place text above or below the image/video

Y alignment

Vertical alignment of content within the block

X alignment

Horizontal alignment of content within the block

Last updated 1 month ago

Was this helpful?