Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi,
How can I achieve this green box with the image banner section? Ideally with the custom CSS since I only want this format for this specific component.
Page link: https://maisonmidori.com/
Hey @maisongreen_03 ,
To achieve that green overlay box with the text on top of the banner image for a specific section only
Here’s how you can implement this:
Follow these steps:
1. Identify the Section's ID:
2. Go to the page editor on Shopify where this banner is located.
3. Inspect the section by right-clicking the element (in Chrome/Firefox) and selecting Inspect.
4. Find the section's unique ID (like #shopify-section-xyz or .banner-section).
Custom CSS Approach:
dd the following CSS to your theme's CSS or within the section's custom CSS setting if available.
You can limit this style to just this section by using its unique class or ID.
/* Apply the green overlay to the specific banner section */
#your-section-id {
position: relative;
height: 500px; /* Adjust the height as needed */
background: url('YOUR-IMAGE-URL') no-repeat center center;
background-size: cover;
}
#your-section-id::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 51, 40, 0.6); /* Green overlay with transparency */
z-index: 1;
}
/* Style for the text content inside the banner */
#your-section-id .banner-content {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
z-index: 2;
font-family: 'Your-Font-Family', sans-serif;
}
#your-section-id .banner-content h1 {
font-size: 2rem;
margin: 0;
}
#your-section-id .banner-content p {
font-size: 1rem;
}
#your-section-id .banner-content a {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: white;
color: black;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
}
HTML Structure:
If you need to tweak the HTML inside the specific section, use this example structure:
<div id="your-section-id">
<div class="banner-content">
<h1>Tenshi Collection</h1>
<p>Give customers details about the banner image(s) or content on the template.</p>
<a href="#">Show Now</a>
</div>
</div>
This will ensure the green overlay and text are specific only to the banner section you want to target. Let me know if you need further adjustments!
If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma
Hey @maisongreen_03
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
width: 100% !important;
background: #535e4de0 !important;
max-width: 100% !important;
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
The background-color needs to be replaced with the actual color
.banner__content{
max-width: 100%;
background-color: rgba(65, 64, 44, 0.5);
height: 214px;
}
.banner__box {
left: 5%;
}