Adding Numbered Prefixes to FAQ Headers in Funnelish: A Step-by-Step Guide

Technical
1

If you’re looking to enhance the design and user experience of your FAQ section in Funnelish, adding numbered prefixes to each FAQ header is a great way to make the content more organized and easier to navigate. In this tutorial, I’ll guide you on how to dynamically add numbers to your FAQ headers using a simple JavaScript snippet.

Why Add Numbered Prefixes?

  • Improved Navigation: Numbers help users quickly reference specific questions.
  • Professional Look: It makes your FAQ section look well-structured and organized.
  • Ease of Maintenance: The numbering updates automatically, even if you add or remove FAQs.

Step 1: Access the Custom Code Editor

  1. Log in to your Funnelish account.
  2. Navigate to the funnel you want to modify.
  3. Open the Page Builder for the specific page containing the FAQ section.
  4. Go to the Custom Code section, usually found under the Settings or Scripts tab.

Step 2: Identify Your FAQ Headers

Before proceeding, ensure your FAQ headers have a unique class, like .faq-header. In most cases, this will already be present. If not, you may need to inspect your page’s HTML to confirm the class name.

For example, your FAQ headers might look like this in the HTML:

<div class="faq-header">What is the battery life of this product?</div>

Step 3: Add the JavaScript Snippet

Paste the following JavaScript code into the Custom Code section of your Funnelish page:

document.querySelectorAll('.faq-header').forEach((header, index) => {
  const number = (index + 1).toString().padStart(2, '0');
  header.innerHTML = `<span style="font-weight: bold; margin-right: 8px;">${number}.</span> ${header.innerHTML}`;
});

How It Works:

  • document.querySelectorAll('.faq-header'): Selects all FAQ headers with the .faq-header class.
  • forEach((header, index) => { ... }): Iterates over each header and gets its index.
  • index + 1: Starts the numbering from 1 (instead of 0).
  • .padStart(2, '0'): Ensures numbers have two digits (e.g., “01”, “02”).
  • header.innerHTML: Updates the content of each FAQ header by prepending a bold number.

Step 4: Save and Preview Your Changes

  1. Save the changes to the Custom Code section.
  2. Publish the page or preview it to see the results.

Your FAQ section will now look something like this:

<div class="faq-header">
  <span style="font-weight: bold; margin-right: 8px;">01.</span> What is the battery life of this product?
</div>

Bonus: Customizing the Style

You can adjust the style of the numbering by editing the span tag inside the header.innerHTML:

  • Font Size: Add font-size: 18px; for larger numbers.
  • Color: Add color: #007BFF; to change the color to blue.
  • Alignment: Add text-align: center; if needed.

Example:

header.innerHTML = `<span style="font-weight: bold; color: #007BFF; margin-right: 8px;">${number}.</span> ${header.innerHTML}`;

Step 5: Test Responsiveness

Check your FAQ section on various devices (desktop, tablet, mobile) to ensure the numbering looks good across all screen sizes.

Final Thoughts

This small tweak can significantly improve the usability and appearance of your FAQ section. If you run into any issues or need help customizing the code further, feel free to ask the Funnelish Community for assistance!