How to Add a FAQ Accordion to Your Shopify Store

Author - Moz

Why Add A CSS‑Only FAQ Accordion?

Static FAQ sections frustrate shoppers—long pages feel repetitive, and apps can slow load times or lock content behind fees. A CSS‑only accordion gives you clean toggle functionality with zero JavaScript, no bloat, and full control.

⚠️ Heads-up Before You Start

This method involves editing your page or product description. Always duplicate your page or product before making changes to keep a safe backup.

Step 1: Edit Or Create Your Shopify Page

From your Shopify admin:

  • Go to Online Store → Pages
  • Click Add Page and write a title, such as “FAQ”
  • Click the </> icon to view and edit the HTML code

Step 2: Paste This Code Snippet

Copy 

<style>
  /* Container */
  .faq-accordion {
    width: 95%;
    max-width: 800px;
    margin: 20px auto;
  }

  /* Accordion Style */
  details {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: #f2f2f2;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
    list-style: none;
  }

  /* Remove default arrow */
  summary::-webkit-details-marker {
    display: none;
  }

  /* Custom icon */
  summary::after {
    content: "+";
    font-size: 2rem;
    transition: transform 0.35s ease;
  }

  details[open] summary::after {
    transform: rotate(45deg);
  }

  /* Hidden content panel */
  .content {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height 0.5s ease, padding 0.5s ease;
  }

  /* Visible content panel */
  details[open] + .content {
    max-height: 200px; /* adjust to your content size */
    padding: 0 12px 12px;
  }

  .content p {
    margin: 0;
    padding: 0;
  }

  /* Tablet breakpoint */
  @media (min-width: 768px) {
    summary {
      font-size: 1.5rem;
      padding: 14px;
    }
    summary::after {
      font-size: 2.2rem;
    }
    .content {
      font-size: 1.1rem;
    }
  }

  /* Desktop breakpoint */
  @media (min-width: 1200px) {
    .faq-accordion {
      width: 70%;
    }
    summary {
      font-size: 1.7rem;
      padding: 10px;
    }
    summary::after {
      font-size: 2.5rem;
    }
  }
</style>

  
<div class="faq-accordion">
  <details name="faq">
    <summary>What is your return policy?</summary>
  </details>
  <div class="content">
    <p>We accept returns within 30 days of purchase with receipt.</p>
  </div>

  <details name="faq">
    <summary>How long does shipping take?</summary>
  </details>
  <div class="content">
    <p>Standard shipping takes 5–7 business days.</p>
  </div>

  <details name="faq">
    <summary>Do you ship internationally?</summary>
  </details>
  <div class="content">
    <p>Yes! International shipping is available—delivery times vary by country.</p>
  </div>
</div>

Step 3: Edit Your FAQ Content

  • Click again the </> icon to view plain text
  • Replace all questions and answers with your own content
  • Save and preview the page

Real-World Insight

Well-structured FAQ accordions are more than UI flair—they deliver real ROI. According to Masterful Marketing, effective FAQs reduce support workload and enhance customer satisfaction. In ecommerce specifically, using FAQ accordions can cut support tickets by up to 60% while boosting UX and engagement.

Back to blog
Work With Us