Help Needed: Making a Wave Background On Footer Fully Responsive

Shopify Discussion
1

Hi everyone,

I’m working on customizing my Shopify store, and I’m trying to add a wave background to my footer that is both fully responsive
exactly same as the screenshot.

Kamraan_0-1746689150646.png
Kamraan_0-1746689150646.png1877×212 9.1 KB

2

Hey @Kamraan

Adding a responsive wave background to your Shopify footer is totally doable — you’ll just need a bit of custom CSS and maybe an SVG.

If you’re trying to match it exactly to a screenshot, you’ll need to either:

Use an SVG wave background image that matches your screenshot and apply it via CSS, or

Embed the exact SVG code directly into your footer section so it scales properly across devices.

Here’s a quick example using an inline SVG (you can replace the path with your own wave design if you have it):
3

Hi @Kamraan ,

Hey, I recently did something similar for my store and got the wave background working perfectly in the footer. Here’s what I did:

1. Added this HTML to my footer.liquid file:

2. Then I added this CSS to my theme stylesheet (you can paste it at the bottom of your main CSS file):

.wt-footer {
        position: relative;
        background: #05b3a4;
        min-height: 100px;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 35%;
      }

      .wave {
        position: absolute;
        top: -100px;
        left: 0;
        width: 100%;
        height: 100px;
        background: url("./footer-wave.png");
        background-size: 1000px 100px;
      }

      .wave#wave1 {
        z-index: 1000;
        opacity: 1;
        bottom: 0;
        animation: animateWaves 4s linear infinite;
      }

      .wave#wave2 {
        z-index: 999;
        opacity: 0.5;
        bottom: 10px;
        animation: animate 4s linear infinite !important;
      }

      .wave#wave3 {
        z-index: 1000;
        opacity: 0.2;
        bottom: 15px;
        animation: animateWaves 3s linear infinite;
      }

      .wave#wave4 {
        z-index: 999;
        opacity: 0.7;
        bottom: 20px;
        animation: animate 3s linear infinite;
      }

      @keyframes animateWaves {
        0% {
          background-position-x: 1000px;
        }
        100% {
          background-positon-x: 0px;
        }
      }

      @keyframes animate {
        0% {
          background-position-x: -1000px;
        }
        100% {
          background-positon-x: 0px;
        }
      }

Don’t forget to upload your footer-wave.png to your assets folder, or update the path in the CSS to wherever your image is hosted.

Here is the footer-wave.png image I am using:

footer-wave.png

4

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;
}

Let me know if you face any issues.

5

Hi @Kamraan

You can add a full-screen responsive wave background with an inline SVG, or CSS shape, width 100%, and height auto. Put it in the template above the footer, open the wave shape in your vector editor, make sure overflow is hidde,n and it should scale nicely on all devices and screen sizes.