Make header transparent in Prestige with hover

Store Design
, ,

Topic summary

A user sought help making the header transparent on their Shopify store (lash-ease.com) using the Prestige theme.

Solution Provided:
Multiple contributors offered CSS code snippets to be added to the theme.liquid file, specifically targeting the homepage template. The code successfully made the header transparent by setting background: transparent !important.

Additional Customizations Addressed:

  • Shadow removal: Replaced semi-transparent background with fully transparent one
  • Homepage-only transparency: Code was scoped using {% if template.name == 'index' %} to limit effect to homepage
  • Logo switching: Custom CSS provided to display the alternate transparent header logo on homepage, hiding the default logo and showing Prestige’s built-in transparent header logo option

Status: Resolved. The user confirmed all solutions worked successfully. The discussion involved iterative troubleshooting with code adjustments to refine the implementation.

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

Hi,

I would like to have the header transparent. I have tried everything, but it is not working.

Anyone who can help? Website is lash-ease.com

Thank you

1 Like
2

Hey @M161

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1740906162789.png
Moeed_0-1740906162789.png1901Ă—917 264 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @M161 ,

Go to Shopify Admin → Online Store → Themes.

Click Edit Code.

Open the Layout folder and find theme.liquid.

Before the tag, paste this code:

{% if template.name == 'index' %}
    
{% endif %}
4

Thanks it works!
In prestige you have the option to have a different logo for a transparante header. Is it possible to show that logo? Or change the logo only for the homepage? And I see the header is also transparent on the product page, but if possible I would only like the homepage.

5

hey, can this shadow be removed?

Scherm­afbeelding 2025-03-02 om 10.44.50.png
Scherm­afbeelding 2025-03-02 om 10.44.50.png2880×354 120 KB

6

Remove this

background: #0000002e !important;

Add this code below

background: transparent !important;
7

Thanks!! is it possible to do a different logo only on the homepage? In prestige you have the option to have a different logo for a transparante header, but shows only on slideshow.

8 
{% if template.name == 'index' %}
    
{% endif %}

CodingFifty_0-1740909195544.png
CodingFifty_0-1740909195544.png1281Ă—569 80.4 KB

CodingFifty_0-1740909280041.png
CodingFifty_0-1740909280041.png1285Ă—563 654 KB

9

the logo doesn’t show now

10

Try this code.

{% if template.name == 'index' %}
    
{% endif %}
1 Like
11

Thanks a lot!

12

Hi @M161

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
x-header.header *{
    color: white !important;
}
h1.header__logo a > img:nth-child(2) {
    display: none !important;
}
h1.header__logo a > img:nth-child(3) {
    display: block !important;
    opacity: 1 !important;
    position: relative !important
}

Here is the result:

image_720.png
image_720.png720Ă—222 186 KB

I hope this helps

Best,

Daisy