Help Needed: Making a Wave Background On Footer Fully Responsive

Shopify Discussion

Topic summary

A user is seeking help to implement a fully responsive wave background on their Shopify store footer, matching a specific design shown in a screenshot.

Two solutions were provided:

Solution 1 (Dotsquares):

  • Use an SVG wave background image applied via CSS, or
  • Embed SVG code directly into the footer section for proper scaling
  • Provided a basic inline SVG code example that can be customized

Solution 2 (yogeshkhasturi):

  • Shared a complete working implementation from their own store
  • Includes HTML markup to add to footer.liquid file
  • Provides detailed CSS with four animated wave layers using different opacities and z-index values
  • Uses a PNG image (footer-wave.png) with CSS animations for wave movement
  • Includes keyframe animations (animateWaves and animate) for continuous wave motion
  • Shared the actual wave image file being used

Key technical requirements:

  • Upload wave image to Shopify assets folder
  • Update CSS file path references accordingly
  • Both solutions emphasize responsive scaling across devices

The discussion remains open with no confirmation from the original poster on which solution was implemented.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
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