How do I change the badge position on taste theme and align it to center?

Store Design

Topic summary

A user seeks help centering sold out/sale badges on their Shopify store using the Taste theme.

Initial Solution Provided:

  • Navigate to Online Store > Themes > Assets folder
  • Open main.css (or base.css/style.css)
  • Add CSS code targeting .product-card-wrapper .card__badge.right with justify-self: center

Follow-up Questions:
The original poster returns with two additional centering requests:

  1. Center-aligning an ‘Explore new styles’ heading
  2. Center-aligning footer copyright text

Second Solution:

  • Use same CSS file editing approach
  • Add code targeting .collection__title h2.title.inline-richtext with text-align: center

Both solutions involve adding custom CSS to the theme’s stylesheet. Screenshots were shared showing the issues and results. An unrelated user briefly interrupts asking for contact information.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am trying to align the sold out/sale badges to the center but I cant seem to do it.

Screenshot 2024-10-02 at 4.40.16 AM.png
Screenshot 2024-10-02 at 4.40.16 AM.png702×1106 78.1 KB

1 Like
2

Hi @zoeng

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

Hello thanks for the prompt response. I have not gotten a domain, it is this for now: https://764714-d3.myshopify.com/

password: thowse

Thank you, I am just starting up.

4

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.card-wrapper.product-card-wrapper .card__badge.right {
  justify-self: center;
}

And Save.

Result:

Made4uoRibe_0-1727817442058.png
Made4uoRibe_0-1727817442058.png495×554 32.9 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Hello, its me again. I have another 2 simple things that needs help.

How do I position ‘Explore new styles’ to center align and adjust my footer copywriter liner at the end to center align as well? I am having trouble finding the right class to begin with.

Screenshot 2024-10-02 at 10.29.47 AM.png
Screenshot 2024-10-02 at 10.29.47 AM.png2862×1144 135 KB

Screenshot 2024-10-02 at 10.31.09 AM.png
Screenshot 2024-10-02 at 10.31.09 AM.png2878×682 29.1 KB

6

How can I contact you I need some help

7

Yeah sure check this one.

Same Instruction. The last last curly bracket that you see } paste the code after.

.collection__title h2.title.inline-richtext {
    text-align: center;
}

And Save.

Result:

Made4uoRibe_0-1727868082877.png
Made4uoRibe_0-1727868082877.png1410×422 68.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

Hi @56brands

You can PM me anytime, or visit our store, which you can find in my signature below. Thank you, and I hope you get in touch soon!