Jump to content

Trying to create floating "new!" badge on Shop All page

Recommended Posts

Hello! I am trying to add a small custom CSS badge to the first item on my "shop all" page on my site.

I'm not sure what I'm doing wrong here- here's the code I am trying to work with:

//Shop Styling//

.ProductList-item:first-child .ProductList-image {
    position: relative;

section[data-section-id="60305a47bd582f47015e8f36"] .ProductList-item:first-child .ProductList-image::after {
    content: 'NEW!';
    position: absolute;
    top: 10px; 
    right: 10px; 
    background-color: #624531; 
    color: #F8F4EF; 
    font-family: JNL Sign Department;
    font-size: 14px; 
    padding: 5px 10px; 
    border-radius: 50%; /* Makes the badge circular */
    z-index: 10; /* Makes sure the badge is on top */

When I add this code to my site, nothing appears 😞

Would love any feedback or advice on this issue! I've also attached a screenshot of what I'm trying to achieve. 

Screen Shot 2024-06-28 at 2.37.36 PM.png

Link to comment

@abbyleighton97 I modified your code and added a few tweaks:

.products-flex-container .list-grid .grid-item:first-child::before {
    content: 'NEW!';
    position: absolute;
    top: -20px;
    left: -20px;
    background-color: #624531;
    color: #F8F4EF;
    border-radius: 50%;
    z-index: 10;
    font-family: 'JNL Sign Department';
    font-size: 20px;
    height: 80px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;


If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.