Seventh > Sections > Scrolling cards

Scrolling Cards

The Scrolling Cards section creates a horizontal scrolling display where cards scroll past a fixed media area or fixed text content. Perfect for creating engaging, interactive product showcases or storytelling experiences.

What It Does

This section displays cards in a scrolling format where:

• Cards scroll horizontally while media or text stays fixed
• Two display modes: Fixed text content or Fixed media
• Cards can contain any content blocks
• Creates an immersive, interactive browsing experience

Section Settings Explained

Type Options

Type Controls the scrolling behavior:

• Fixed Text Content - Text area stays fixed while cards scroll
• Fixed Media - Media area stays fixed while cards scroll

Media Options

Media Width Controls how much space the media area takes

Fit Media Inside Viewport (Only appears when "Fixed Media" type is selected)

• When enabled: Media fits within the viewport
• When disabled: Media can extend beyond viewport

Media Position Where the media appears

Spacing Between Media and Content (Only appears when media position is not "Center")

• Controls gap between media and scrolling cards

Stack Blocks on Mobile (Only appears when media position is "Center")

• When enabled: Cards stack vertically on mobile
• When disabled: Cards maintain horizontal scroll on mobile

Text Content Options

Spacing Between Media (Only appears when type is "Fixed Text Content" and media is not centered)

• Controls vertical spacing between scrolling card groups
• Options: None, XSmall (10vh), Small (25vh), Medium (50vh), Large (75vh), XLarge (90vh)

Text Container Alignment (Only appears when type is "Fixed Text Content")

• Controls vertical position of text content
• Options: Top, Center, Bottom

Text Width Controls how wide the text content area is

Spacing Between Blocks

• Controls gap between blocks in the text content area

Text Alignment

• Align text to left, center, or right

Section Design Options

Color Scheme

• Choose from your theme's color schemes
• Applies to the entire section

Top Padding

• Controls space above the section

Bottom Padding

• Controls space below the section

Scrolling Card Options

Each card in the Scrolling Cards section is a Scrolling Card with these options:

Card Content

Scrolling Card Block

• Can contain any common blocks (Heading, Text, Image, Button, Video, etc.)
• Cards scroll horizontally while media/text stays fixed
• Each card can have different content and styling

Card Styling

Cards have standard card styling options:

• Text alignment
• Padding and spacing
• Background colors or images
• Border radius
• Color schemes

Available Blocks in Scrolling Cards

Each Scrolling Card can contain:

Common Blocks:

• Heading
• Text
• Image
• Button
• Video
• Icon
• Divider
• Empty Space
• Caption
• Star Rating
• Group

Special Blocks:

• Custom (for custom HTML/Liquid)
• App blocks (from installed apps)

Common Use Cases

Product Showcase with Fixed Media

• Use "Fixed Media" type
• Place product images in the fixed media area
• Scroll through product details, features, or variations in cards
• Great for showing product collections

Storytelling with Fixed Text

• Use "Fixed Text Content" type
• Keep story text fixed
• Scroll through supporting images or content in cards
• Perfect for brand stories or product narratives

Interactive Lookbook

• Use "Fixed Media" type with center positioning
• Feature a main image in the center
• Scroll through related looks or products around it
• Creates an engaging browsing experience

Feature Highlights

• Use "Fixed Text Content" type
• Keep feature descriptions fixed
• Scroll through feature images or examples
• Great for showcasing product features

Tips for Success

Layout

• Media Position - Left/right works best for most use cases
• Media Width - 33-50% provides good balance
• Card Content - Keep card content focused and concise
• Spacing - Use appropriate spacing for readability

Content

• Card Count - 3-6 cards work best for smooth scrolling
• Consistent Styling - Use similar card styles for cohesion
• Clear Hierarchy - Make the fixed content the focal point

Design

• Color Contrast - Ensure text is readable on backgrounds
• Media Quality - Use high-quality images for the fixed media
• Smooth Scrolling - Test scrolling performance

Mobile

• Mobile Behavior - Media automatically moves above/below on mobile
• Stacking - Consider how cards stack on mobile devices
• Touch Scrolling - Ensure cards are easy to scroll on touch devices

Troubleshooting

Cards Not Scrolling

Problem: Cards don't scroll horizontally.

Solutions:

1. Check Card Count - Ensure you have multiple cards added
2. Browser Support - Verify browser supports horizontal scrolling
3. JavaScript - Ensure theme JavaScript is loading

Media Not Fixed

Problem: Media scrolls with the cards instead of staying fixed.

Solutions:

1. Check Type Setting - Verify "Fixed Media" is selected for fixed media
2. Check Position - Media position affects fixed behavior
3. Viewport Size - Fixed behavior may change on very small screens

Spacing Issues

Problem: Spacing between elements looks wrong.

Solutions:

1. Adjust Spacing Settings - Use spacing controls to fine-tune gaps
2. Check Media Position - Center positioning has different spacing options
3. Mobile Considerations - Spacing may differ on mobile devices

Content Overflow

Problem: Content doesn't fit properly in cards.

Solutions:

1. Reduce Content - Remove some blocks or text
2. Adjust Card Styling - Increase padding or adjust spacing
3. Card Size - Cards have fixed widths, adjust content to fit