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!
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.
Here is a complete solution for adding waves in your shopify store section:
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;
}
yes this is actually possible, in a sense Shopify does not have a button for this, but you can do it with a small bit of code. The wavy line is made using CSS or an SVG shape added to that section. It depends on the theme you are using, so you may need to edit the section file. If you don’t like touching code, a developer can do this very fast. Just hope this helps