Berlin Theme - How to Left Align Header, Copy and Button on Slider

Store Design
, , ,

Topic summary

A user seeks to left-align header text, copy, and buttons on hero slider elements in the Berlin theme, which are currently center-aligned.

Solution Provided:
A community member offers CSS customization steps:

  • Navigate to Online Store > Themes > Assets folder
  • Open main.css (or base.css/style.css/theme.css)
  • Add custom CSS targeting .slideshow-slide__text and .slideshow-slide__desc.richtext__content classes
  • Apply left alignment with specific margin adjustments (5% left margin, 0px bottom padding)

Additional Requests:
The original poster asks about:

  • Left-aligning additional text elements (addressed with supplementary CSS)
  • Controlling text line breaks (helper notes this cannot be precisely controlled but suggests adding width constraints of 80rem to limit words per line)

Status: The discussion appears resolved with working CSS code provided, though the helper notes the solution is tested only on the demo theme and may require adjustments for the live store.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
6

Hi thanks for this - can the text be left aligned also?