How do i make my header logo transparent

Topic summary

A user wants to create a transparent logo effect in their Prestige theme header, similar to websites like Represent or Diane Von Furstenberg.

Two approaches were suggested:

SVG with cut-out text effect:

  • Requires a custom SVG logo with transparent letterforms that reveal the background image/video through the text
  • Needs additional custom code in the theme’s header
  • This replicates the DVF-style effect where content shows through the logo letters

Transparent header background:

  • Use a transparent PNG logo file (no background)
  • Enable transparent header option in: Online Store > Customize > Header
  • Works best with banner or slideshow backgrounds
  • May require CSS code added to base.css or theme.css: .site-header {background-color: transparent !important;}

Both responders offered further assistance with implementation. The discussion remains open for the user to clarify which specific effect they want to achieve.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.

Hi!

quick question, i would like to change my logo in the header of my website to transparent. Like the website from Represent or Diane Von Furstenberg. Is it possible in the prestige theme?

Website: gallerychristian

Password:6399

Thanks!

2 Likes

@christian_russo Hey, thanks for posting here.

If you’re aiming for a logo effect like the one on Diane Von Furstenberg’s website — where the text is transparent and you can see the background image or video through the letters — they’re using an SVG logo to achieve that.

To replicate this effect on your own store, you’ll need:

  • A custom SVG version of your logo with transparent (cut-out) text

  • And some custom code added to your theme’s header to display it properly over a background

Let me know if you’d like help with the SVG setup or the code — happy to share a basic example!

@christian_russo Hi! Yes, you can make the logo in the header transparent in the Prestige theme, similar to Represent or DVF.

Use a transparent PNG logo (with no background).

Enable transparent header in:
Online Store > Customize > Header, usually works if there’s a banner or slideshow behind.

If needed, add this CSS in your theme file (base.css or theme.css):.site-header {background-color: transparent !important;}

Let me know if you need help applying it!