Dawn theme: Add a section with image/svg on top of the footer

Store Design
, , , , ,

Topic summary

A user wants to add a decorative wave SVG/image above their Shopify store’s footer section in the Dawn theme.

Initial Challenge:

  • User has a wave background image but is new to Shopify’s Liquid templating, though familiar with HTML/CSS
  • Discovered Shopify doesn’t support SVG files, switched to PNG with transparent background
  • Created a 3000px wide PNG file to ensure full-width coverage without pixelation

Solution Process:

  • Helper provided CSS code targeting the .newsletter section using a :before pseudo-element
  • Code includes absolute positioning, background-image URL, and background-size: cover to span full width without repeating
  • User successfully implemented the wave graphic with minor adjustments

Additional Customization:

  • User requested brown background color for copyright text section
  • Helper provided additional CSS for .footer and .footer__content-bottom-wrapper:nth-child(2) targeting the copyright area
  • Code sets brown background (#665541), white text color, removes padding/max-width constraints

Resolution: Issue resolved successfully. User achieved desired wave design above footer and styled copyright section as intended.

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

Hi @MT91 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

footer:before {
    content: '';
    position: absolute;
    background-image: url(https://cdn.shopify.com/s/files/1/0845/9491/7644/files/footer-bg3000.png?v=1723813420);
    top: -30px;
    width: 100%;
    height: 50px;
    left: 0;
    z-index: 3;
    background-size: cover;
}