CSS

ludwigdafonseca
Tourist
4 0 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

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
6487 1552 1924

Hi @ludwigdafonseca 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
ludwigdafonseca
Tourist
4 0 1

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. 

Made4uo-Ribe
Shopify Partner
6487 1552 1924

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

PageFly-Noah
Shopify Partner
1288 229 262

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ludwigdafonseca
Tourist
4 0 1

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. 

PageFly-Noah
Shopify Partner
1288 229 262

Hi @ludwigdafonseca  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.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ludwigdafonseca
Tourist
4 0 1

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

PageFly-Noah
Shopify Partner
1288 229 262

Hi @ludwigdafonseca  Iam sorry for delay, can you add code here in file theme.liquid and above </body>:

<style>
.card__information{
       display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}
</style>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

EFOLI-Emilia7
Shopify Partner
349 10 38

Hello @ludwigdafonseca,

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

Emilia7 | eFoli
-Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our apps:Inkybay || MultiVariants

BSSCommerce-B2B
Shopify Expert
476 91 104

Hi @ludwigdafonseca ,

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" 

<div class="soldout-container">
    <div class="soldout-banner">Slutsald</div>
</div>

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! 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency