Website Bar/image

New Member
2 0 0

Hi guys, I always wanted to do this bar/image thing as circled in the two examples below, I'm using the debut theme and royalswatches.com. Can anyone advise how I can go about doing this? Thanks a lot

 

WhatsApp Image 2019-07-30 at 10.33.03 PM.jpegWhatsApp Image 2019-07-30 at 10.33.21 PM.jpeg

0 Likes
Highlighted
Astronaut
835 95 178

You just need to make a container with 3 items, set it's display to flex, and text align to center with various other styles:

 

<style>
.my-container {
    display: flex;
    justify-content: center;
    background-color: #333;
    color: white;
    padding: 10px 0px;
}
.my-item {
    width: 33.33%;
    text-align: center;
}
</style>
<div class="my-container">
    <div class="my-item">Free Shipping</div>
    <div class="my-item">Something Else</div>
    <div class="my-item">Another Thing</div>
 </div>

You'd have to use FontAwesome's library for icons, or design them yourself with a graphic editing program. There's a nice browser one called Photopea, that's basically photoshop in your browser: https://www.photopea.com/

 

This is what the above code looks like without icons:

 

bar.jpg

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes