Toggle tabs

Toggle tabs

What is a Toggle Tabs Section?

A Toggle Tabs Section, commonly used for FAQs or information breakdowns, allows content to be hidden or revealed upon clicking a heading, creating a neat, organized layout. This section enhances user experience by keeping the page clean and focused, while still providing additional information when needed.

Steps to Set Up a Toggle Tabs Section:

1. In your Shopify admin, go to Online Store > Themes and click Customize to access the theme editor.

2. Add the Toggle Tabs Section to your page from the available section options.

3. On the right side of the editor, choose a color scheme from the available options to match your theme.

4. Adjust the upper and lower section spacing to control the padding around the toggle tabs.

5. If needed, add Custom CSS for unique styling of the section.

Adding Content to Toggle Tabs:

1. Add a Heading to the section, such as "FAQ’s," to indicate the purpose of the toggle tabs.

2. Select the heading size (Small, Medium, Large) and align it to the left, center, or right as required.

3. Include a summary to give users a brief introduction to the FAQs or the type of information provided.

4. You can add a button to the section for additional functionality.

5. Define the button label and paste the URL for the destination.

6. Select a button style from Primary, Secondary, or Outline based on the visual design and align the button to the left, center, or right as per your layout preferences.

7. Now add the collapsible row block and choose the color schemes to match the theme’s aesthetic or highlight certain sections.

8. Select the heading size for the collapsible row and align it to the left, center, or right as required.

9. Include a summary to give users a brief introduction of the type of information provided.

10. Use alignment and spacing settings to ensure the section fits seamlessly into the overall page design.