Shop Now button overlay on slide Debitify Theme

Shopify Discussion

Topic summary

A user wants to add a centered “SHOP NOW” button overlay on homepage slides (desktop and mobile), positioned approximately 2/3 down the slide and matching their site’s blue color scheme.

Solutions Offered:

  • One responder suggests using Debutify theme’s built-in slideshow customization options accessible through Online Store > Themes > Customize
  • Another provides detailed HTML and CSS code snippets for manual implementation, including:
    • Absolute positioning with bottom: 20% and centered alignment
    • Custom blue background color (#007bff)
    • Hover effects and mobile responsiveness
    • Z-index layering for proper overlay display

Current Status:
The original poster identifies as a complete beginner and requests more detailed step-by-step guidance. One responder offers to complete the implementation as a paid service.

Note: Some text in the conversation appears reversed/encoded, suggesting potential spam filtering or display issues.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’d like to add a “SHOP NOW” button overlay to my homepage slides on both Desktop and Mobile. I want it to show up about 2/3 down on the slide and be centered. I’d also like for it to match the blue color I use on my website as well. Please help!

My store url is https://plrmen.com/

2

Hi @lu2024

Debutify slideshow section has option to add button in your Online Store > Themes > Customize

3

Hi,

Hope following will help

Customize Theme - find the section where your homepage slides (slideshow) are located then edit code (html and css)

Example of add button code

HTML


    SHOP NOW

CSS

.shop-now-button {
    position: absolute;
    bottom: 20%; /* Adjust as needed to position the button 2/3 down */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.btn-shop-now {
    background-color: #007bff; /* Replace with your blue color hex code */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
}

.btn-shop-now:hover {
    background-color: #0056b3; /* Replace with a darker shade of your blue color */
}

@media only screen and (max-width: 768px) {
    .shop-now-button {
        bottom: 20%; /* Adjust as needed for mobile view */
    }

    .btn-shop-now {
        padding: 8px 16px;
        font-size: 14px;
    }
}

If you still need help you can contact us (details at signature)

4

Hi, thank you for your response. I am a complete beginner, can you provide more step by step guidance?

5

We will do this job for you. if you want you can contact us through signature