Does Shopify somehow hide the little arrow that should appear in an HTML details element? It’s not showing for me even an unmodified Horizon theme with the simplest possible details code.
/*
<details>
<summary>Accordion Title</summary>
<p>Accordion content goes here. It expands and collapses on click.</p>
</details>
*/
In fact even this forum post is displaying the details element with the arrow. Here’s that same code without the comment wrapper:
Accordion Title
Accordion content goes here. It expands and collapses on click.
I have tried using the inspect tool to see if there is anything that is hiding the summary::marker element but it simply doesn’t show at all. It’s like it doesn’t exist.
I also don’t see any theme code that affects it.
I have tried using CSS to target the marker and it isn’t having any effect, I’m still not seeing it. This is in the visual builder as well as website preview as well as live site.
Wrong questions get wrong answers and wasted time.
FTFY: Can a shopify THEME’s CSS STYLES hide <detail> element markers.
Yes , just check the styles.
WHICH inspect tool avoid ambiguity when troubleshooting, the visual theme editor is not a code source tool.
If using chrome browser dev tools inspect picker looking for pseudo elements.
Thanks Tim, that’s really helpful. I was searching for details and ::marker in the theme CSS but missed these since they are different selectors. I tested changing those and now the arrows display.
My main theme did not have any CSS (based on full theme search) for any of the selectors summary, ::marker, or ::-webkit-details-marker, yet it was also hiding the markers. I figured out it’s because the summary had display: block. So this was a different reason from Horizon.
DevTools with summary { display: block } – The ::marker pseudoelement does not exist at all
