Introducing Stiletto - the essential Shopify theme to fuel your ecommerce growth. Learn more.

Collapsible row list

The Collapsible Row List section shows expandable rows that customers can open to read more about certain topics or find answers to common questions. Use this section to anticipate your customers needs and share information about your store and products.

Caollapsible row list section
Caollapsible row list section

Set up section

Add this section to any template (except Checkout) and re-order its position. You can use this section multiple times on the same page with different content and settings.

Note: New sections will appear on all pages that use the same template. To add sections to specific pages only, learn how to create and assign multiple templates.

Steps

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

  2. In the side panel, click (+) Add section and select Blog posts.

  3. Change the order of your sections by using the drag and drop handles ⋮⋮

Add row items

Each Row item has a heading, expandable text content, and an optional icon.

  1. Click on a Row block to open the block settings.

    Click + Add Item to create new row items.

    Click Remove block or the eye icon to delete or hide a block.

  2. Enter text for the Heading to introduce a topic or pose a question.

  3. Enter text for the Text to say more about a topic or answer a question.

    Use the formatting buttons to add bold, italic, or linked text.

  4. (Optional.) Click on the Collapsible row list section to set the Item heading font to Heading or Body as set in your theme font settings.

  5. Click Save.

Section headings

Add a heading as the title for the section and change the heading size and alignment.

Steps

  1. Click on the Collapsible row list section to open the section settings.

    Collapsible row section settings
    Collapsible row section settings
  2. Enter Heading text to display a section title in the top-left.

    The default heading is "Accordion list."

  3. Change the Heading size to Small, Medium, or Large.

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

  5. Change the Button label (e.g. "View all posts").

    Leave this field blank to remove the button.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  6. Click Save.

Section style

Adjust the width and style of the overall section with an optional top divider to clearly separate other sections on the page.

Steps

In your theme editor (Customize):

  1. Click on the Collapsible row list section to open the section settings.

  2. Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

    Learn more about Section animations in Stiletto.

  3. Choose to display a Top divider that separates sections with a Solid line.

    The Top divider uses the Lines and borders color selected in the Theme Settings.

  4. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

  5. Set the Content width to display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

  6. Click Save.

Collapsible row section settings

Click on the Collapsible row list section to find the following settings:

Configuration Settings

Heading

Enter text to display a section title above the row list.

Heading size

Display heading text as Small, Medium, or Large.

Heading alignment

Position heading text to the Left or Center above row list.

Item heading font

Use the Heading or Body font for the row list text.

The heading and body font are set in the Theme settings.

Section style settings

Click on the Collapsible row list section to find the following section style settings:

Configuration Settings

Enable animation

Choose whether to Enable animation to show visual effects when scrolling, hovering, or interacting with the section.

Learn more about Section animations in Stiletto.

Top divider

Display a Solid line above the section to separate it from the above section.

Padding

Add spacing around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

Content width

Display the section at Full width or use the slider to set a custom width between 400 - 1000 pixels.

Collapsible row block settings

Click on the Row blocks to find the following block settings:

Configuration Settings

Expand by default

Choose whether to load the row item as already opened with the text revealed.

Icon

Display one of 30+ icons next to the heading of the row item.

Heading

Enter text for the row item heading. We recommend using a short title or question that is answered in by the row list text.

Text

Enter text to reveal beneath the heading that expands on a topic or answers a question.

Contact

🇨🇦 Fluorescent Design Inc.

Send us a message
  • Toronto OfficeMonday to Friday, 10am to 6pm ET
  • Victoria (B.C.) OfficeMonday to Friday, 10am to 6pm PT
  • Average Response Time~1 Business Day
* Excludes statutory holidays. All offices closed to the public.