CSS

Technical Q&A
, , ,
1

Hi, I’m trying to change the location of the “soldout” banner that pops up right under the item-picture. This is when I’m on the main-page, since I have added a featured collection on the main-page.

I have edited the CSS for item/card: title & price, to make the text align to the center of the page. However, I’m still trying to figure out how to make the same on the soldout banner.

So far I have managed to edit the prior edits directly on the webshop editor, under “edit CSS” (on the chosen section).

Any tips?

Screenshot 2024-06-05 at 23.09.42.png
Screenshot 2024-06-05 at 23.09.42.png652×1160 76.7 KB

1 Like
2

Hi @DanteJacobsson

Which location you like to change the badge, it in the center? Would you mind to share yur store URL? Thanks!

3

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

4

thanks for answering Noah. The thing is we don’t have it live. So there is no way to acess it right now. Only me and my partner can edit it.

Can you possibly describe it in here? All the best.

5

Hi, thanks for answering. The page is not live yet. Since we are working for an old friend of ours, that is about to launch some clothes. Therefore we want to solve this before our free trial runs out, and if the result come out goood, we will then subscribe and launch the site via shopify.

6

Hi @DanteJacobsson I’m sorry. Because you need to check the class or id of that button and then add code to align it to the center. Can you send this page url link via private message? everything will be confidential. If I can’t test the element I can’t come up with the right solution. Hope you understand. Thank you.

7

Hello @DanteJacobsson ,

For suggesting a possible solution, please share your story URL.

8

Sounds good! How do I send a private message in here?

9

Hi @DanteJacobsson ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.

You need to find the div class wrapping the “soldout banner” and add attribute to center its position. For example:

if that div had class name “soldout-container”


    
Slutsald

And the corresponding CSS:

.soldout-container {
    text-align: center;
}

or using flex box to center div:

.soldout-container {
    display: flex;
    justify-content: center;
    align-items: center; 
}

The above is my suggestion and a similar example, but to do it most accurately, I still need to know the URL link to your store.

I hope these suggestion will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

10

You can send a preview or pm if you dont like to share in public. Thanks!

11

Hi @DanteJacobsson Iam sorry for delay, can you add code here in file theme.liquid and above :