Product page video section

Store Design
, , , ,

Topic summary

A user seeks help aligning a video section at the bottom of their Shopify product page and adding a styled button below it, similar to a reference example. They provide their store URL, password, and comparison images showing the desired versus current layout.

Solution Provided:

  • Video Alignment: Use CSS flexbox properties (display: flex, align-items: center) to center the video container horizontally
  • Button Addition: Insert HTML markup below the video element in the appropriate Liquid template file
  • Button Styling: Apply CSS to match the reference design, including background color (#008DB8), padding, border-radius, and hover effects

Implementation Steps:

  1. Navigate to Shopify Admin → Online Store → Themes → Edit Code
  2. Locate the product.liquid or relevant section file containing the video
  3. Add the provided HTML and CSS code snippets

The discussion remains open, awaiting confirmation whether the solution resolves the issue. Images are central to understanding the layout problem being addressed.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

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

example. corrent
example. corrent1390×926 139 KB

Tablet page. incorrect (please fix)
Tablet page. incorrect (please fix)2466×1462 261 KB

2

Hey @Anonymous ,

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 */
}
  1. Add a Button Below the Video

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


    
    Add To Cart
  1. 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.

  1. 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