Wavy Line in section

Store Design
, , , ,

Topic summary

A user asks how to replace a section’s bottom border with a wavy line, referencing an attached image showing the desired effect.

Solution provided:

  • Add a custom class to the section via the theme editor
  • Apply CSS using one of two methods:
    • Direct wavy border: .your-section-class { border-bottom: 2px wavy #000; }
    • SVG background image approach
  • Save changes and preview

The question appears resolved with a straightforward CSS-based solution. The visual reference image is central to understanding the desired wavy line style.

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

Hi guys, can anyone tell me if it is possible to change the bottom line of a section to a wavy line? like the image below. Thanks in advance!

Captura de ecrã 2025-04-05 174938.png
Captura de ecrã 2025-04-05 174938.png1094×220 5.44 KB

2

Yes, you can change the bottom line of a section to a wavy line using custom CSS. Add a class to your section in the theme editor, then use CSS to apply a wavy border or background image. For example: .your-section-class { border-bottom: 2px wavy #000; } or use an SVG as a background image. Save and preview your changes.