Solved

Help! Background Video Full Width At All Times On Dawn

Breaward
New Member
30 0 0

Hi, I added my own code to get a shopify video background but the video isn't sized how I would like. this is how it looks, I don't want that gap in between the announcement I want something similar to this (2nd image)

as well as adding a button for volume/pause.

 

Screenshot 2024-02-28 9.40.11 PM.pngScreenshot 2024-02-28 9.42.00 PM.png

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7525 1450 1449

This is an accepted solution.

Hi @Breaward 

Please add this code to your theme.liquid file after <head> in Online Store > Themes > Edit Code 

{% if template == 'index' %}
<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin: 0 !important;
border-radius: unset !important;
}
.videoBackground {
margin-top: -37px;
}
</style>
{% endif %}

 

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7525 1450 1449

Hi @Breaward 

Dan here from Ryviu: Product Reviews & QA.

Could you share your store URL to check?

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Breaward
New Member
30 0 0

https://14fb05-1b.myshopify.com/ password:breaward66

Dan-From-Ryviu
Shopify Partner
7525 1450 1449

This is an accepted solution.

Hi @Breaward 

Please add this code to your theme.liquid file after <head> in Online Store > Themes > Edit Code 

{% if template == 'index' %}
<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin: 0 !important;
border-radius: unset !important;
}
.videoBackground {
margin-top: -37px;
}
</style>
{% endif %}

 

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Breaward
New Member
30 0 0

Thank you, it worked if I wanted to keep my old announcement bar what would I change, also is there a way to add the volume and pause buttons please?

Dan-From-Ryviu
Shopify Partner
7525 1450 1449

Update code 

{% if template == 'index' %}
<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin-top: 0 !important;
}
.videoBackground {
margin-top: -37px;
}
</style>
{% endif %}

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Breaward
New Member
30 0 0

Hi, when I press the cart icon the header changes to all white and my pages are gone.

Dan-From-Ryviu
Shopify Partner
7525 1450 1449

Please update the code 

<style>
#shopify-section-custom-announcement-bar {
z-index: 9;
}
#shopify-section-custom-announcement-bar .custom-announcement-bar .custom-announcement-bar__message {
background: #f2f0eb8c;
margin-top: 0 !important;
}
</style>
{% if template == 'index' %}
<style>
.videoBackground {
margin-top: -37px;
}
</style>
{% else %}
<style>
.videoBackground {
margin-top: -123px;
}
.header-wrapper {
background: transparent !important;
}
</style>
{% endif %}

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Breaward
New Member
30 0 0

last thing can you give me the updated code with the original announcement like this: 

also on klaviyo the left image doesn't appear on phone.

 

 

Screenshot 2024-02-28 9.42.00 PM.png

Breaward
New Member
30 0 0

also the link of what I want is: https://www.khy.com/