Content with slider

Content with slider puts a column of text beside a slider of image cards. The text stays put while the reader moves through the cards, so it suits anything told in steps: how something is made, what goes into it, the parts of a collection.

Each card carries its own image and its own text over it, so a card can stand on its own rather than just illustrating the column beside it.

Add the section

1. In the theme editor, open the page where you want it.
2. Click Add section.
3. Under Storytelling, choose Content with slider.

The section arrives with the text column filled in and four cards in place, so you can see the shape before changing anything.

The text column

The column on the left is a content slot named Content. It comes prefilled with a heading, a short intro paragraph, and a button. Edit, reorder, or remove those blocks, or add others. Leave it empty to show only the slider.

The cards

Each card is a Slider slide block in the section's blocks. Add one with Add block, remove one, or drag to reorder. The order in the block list is the order the reader sees.

With more than one card, the slider gains arrows and a row of progress dots under the text column. Shoppers can also swipe. With a single card there is no navigation.

Open a slide to set:

• Image: the picture for that card.
• Color scheme: the colors for the text sitting on that card. Give a card with a dark image a scheme with light text so the words stay readable.

The text on a card is built from blocks nested inside the slide. Each one starts with an eyebrow, a heading, and a button. Select any of them to edit the text, or add other blocks to build a richer card.

Layout

• Content width: how much of the row the text column takes, from 24 to 48 percent. Default is 30. The slider fills the rest.
• Gap: the space between the text column and the slider, from 24 to 120 pixels.
• Aspect ratio: the shape of every card. Choose Wide (16:9), Landscape (3:2), Square (1:1), or Portrait (4:5). Default is Portrait (4:5).
• Corner radius: how rounded the cards are, from 0 to 64 pixels.

Other settings

This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings.

Tips

• The cards share one Aspect ratio, so crop your images to a consistent shape before uploading. A portrait ratio with landscape photos crops them hard at the sides.
• Keep the eyebrow on each card short. It works as a small tag over the heading (for example "Detail"), and a long one competes with the heading under it.
• Set each card's Color scheme from the image, not from the section. Cards with different images often need different schemes even though they sit in the same slider.