I would like “Magnetic Bottle Sleeve” to be above the “BUY NOW” button while also keeping the image of the product in the same place/slightly up to keep things organized.
1 Like
Hello @lenNON11 try this code
html Structure
# Magnetic Bottle Sleeve
CSS Styling
.banner-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.banner-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 2;
padding: 0 20px;
}
.banner-title {
font-size: 36px;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
.buy-now-btn {
padding: 12px 25px;
font-size: 18px;
background-color: #ff6600;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
}
.buy-now-btn:hover {
background-color: #ff4d00;
}
if its not work then give your store url and i will fix it
thank you 
Where do I add this html code to?