Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: CSS

CSS

DanteJacobsson
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
9085 2172 2681

Hi @DanteJacobsson 

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
DanteJacobsson
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
9085 2172 2681

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

PageFly-Noah
Shopify Partner
1317 233 277

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.

DanteJacobsson
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
1317 233 277

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.

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.

DanteJacobsson
Tourist
4 0 1

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

PageFly-Noah
Shopify Partner
1317 233 277

Hi @DanteJacobsson  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 11 38

Hello @DanteJacobsson,

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

banned

BSSCommerce-B2B
Shopify Partner
1969 564 566

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" 

<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! 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now