Add accordion (FAQs) to blog post

Store Design
,
1

Hey,

I want to add an accordion section to the blog post as a block.

website URL: happyoff.com

thank you so much for your attention and participation.

2

To add an accordion section to your blog post as a block on your Shopify store, you can create a custom Liquid block or use custom code with JavaScript and CSS. Here’s a step-by-step guide:

Step 1: Create a Custom Section1. Go to your Shopify admin panel.

  1. Navigate to Online Store > Themes and select Customize.
  2. Click on Add section and choose Custom liquid or create a new section by going to Edit code and adding a new section file.

Step 2: Add Custom Code

Create a new section file (e.g., accordion-section.liquid):

  1. Go to Online Store > Themes > Edit code.
  2. Under Sections, click Add a new section and name it accordion-section.
  3. Add the following code to accordion-section.liquid:

  {% for block in section.blocks %}
    

      
      
{{ block.content }}

    

  {% endfor %}

{% schema %}
{
  "name": "Accordion Section",
  "blocks": [
    {
      "type": "accordion_item",
      "name": "Accordion Item",
      "settings": [
        {
          "id": "title",
          "type": "text",
          "label": "Title"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Accordion Section",
      "category": "Blog"
    }
  ]
}
{% endschema %}
​

Step 3: Add CSS for Styling

Add the following CSS to your theme’s theme.scss.liquid or base.css file:

.accordion {
  border: 1px solid #ccc;
}

.accordion-header {
  background-color: #f1f1f1;
  cursor: pointer;
  padding: 10px;
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
}

.accordion-content {
  display: none;
  padding: 10px;
  background-color: white;
  border-top: 1px solid #ccc;
}

.accordion-header.active + .accordion-content {
  display: block;
}

Step 4: Add JavaScript for Interactivity

Insert this JavaScript code before the closing tag in theme.liquid

document.querySelectorAll('.accordion-header').forEach(button => {
  button.addEventListener('click', () => {
    button.classList.toggle('active');
    const content = button.nextElementSibling;
    if (content.style.display === 'block') {
      content.style.display = 'none';
    } else {
      content.style.display = 'block';
    }
  });
});

Step 5: Add the Section to Your Blog Post Template1. Go back to Online Store > Themes > Customize.

  1. Add the Accordion Section block to your blog post template.

This should give you a functional accordion section on your blog post where you can add content as collapsible panels. Let me know if you need help with further customization or specific tweaks!

3

Hi @Optimist1

You can add an accordion on each it can be done using liquid customization
Create Metafields for Blog Posts:

  1. In your Shopify admin, go to Settings > Custom data.
  2. Under Blog posts, click Add definition to create metafields.
  3. Define each metafield:
    • Add a Namespace and Key (e.g., accordion.title for the accordion title).
    • Select the Type based on the data, such as text for titles or rich text for content.

Add Liquid Code:

  1. Go to Online Store > Themes > Edit Code.

  2. Open the article.liquid or blog.liquid template.

  3. Insert the following Liquid code to create an accordion structure based on your metafields:


  {% if article.metafields.accordion.title and article.metafields.accordion.content %}
    

      
      

        

{{ article.metafields.accordion.content }}

      

    

  {% endif %}
  • In your theme’s CSS file (theme.css or theme.scss.liquid), add this code for styling:
.accordion .accordion-item {
  border-bottom: 1px solid #ddd;
}
.accordion-header {
  background-color: #f1f1f1;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.accordion-header:hover {
  background-color: #ddd;
}
.accordion-content {
  display: none;
  padding: 15px;
  background-color: #fafafa;
}
.accordion-content p {
  margin: 0;
}
  • Add the following JavaScript code in your theme’s theme.js file or directly within the article.liquid template: javascript Copy code
document.addEventListener("DOMContentLoaded", function() {
  var accHeaders = document.querySelectorAll(".accordion-header");

  accHeaders.forEach(function(header) {
    header.addEventListener("click", function() {
      // Toggle active class
      this.classList.toggle("active");

      // Toggle content display
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  });
});

I Hope this Works Mostly for this kind of work you need an Expert but if you can do that then I that is perfect Hope this work
If This Solution Word Kindly Like this And Mark it as a Solution or Buy Me a Coffee

4

Thanks, But These codes add it as a section, I want to add it block to integrate it into my blog post

5

Please mark a solution then I will share a code shortly.

6

I want to add each blog post with its FAQs and not make a general FAQ.

7

The above code do the same it create a meta field that mean you get faqs for each blogs