Introduction
Let's update our website by adding a custom border to our images using the custom CSS field in the image banner section. With this free code, you can easily display a border around your images on mobile. We can adjust the code to create a border with your own color via hex code or script, and can adjust the border width.
This method works for the Shopify Dawn theme and should be compatible with any theme that includes custom CSS fields in their pre-built Shopify sections. Naturally, you can paste the code into the bottom of your base.css under assets in your code editor. At the very end, I will show you how to adjust our code for color and padding of your liking.
Note: The is where I tell you to just skip the following text wall and follow the images, but if you're here to hang out, well read along! There is nothing for sale in this blog, its free to you, we use some secure ads to assist in website upkeep, so your time here is valued.
Welcome!
If you have been browsing through Sydney's Collection and stumbled across my code journals, welcome! You may be wondering why an e-commerce and lifestyle brand is offering code. Well, surprise—it fits the brand! We always find unique ways to spread positivity. If you follow Sydney's Socials, you know that we love giving away free gifts.
So no, it's not just about a mini bookshelf, home decor, and DIY; it's about the lifestyle. Consider this a message from us: there are millions of ways to spread positivity at zero cost to you!
Why Free Custom CSS Code?
I've received several inquiries about how I achieved this look, so I decided it was time to share the code with you. Of course, this is free, but if you are looking for detailed web design, send us a message and we can bring your vision to life.
This task is straightforward: it's a simple copy and paste. I recommend duplicating your theme before making any changes. Once you're satisfied with your additions, you can publish them.
How to Add a Border to the Image Banner Section in Shopify:
Follow along with the images I've provided to make the process easy. Although you can make adjustments to target desktop, for this journal entry, I want to focus on mobile adjustments only, as I'm content with the current desktop width.
Step 1:
From your Shopify Admin select the theme you wish to customize, and click customize. As you can see below, we are not customizing the live theme (black button). It is best practice to click those three dots and duplicate the theme, so we can work on the back end and not interfere with the live site. I like to rename my themes as I go, for example, my live theme gets a '(ACT)' added to the name for 'active', and my duplicate is given '(DEV)' for development.
Step 2:
On your theme editor menu under 'Template', hover and the blue cross will appear with the text 'add section', click it.
Step 3:
From the dropdown menu, select 'image banner'.
The sections included with Shopify websites are dynamic in that you can move them around your page with a simple click and drag, so place your image banner wherever you like within your template.
Step 4:
Click the image banner text in the editor (the one imaged above) to enter the section's customizer. Scroll down and see the dropdown menu for 'Custom CSS'.
Step 5:
Copy and paste this code into the Custom CSS:
| @media screen and (max-width: 749px) { .banner__content { box-shadow: 0 0 0 6px white inset; } } |
Scroll to the bottom for detailed information how to customize the color, and size.
Step 6:
Confirm your changes, and click SAVE. You will now see the white border around your image banner section!
All Done
You can now publish your theme, and your new custom white image banner border will go live. Keep in mind that when using the Custom CSS field within a section, the code will only affect elements within that section.
If you want the code to apply to all image banner sections, add it to the assets at the bottom of your base.css or theme.css file (e.g., base.css for the Dawn theme). Always preview your theme and confirm the changes before publishing.
If you wish to make changes to a specific image banner without using the Custom CSS field, you can target the specific element and apply the same code.
How to Adjust the Code
Let's pick apart this little piece of code, this way, you can review it and make any adjustments you like....
| @media screen and (max-width: 749px) { .banner__content { box-shadow: 0 0 0 6px white inset; } } |
@media screen and (max-width: 749px)-> This targets mobile devices, and any device thats screen is under 749 pixels wide.
.banner__content-> this is the element that we are targeting.
box-shadow: 0 0 0 6px white inset;-> 'box-shadow' is our border, and 6 pixels is our default width. We have set the inset color to white. Here is where the fun begins. You can replace the word 'white' with almost any hex color code to match your websites theme and branding. You can replace 6px with your desired border width.
Conclusion
There you have it—your very own custom CSS for a border around the 'Image Banner' section in Shopify. Check out our DIY and Lifestyle blogs, and don't forget, we have awesome gifts available too. Whether you're coding, creating, or gifting, as long as you're bringing positivity, you're welcome here at Sydney's.
