Product page video section

[jeffreym]

Hi guys can someone please help me aligning my video section at the bottom of the page and I would also like to have a button exactly like the example shown below to be added below the video also.

Thanks in advance!!

URL: hygiadental.com
PW: myown

[rajweb]

Hey @jeffreym ,

To align your video section at the bottom of the page and add a button like the "Add To Cart" button below the video, follow these steps:

1. Align Video Section:

You likely need to center the video container and adjust its width. Add this CSS to your Shopify theme:

.video-section {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the video horizontally */
    justify-content: center; /* Centers content if needed */
    text-align: center; /* Ensures any text aligns properly */
    margin-bottom: 20px; /* Adds spacing between the video and button */
}

2.  Add a Button Below the Video

To add the button, insert this HTML below your video in the appropriate Liquid file:

<div class="video-section">
    <video controls>
        <source src="YOUR_VIDEO_URL.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <a href="YOUR_BUTTON_LINK" class="custom-button">Add To Cart</a>
</div>

3. Style the Button to Match:

Add this CSS to make the button look exactly like the example:

.custom-button {
    display: inline-block;
    background-color: #008DB8; /* Adjust to match the button color */
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
}

.custom-button:hover {
    background-color: #00739A; /* Slightly darker shade on hover */
}

Follow these steps:

1. Online Store

2. Themes

3. Edit Code

4.Locate the product.liquid or section file where the video is placed.

5. Add the HTML & CSS accordingly

Let me know if you need further refinements!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out inn my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat