Horizon theme - Align or hide arrows in collapsible content blocks

Store Design
, ,

Topic summary

A user is experiencing alignment issues with arrows in collapsible content blocks (such as ‘More info’ and ‘Production’ sections) on product pages using the Horizon theme.

Proposed Solution:

  • Navigate to: Online Store → Theme → Edit code
  • Open the theme.css or base.css file
  • Add CSS code at the bottom:
.product__accordion .accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Status:
One community member provided a specific CSS fix to align the arrows using flexbox properties. Two other users requested the store URL to investigate further, but the original poster has not yet confirmed whether the solution resolved the issue.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have added collapsible content blocks on my product pages. E.g. ‘More info’, ‘Production’ etc.

The arrows on the right are not lining up properly.

Does anyone know how I can align them or hide the arrows completely?

Thanks for your help!

1 Like
2

Hi @MrWild

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

@MrWild can you please share your website link?

4

Hi @MrWild,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product__accordion .accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Thank you!