Row

Overview #

The Row block is a versatile element designed to enhance the functionality of the Accordion section. It allows users to display content dynamically from a blog post or page, or by directly updating the row's content settings. This block is particularly useful for creating expandable information tabs, such as FAQs or additional details, within an accordion layout.

Key components and functionality #

Display settings

The display settings allow you to control how the Row appears when the page loads.

• Display open by default: This setting allows the Row to be displayed open by default when the page loads. This can be useful for highlighting important information that you want users to see immediately.

Content source

These settings enable the integration of dynamic content from your site.

• Blog post: This setting enables the selection of a specific blog post to display within the Row, allowing for dynamic content integration from your blog.
• Page: This setting allows you to select a specific page to display within the Row, providing flexibility in showcasing static content from your site.

Content display

These settings control how content is displayed within the Row.

• Show excerpt: This option enables the display of the post or page excerpt within the accordion, instead of the full content. This is useful for providing a brief overview or summary.
  • Default: false
• Show link to content: Automatically adds a button linking to the content, enhancing navigation and user engagement.

Visual elements

These settings allow you to customize the visual elements of the Row.

• Heading icon: Allows you to add an icon next to the heading, providing a visual cue or emphasis.
• Heading: Defines the heading text for the Row. This is the main title that users will see.
  • Default: Row
• Content: This setting allows you to add rich text content using a rich text editor. You can include links and basic formatting such as bold and italic text.
  • Default: "

    Add relevant text content with the richtext editor. Note that you can also include <a href="#">links and basic formatting in this content, e.g. bold and italic.

    "

Button settings

These settings control the appearance and functionality of buttons within the Row.

• Button icon: Allows you to add an icon to the button, enhancing its visual appeal.
• Button text: Defines the text displayed on the button. This is crucial for guiding user actions.
• Button link: Specifies the URL that the button will link to, facilitating navigation to other pages or resources.
• Button style: Offers various styling options for the button, allowing you to match it with your site's design.
  • Options: Primary, Secondary, Extra large, Plain, Small, Small secondary
• Button layout: Determines the layout of the button, including the position of the icon relative to the text.
  • Options: Icon left, Icon right, Icon only

Imagery settings

These settings allow you to configure the layout and appearance of imagery within the Row.

• Imagery layout: Determines the position of imagery within the Row.
  • Options: Top, Bottom
  • Default: Bottom
• Image: Allows you to select an image to display within the Row, enhancing visual engagement.

Video settings

These settings enable the integration and customization of video content within the Row.

• Video service URL: Accepts YouTube or Vimeo links, enabling the integration of video content within the Row.
• Shopify-hosted video: Allows you to use videos hosted on your platform, ensuring optimal performance and control.
• Video poster image: Recommended for hosted videos, this image will display as the first frame of your video and will fade out when clicked.
• Aspect ratio: Defines the aspect ratio for images and videos, ensuring they display correctly across different devices.
  • Options: Default, Landscape, Portrait, Square, Ultrawide, Widescreen
  • Default: Default
• Autoplay video: Enables the video to play automatically when the page loads, enhancing user engagement.
• Loop video: Allows the video to loop continuously, which can be useful for background videos or promotional content.
• Mute video: Mutes the video by default, which is often recommended for autoplay videos to avoid disrupting the user experience.
  • Default: true
• Show video player controls: Displays controls for the video player, allowing users to play, pause, and adjust the volume.
  • Default: true

Visibility settings

These settings control the visibility of the Row across different devices, allowing for responsive design adjustments.

• Visibility: Controls the visibility of the Row across different devices.
  • Options: Do not hide, Hide on desktop, Hide on mobile
  • Default: Do not hide

Available in sections #

• Accordion

Usage examples #

1. FAQ Section: Use the Row block within an Accordion section to create a comprehensive FAQ section. Each row can represent a question, with the content providing the answer. Utilize the "Show open by default" setting for the most frequently asked questions.

2. Product Details: Integrate dynamic content from a blog post or page to provide detailed product information. Use the "Show link to content" setting to guide users to related products or additional resources.

3. Video Showcase: Display a promotional video using the "Video service URL" setting. Enhance the user experience by enabling "Autoplay video" and "Loop video" for continuous playback.

By leveraging these settings and functionalities, you can create a dynamic and engaging user experience that is both informative and visually appealing.