Transparent Footer

[Adeonline]

I am currently using a dawn theme and want to make my footer transparent.

Please help

Thank you

[Sweans]

Hi @Adeonline ,

To make the footer transparent in your Dawn theme, you can add custom CSS. Here's how:

1. Go to Online Store > Themes.

2. Click on Actions next to your current theme and select Edit code.

3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.

4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following custom CSS code:

    <style>
      footer {
        background: transparent !important;
      }
    </style>

Refer screenshot:

5. Click Save to apply the changes.

This code sets the background of the footer to be transparent. The !important declaration ensures that this style will override any other styles that might be set for the footer background. If you have any questions or need further customization, feel free to ask!

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans

[Adeonline]

Thanks for the message.
I just did as you said and nothing changed.

Also I added another code above the body before to make the header transparent.

[Sweans]

Hi @Adeonline 

It seems like the previous solution didn't quite achieve the desired effect. Let's try a different approach using the Shopify template editor. You can change the footer's color scheme directly through the theme customization options.

1. Navigate to Online Store > Themes.

2. Click on the Customize button next to your current theme.

3. In the theme editor, navigate to the Footer section.

4.Look for the settings related to the color scheme. You can select a different color theme for the footer. There should also be options to edit the color scheme, including the background and text colors.

Note: If there is no direct option for transparency, you may need to customize the color scheme and select a color with a transparency option (e.g., using RGBA values).

5. Once you've made the adjustments, click Save to apply the changes.

This method allows you to visually select and adjust the footer's appearance without needing to add custom CSS code. It ensures that the changes are consistent with the rest of your theme's styling options.

If this approach still doesn't work or if the options aren't available, there may be additional settings or restrictions in your theme. Let me know if you need further assistance!

Regards,
Sweans

[Adeonline]

I did as you told me but it still doesn’t work.
I tried changing it to red instead but it still is the colour black. 

[niraj_patel]

Hello @Adeonline 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  footer.footer.gradient {
     background: transparent !important;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[Adeonline]

Thanks for the help but it did not work

Also I added another code above the body before to make the header transparent.

[niraj_patel]

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[Adeonline]

https://adeonline.store/

No password. Just want the contact us (Black box) to be transparent.

[Adeonline]

https://adeonline.store/

No password. Just want to make the contact us (Black box) transparent.
Thank you

[Jarvie]

It looks transparent, but the global background of the web page has color. You should be talking about the frosted glass effect, right?

[Adeonline]

I just want the picture to extend to the very bottom and the “Contact us” Text to be above the picture. If that makes sense.

[Jarvie]

The bottom section is the public template. It is best to try to customize the default theme template and see if it works.