"Adding 'Shop Now' Button and Text Overlay to Looped Video

[HIE_1]

Hello,

I am attempting to place text and a “shop now” button over my looped video. Currently, as seen in the images below, the text I want placed over the video is above it. As stated I would also like to add a “Shop Now” button over the video as well.

Currently the code for the video is as follows:

video { width: 100%; height: auto; display: block; margin: 0 auto; }

To review my website here is the web address: homeintentionsessentials.ca

I am using the Dawn theme.

Thank you!

[BSS-Commerce]

Hello @HIE_1 ,

To do that, find the base.css file in the edit code section then paste the code below at the bottom of the page:

#MainContent {
    position: relative;
}

#shopify-section-template--19744652230950__0a470454-2917-4b5f-850c-3f86fbc88f7d {
    margin-bottom: 250px;
    position: relative;
    z-index: 3;
}

.rich-text.content-container {
    margin-top: 100px;
    
}

.section-template--19744652230950__a7fbedaf-1bdc-4429-9f24-32e9b93dda6f-padding {
    position: absolute;
    top: 0;
    z-index: 0;
}
 .gradient {
 background: transparent !important;
}

.rich-text__heading, .rich-text__text h3 {
color: #fff !important;
}

#shop-now-btn {
    display: block;
    margin: 20px auto; /* Adjust the margin as needed */
    padding: 10px 20px;
    background-color: #000; /* Example background color */
    color: #fff; /* Example text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#shop-now-btn:hover {
    background-color: #2980b9; /* Example hover background color */
}

Then find the theme.liquid file and paste the following code:

<script>

    // Find the rich-text__wrapper div
    var richTextWrapper = document.querySelector('.rich-text__wrapper');

    // Create a new button element
    var button = document.createElement('button');
    button.id = 'shop-now-btn';
    button.innerText = 'Click me';

    // Add a click event listener to handle navigation
    button.addEventListener('click', function () {
        // Navigate to another page (replace 'your-other-page.html' with the actual page URL)
        window.location.href = 'https://homeintentionsessentials.ca/collections/all';
    });

    // Append the button after the rich-text__wrapper div
    richTextWrapper.parentNode.insertBefore(button, richTextWrapper.nextSibling);
</script>

Result:


**Hope it helps @HIE_1 **

[HIE_1]

Hello BSS-Commerce,

Thank you for your help. I am genuinely appreciative of the time you took to write and post this solution!

With gratitude,

HIE

[HIE_1]

Hello,

Update. I did not check the rest of the site before accepting this solution. It works a little too well. This code adds the shop now button to all the pages. I also changed the background colour from transparent to a colour that goes with our branding. Doing that changes the background colour of all the pages as well.

Would you have any suggestions to amend these issues?

[BSS-Commerce]

Hi @HIE_1 ,

Hello, sorry for not checking other parts of the page. Below is the code after updating:
In the base.css page, edit the code I provided to:

#MainContent {
    position: relative;
}

#shopify-section-template--19744652230950__0a470454-2917-4b5f-850c-3f86fbc88f7d {
    margin-bottom: 250px;
    position: relative;
    z-index: 3;
}

#shopify-section-template--19744652230950__0a470454-2917-4b5f-850c-3f86fbc88f7d .rich-text.content-container {
    margin-top: 100px;
    
}

.section-template--19744652230950__a7fbedaf-1bdc-4429-9f24-32e9b93dda6f-padding {
    position: absolute;
    top: 0;
    z-index: 0;
}
 .rich-text.content-container.color-background-1.gradient.section-template--19744652230950__0a470454-2917-4b5f-850c-3f86fbc88f7d-padding {
 background: transparent !important;
}

#shopify-section-template--19744652230950__0a470454-2917-4b5f-850c-3f86fbc88f7d .rich-text__heading, 
#shopify-section-template--19744652230950__0a470454-2917-4b5f-850c-3f86fbc88f7d .rich-text__text h2 {
color: #fff !important;
}

#shop-now-btn {
    display: block;
    margin: 20px auto; /* Adjust the margin as needed */
    padding: 10px 20px;
    background-color: #000; /* Example background color */
    color: #fff; /* Example text color */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#shop-now-btn:hover {
    background-color: #2980b9; /* Example hover background color */
}

And in the theme.liquid page, update the old code to the following:

<script>
 if (window.location.pathname == "/") {
    // Find the rich-text__wrapper div
    var richTextWrapper = document.querySelector('.rich-text__wrapper');

    // Create a new button element
    var button = document.createElement('button');
    button.id = 'shop-now-btn';
    button.innerText = 'Click me';

    // Add a click event listener to handle navigation
    button.addEventListener('click', function () {
        // Navigate to another page (replace 'your-other-page.html' with the actual page URL)
        window.location.href = 'https://homeintentionsessentials.ca/collections/all';
    });

    // Append the button after the rich-text__wrapper div
    richTextWrapper.parentNode.insertBefore(button, richTextWrapper.nextSibling);
}
</script>

I think they will work well.

[HIE_1]

Hello BSS-Commerce,

Thank you so much for this update! The code works perfectly. We genuinely appreciate your time, effort, and patience.

With gratitude,

HIE