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

Store Design
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.

5

Here is a complete solution for adding waves in your shopify store section.

add wishlist feature in shopify store (2)
add wishlist feature in shopify store (2)1280×720 55.9 KB

Video Guide: https://youtu.be/lqvhTrNzKVc

#shopify-section-{{ section.id }} {
    transform: translateY(-102px);
    margin-bottom: -102px;
    --mask: radial-gradient(96.55px at 50% 136.5px, #000 99%, #0000 101%) calc(50% - 140px) 0 / 280px 100%, radial-gradient(96.55px at 50% -66.5px, #0000 99%, #000 101%) 50% 70px / 280px 100% repeat-x;
    -webkit-mask: var(--mask);
    padding-top: 100px;
    background: red;
}