How to reduce space between lines of paragraph in a carousel slide show

Shopify Discussion

Topic summary

Issue: Reduce the line spacing between lines in the slideshow’s text (not the heading) on a Shopify store.

Key details:

  • The store is using the Symmetry theme.
  • The spacing concern is within the paragraph text under the slide’s heading.

Proposed solution:

  • Add custom CSS to adjust line-height for the slideshow text.
  • Suggested code (to place at the end of Assets > style.css): a selector targeting slideshow overlay paragraph text with line-height: 1.2 (line-height controls vertical spacing between lines).

Staff guidance:

  • This change requires theme code edits.
  • Merchant can implement the suggested CSS or contact Shopify Support via the Help Center to consult Theme Specialists for assistance.

Status:

  • No confirmation that the change has been applied or resolved; discussion remains open pending implementation/feedback.
Summarized with AI on December 28. AI used: gpt-5.
1

Screenshot 2024-06-02 at 1.37.49 PM.png
Screenshot 2024-06-02 at 1.37.49 PM.png1622×860 189 KB

I want the space between the “Celebrate that special bond” and the second line to be smaller. How would I do this? It is not in the “Heading” but in the “text” box beneath that in the editor.

2

Hey @CWasterlain .

Thanks for reaching out.

Could you let us know which theme you are using for your online store?

If you are unsure which theme is live in your store, you can navigate to the Theme Editor and select the three dots that are appearing towards the top left of the page. I took a screenshot from my test store to show you the section I am referring to:

02-44-83953-11815.png
02-44-83953-11815.png1260×826 81.6 KB

Looking forward to your response.

3

@CWasterlain You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of style.css file.

.slideshow .slide .overlay-text .overlay-text__text p{
line-height: 1.2; 
}
4

Symmetry

5

Hi there, @CWasterlain . Thanks for following up with us! This specific change will require some adjusting of your theme coding in order to tighten up that gap. You can action some of the coding requests advised here in the thread by other users, or reach out to our Team via our Help Center so we can chat with our Theme Specialists to see if we’re able to help with making this customization.