Soul Documentation
  • Greeting
  • UPDATES
    • What's new in Soul
      • Release Notes
      • Version 3.1.0 release
      • Version 3.0.0 release
    • Demo stores
      • Elegant
      • Warm
      • Dark
  • SECTIONS
    • Header
      • Announcement bar
      • Header
    • Template sections
      • A to Z brands
      • Blog posts
      • Collage
      • Collapsible content
      • Collection list
      • Collection showcase
      • Collection spotlight grid
      • Contact form
      • Custom Liquid
      • Dynamic hover blocks
      • Email signup
      • Featured collection
      • Featured product
      • Flexible content
      • Image banner
      • Image comparison
      • Image gallery
      • Image with text
      • Image with product
      • Lookbook
      • Map
      • Multicolumn
      • Multirow
      • Rich text
      • Page
      • Recently viewed products
      • Running text with image
      • Shop the look
      • Slideshow
      • Testimonials
      • Video
    • Footer
    • Popup
  • THEME SETTINGS
    • Logo
    • Colors
    • Typography
    • Layout
    • Animations
    • Buttons
    • Variant pills
    • Inputs
    • Product cards
    • Collection cards
    • Blog cards
    • Pop-ups
    • Badges
    • Social media
    • Search behavior
    • Currency format
    • Cart
    • Breadcrumb
    • Preloading screen
    • Back to top
    • Custom CSS
  • COLLECTION LIST PAGE
    • Collections list page
  • COLLECTION PAGE
    • Collection
      • Collection banner
      • Product grid
  • PRODUCT PAGE
    • Product page
      • Product information
      • Product tabs
      • Related products
  • BLOG & BLOG POST PAGE
    • Blog page
    • Blog post page
  • CART
    • Cart
  • OTHER PAGES
    • How to create a page?
    • Search page
    • Password page
    • 404 page
  • TUTORIALS & TOPICS
    • How to enable size chart on product page
    • How to enable gift wrap option on cart page
    • How to enable free shipping notification
    • How to add a countdown timer on the product page
  • Knowledge base
    • Getting started in Shopify
    • Shopify help center
    • Shopify developers platform
  • Get Support
Powered by GitBook
On this page
  • Section settings
  • Collapsible row block
  1. SECTIONS
  2. Template sections

Collapsible content

This is a dynamic, accordion-style layout used to display common customer questions and answers as an FAQ page.

PreviousCollageNextCollection list

Last updated 4 months ago

To add this section, please follow the below steps:

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Click Add section and choose "Collapsible content".

Section settings

Setting
Description

Caption

The caption text for this section.

Heading

The title of this section.

Heading size

The size of the heading text:

  • Small

  • Medium

  • Large

  • Extra large

Heading font weight

The font weight of the heading text:

  • Regular

  • Medium

  • SemiBold

  • Bold

  • ExtraBold

  • Black

Heading alignment

The alignment of the heading text and description within the section container:

  • Left - Aligns the heading to the left.

  • Center (default) - Aligns the heading in the center.

  • Right - Aligns the heading to the right.

Description

Descriptive text for this section.

Layout

Layout for this section:

  • No container

  • Section container

  • Row container

Color scheme

Set the color for this section.

Container color scheme

Set the color for the section container. This color is visible when Layout is set to Row or Section container.

Open first collapsible row

The first row of content is displayed in its open state, allowing the content within it to be visible by default.

Image layout

Setting
Description

Image

Add the image for this section.

Image ratio

The image ratio for the image:

  • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.

  • Small - Crops the image height to 31.4rem on desktop and 19.4rem on mobile.

  • Large - Crops the image height to 69.5rem on desktop and 43.5rem on mobile.

Desktop layout

Postiton of the image on desktop:

  • Image first

  • Image second

Image is always first on mobile.

Button label

The text that displays on the button.

Button link

The URL that you want the button to link to.

Button style

Style of the button:

  • Filled

  • Text link

  • Outlined

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).

Bottom padding

Determines the height of the bottom inner space of the section. Can be from 0px to 150px, increasing arithmetically of 2px (pixel).

Collapsible row block

Setting
Description

Heading

Include a heading that explains the content.

Icon

Add a icon before the heading.

Row content

The content for this block.

Row content from page

The second content for this block. It will pull the content from the page you want to display for this block. This content will display below the Row content.