Shopify Horizon Theme: Missing Accordion Headers? Here's How to Fix Them!

Ever stumbled upon a bizarre bug on your Shopify store where something that should be there… just isn’t? That’s exactly what one store owner, RYDE, recently experienced with their Horizon theme. They noticed their accordion menu content was showing up perfectly, but the actual headers or titles for each accordion section were completely missing. Not invisible due to color, just… gone. It’s a head-scratcher, especially when you’ve checked the basics!

This kind of issue can be incredibly frustrating, especially when you’re trying to provide a clean, organized user experience for your customers. Accordions are fantastic for decluttering product pages, FAQs, or any content-heavy section, so when they don’t work as expected, it’s a big deal. Fortunately, the Shopify community is a treasure trove of insights, and a fellow expert, Ploqo, jumped in with a detailed breakdown and a powerful fix.

The Mystery of the Missing Accordion Headers

RYDE described the problem clearly: the dropdown text in their Horizon theme accordion was visible, but the clickable titles that expand and collapse the sections were nowhere to be found. They’d already tried looking through the code and even consulted AI, but the culprit remained elusive. This wasn't a mobile-only glitch; it was affecting both desktop and mobile views.

Ploqo quickly identified the core issue: in the Horizon theme, the accordion title is typically stored as the summary text (often in a details__header element), separate from the content panel. When these titles vanish, it’s usually due to some custom CSS or an app injecting rules that accidentally hide or shrink them. Think of it like a mischievous piece of code telling your titles to either disappear or become impossibly small.

Common culprits include:

• font-size: 0: Making the text so tiny it's invisible.
• height: 0: Collapsing the title area completely.
• visibility: hidden: Hiding the element while still occupying its space.
• display: none: Removing the element entirely from the layout.

Ploqo even reproduced the issue, showing exactly how a single CSS rule could zero out the titles while the panel text remained:

Your Troubleshooting Checklist for Hidden Accordion Titles

Before diving into code, it’s always smart to go through a quick checklist. Here’s what Ploqo recommended:

1. Check the Heading Field: Open your accordion block in the theme editor. For each 'row' or accordion item, confirm that the Heading field actually contains your desired title text. Remember, in Horizon, the title lives in this dedicated Heading field, not within the content blocks you place inside the row.
2. Scour for Custom CSS: This is the most common culprit. Look in these places:
   • Your Theme settings (often a 'Custom CSS' or 'Advanced' section).
   • Any 'Custom Liquid' or 'Custom CSS' blocks you've added to pages or sections.
   • Any recently installed apps, especially those that modify layout or styling.
3. Search Your Theme Code: If you're comfortable digging a little deeper, go to your theme code editor (Online Store > Themes > Actions > Edit code). Search your theme files for specific CSS properties or selectors that might be causing the issue. Key terms to search for include: details__header, summary, or font-size:0.

The "Emergency Rescue" CSS Fix

Sometimes, despite your best efforts, finding the exact line of code causing the problem can be like finding a needle in a haystack. If you can’t pinpoint the source, Ploqo offered a brilliant "quick fix" that forces the titles back into visibility. This CSS snippet essentially overrides any hiding rules, bringing your titles back to life.

How to Implement the Quick Fix:

You can add this code in a couple of places:

1. Using a Custom Liquid Block: On the page where your accordion is located, you can add a 'Custom Liquid' section or block and paste the code there.
2. Using Your Theme's Custom CSS Box: Many themes have a dedicated area for custom CSS (often in Theme Settings > Custom CSS or similar). This is usually the best place for site-wide fixes.

Here’s the code you'll need:

Let’s break down what this code does:

• .accordion .details .details__header: This is a CSS selector that specifically targets the header element of your accordion.
• font-size: 1rem !important;: This sets the font size to a standard size (1rem is usually 16px) and the !important flag ensures it overrides any other conflicting font-size: 0 rules.
• line-height: 1.35 !important;: Sets a standard line height, ensuring the text isn't squashed.
• visibility: visible !important;: This makes sure the element is visible, overriding any visibility: hidden rules.
• opacity: 1 !important;: Ensures the element is fully opaque, counteracting any opacity: 0 rules.

After applying this, your accordion titles should reappear, looking something like this:

This community discussion is a perfect example of how specific, technical issues can be resolved with a bit of expert insight and targeted code. Ensuring all elements of your store function correctly is crucial for a smooth customer experience. If you’re still scratching your head after trying these steps, remember that the Shopify community is always there to help, and sometimes, a fresh pair of eyes on your store link can reveal the exact problem. Keep building amazing stores on Shopify, and don't let these little glitches slow you down!