Add text on video + change position of buttons

[orchiworld]

Hello. 

I need help with 2 things. 

Website:

orchi.com

PW: orchi-com 

1- Video Text

I added a video using custom liquid to get it to autoplay. However, I want to add text and a button on top of the video. Please see the example below.
My video: 

I'd like to add:

• Logo
• Small Text
• Button

So it looks similar to this, including the position of the text and button:

2- Button Position

 

I already added code to change the text and button location to be in the left corner of every image.

However, after adding another image banner (see below), the position of this text and button is not the same as the rest of the site. I need the position to match the image above, on both desktop and mobile, but it should not affect how the custom liquid video looks.

 

[BSSCommerce-TC]

Hi @orchiworld ,

You can follow these steps to solve point 2

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

.banner__content.banner__content--bottom-center {
   justify-content: flex-start !important;
}

.banner--desktop-transparent .banner__box {
   text-align: left !important;
}

[BSS-TekLabs]

Hi @orchiworld,

I, Video text

You can paste the code snippet below right next to the video tag in the custom liquid that you added before. And don't forget to change the 'https://example.com' to the URL you want the button to redirect to

<div style="
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
">
<img src="//orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=600" alt="ORCHI Online Store" srcset="//orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=130 130w, //orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=195 195w, //orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=260 260w" width="130" height="29.008264462809915" loading="eager" class="header__heading-logo motion-reduce" sizes="(max-width: 260px) 50vw, 130px">
<p style="
    margin: 10px;
">BACK IN STOCK</p>
<button style="
    background: transparent;
    padding: 10px 20px;
    border: 2px solid black;
    cursor: pointer;
" onclick="window.open('https://example.com', '_blank').focus();">Shop now</button>
</div>

Here is the result

II, Button position

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.banner__content.banner__content--bottom-center {
  justify-content: flex-start;
  margin: 0;
}

.banner__content.banner__content--bottom-center .banner__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[orchiworld]

Where exactly should I add the first code? 

Number 2 - worked perfectly 

[BSS-TekLabs]

Hi @orchiworld,

This is the code snippet for the first point after customization

<div style="
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
">
<img src="//orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=600" alt="ORCHI Online Store" srcset="//orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=130 130w, //orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=195 195w, //orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=260 260w" width="130" height="29.008264462809915" loading="eager" class="header__heading-logo motion-reduce" sizes="(max-width: 260px) 50vw, 130px" style="
    position: relative;
    right: 2px;
">
<p style="
    margin: 10px;
">EAU DE PARFUM</p>
<button style="
    background: transparent;
    padding: 10px 20px;
    border: 2px solid black;
    cursor: pointer;
    color: "#000";
" onclick="window.open('https://orchi.com/collections/all', '_blank').focus();">SHOP NOW</button>
</div>

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!