How can I add an SVG wave design to my website?

Store Design

Topic summary

A user seeks guidance on implementing an SVG wave design from Figma onto their website.

Recommended Approach:

  • Export the wave as an SVG file and save it in the assets folder (e.g., ‘background-wave.svg’)
  • Alternative tool suggested: getwaves.io for creating wave designs
  • Add the SVG to the relevant .liquid file using inline styling within <style> tags
  • Reference the SVG as a background image in CSS

Implementation Methods:

  1. Use an <img> tag with the SVG file path as the src attribute
  2. Position the wave using CSS properties (position, top, left, width, height)
  3. Set z-index to -1 to place the wave behind content
  4. Consider making it inline to allow customization through theme settings

Current Status:
The original poster requested clarification on the inline styling implementation and editing the ::before attribute for the ‘td-sc-overlay’ class. The discussion remains open with technical details being refined.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi!

Does someone know how to add a wave like this ?

On Figma, I have just add a SVG wave that I have designed, but how to make this on my website ?

Capture d'écran 2023-03-30 110338.png
Capture d'écran 2023-03-30 110338.png957×485 51.6 KB

Best,

2

Hi @slourdel , cool website!

There are a couple of ways to go about this, but here is what I would do:

  1. Create a new background asset (preferably the one exported from figma) and save it in your assets folder as ‘background-wave.svg’. https://getwaves.io/ Is also a great place to create waves.
  2. Then in you .liquid file where the section is being used, add some inline styling , edit the ::before attribute for your class ‘dt-sc-overlay’. Please see code snippet below.
  3. Making it inline would also help you override the ‘currentColor’ to a section setting in the customiser.

Play around with this, and let me know how far you get with it! Here is an example using another image I found on the site.

lacouettefrancaise.jpg
lacouettefrancaise.jpg2555×1284 273 KB

3

Hi!

Thanks for your reply!

I don’t understand this part :

  1. Then in you .liquid file where the section is being used, add some inline styling , edit the ::before attribute for your class ‘dt-sc-overlay’. Please see code snippet below.

Can you explain?

Best!

4

Save your SVG wave file and add it to your website’s directory.

In your HTML file, create a new section or div where you want to place the wave.

Inside the section or div, add an SVG tag with the path to your wave file. You can do this by using the tag and adding the path to your SVG file as the src attribute.

Use CSS to position and style the SVG wave. You can use the position, top, left, and z-index properties to place the wave where you want it, and you can use the height and width properties to adjust the size.

the section has a height of 200px, and the wave is positioned absolutely within the section using the top, left, width, and height properties. The z-index property is set to -1 so that the wave appears behind the content of the section.