Re: Transparent Header - Publisher Theme

kritikozzz · ‎11-02-2023

Hi,

I am looking to make my header transparent for my Publisher Theme.

Site: www.aurabyangelo.com

Code Request: Make the header background transparent (for desktop AND mobile) without it affecting my announcement bar.

Thank you!

-A

Dan-From-Ryviu · ‎11-02-2023

Hi @kritikozzz

You can do that by adding this code in your theme.liquid file, before </head> tag in Online store > Themes > Edit code

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
sticky-header { background: transparent !important; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-02-2023

Hi @kritikozzz

Please update code to this

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}
<style>
sticky-header { background: transparent !important; }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-02-2023

Hi @kritikozzz

You can do that by adding this code in your theme.liquid file, before </head> tag in Online store > Themes > Edit code

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
sticky-header { background: transparent !important; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz · ‎11-02-2023

Worked! Thank you!

kritikozzz · ‎11-02-2023

Question - is there a way to make it transparent across all pages? Right now its only on my homepage, but the white background appears on shop and contact etc.

Dan-From-Ryviu · ‎11-02-2023

Hi @kritikozzz

Please update code to this

{% if template == 'index' %}
<style>
#MainContent { margin-top: -133px; }
@media (max-width: 767px) {
#MainContent { margin-top: -107px !important; }
}
</style>
{% endif %}
<style>
sticky-header { background: transparent !important; }
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz · ‎11-02-2023

This did not work unfortunately

Dan-From-Ryviu · ‎11-02-2023

Did you update previous code with new one and save file?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz · ‎11-02-2023

Yes

kritikozzz · ‎11-02-2023

Wait, now it works! Took a second to refresh, thank you!

Dan-From-Ryviu · ‎11-02-2023

Glad I could help. Have a great day

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

kritikozzz · ‎11-02-2023

I did notice my announcement bar is a bit clipped on the bottom... the text is no longer centered in the black frame? Could the code we added adjust this?

Popularitems · ‎03-13-2024

Hey, my mobile version of site is not letting me make the header transparent on just the home page. Can you help?

Dan-From-Ryviu · ‎03-13-2024

Hi @Popularitems

Please send me your store URL so I can check and help you

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Popularitems.com thank you so much

Dan-From-Ryviu · ‎03-13-2024

Please go to your Online Store > Themes > Edit code > open theme.scss.liquid file, find and remove this code around line 6925 of this file

  @media screen and (max-width: 769px) {
    .header-section .header-container {
      position: initial; } }

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

It’s not there

Dan-From-Ryviu · ‎03-13-2024

You can add this code to your theme.liquid file after <head> to solve it

<style> 
@media screen and (max-width: 769px) {
    .header-section .header-container {
      position: absolute !important; 
    } 
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

thank you but now on the product page, and search page. It’s trying to be transparent and I do not want it to be. Please check

Dan-From-Ryviu · ‎03-13-2024

Code updated

{% if template == 'index' %}
<style> 
@media screen and (max-width: 769px) {
    .header-section .header-container {
      position: absolute !important; 
    } 
}
</style> 
{% endif %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Popularitems · ‎03-13-2024

Just sent a coffee your way for the help. Thank you

Dan-From-Ryviu · ‎03-13-2024

Thank you and welcome!

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Do you know why my site is slow? I already removed all apps and app code from my site.

Dan-From-Ryviu · ‎03-13-2024

Let me look into and will let you know

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Dan-From-Ryviu · ‎03-13-2024

Hi @Popularitems

After checking on my PC, your site loads quite fast. However, if using PageSpeed Insights, the score is a little low. You can solve this by disabling lazy load from the hero banner and logo.

I also recommend you convert images of the hero banners to .webp format to make the site load faster.

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Hey Dan, all of the sudden my products on the product page and featured catalog are different sizes, how do I make them all even sizes?

Popularitems · ‎03-13-2024

I messed up my code please help

Dan-From-Ryviu · ‎03-13-2024

Did you do something with your theme.scss.liquid file?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Yes

Popularitems · ‎03-13-2024

i added it at the bottom

Popularitems · ‎03-13-2024

and then deleted it

Dan-From-Ryviu · ‎03-13-2024

You removed something that belongs to the file, not just the code you added. Please try to press Ctrl + Z(window) or command + Z(Mac) to revert it and try to save file and check again

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

still not working

Popularitems · ‎03-13-2024

Okay i fixed it. Can you teach me how to make the catalog grid even with the pictures and the titles on home page

Dan-From-Ryviu · ‎03-13-2024

Could you explain more about your question?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123 · ‎03-13-2024

hii i added two custom liquid for videos at different places but when i change the width of one custom liquid its automatically changes the width of other two i want to change the width of only one custom liquid please help me

my site url ; https://mansaroverfurnishings.com/

Dan-From-Ryviu · ‎03-13-2024

You can try to add the CSS code to Custom CSS of Custom liquid section that you want to change the width.

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123 · ‎03-13-2024

can you please tell me the code?

Dan-From-Ryviu · ‎03-13-2024

How did you change the width before?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Hey Dan Popularitems here again. You gave me a code to fix mobile transparency on the header earlier. Now the estimated delivery date is not working and the product images/titles on the home page collections grid is the wrong size. Do you know why these things could have happened?

Dan-From-Ryviu · ‎03-13-2024

I guess make some mistake when adding or remove code somewhere

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Popularitems · ‎03-13-2024

Any suggestions on fixing it?

Dan-From-Ryviu · ‎03-13-2024

Could you take screenshot where did you edit the code?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

manan123 · ‎03-16-2024

Hey im using dawn theme & want to add slider in testimonials please help me to do so...

my site url :https://mansaroverfurnishings.com/

see screenshot for reference

dilan1994 · ‎04-05-2024

Hello ,

My theme.liquid file does not include </head>. I can only find <head>.

Is there somewhere else it can work?

Dan-From-Ryviu · ‎04-05-2024

Yes, please add the code after <head>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.