Subscribe and save buttons not formatted the same

Shopify Discussion
, , ,

Topic summary

Issue: Inconsistent “Subscribe & Save”/hover box styling across products; some cards lacked the dark blue background and alignment.

Context: OP shared a Google Drive screenshot and the store URL (sweetselderberry.com). Images are central to understanding the visual mismatch.

Proposed fixes:

  • Add CSS targeting the subscription title element (.bold-ro__recurring-title) to set a dark blue background with white text. Location: either theme.liquid (before the closing ) or the theme’s main CSS asset (main.css/base.css/style.css/theme.css).
  • Adjust width to 100% so the blue box spans the full product card/image width and centers correctly.
  • Optional typography/alignment refinements to match the Add to Cart button: center text, uppercase, letter spacing, font size/weight.

Steps provided: Online Store > Themes > Edit code > Assets > open main CSS file, paste styles at the bottom, and save. An alternative snippet placement in theme.liquid was also suggested.

Outcome: OP confirmed the width/centering change resolved the issue. Additional style tweaks were shared to harmonize design with the Add to Cart button. Status: Resolved; no outstanding questions.

Summarized with AI on December 24. AI used: gpt-5.
1

Hey, newbie here. Just starting with the IT stuff like CSS, Javascript codes so if you can please help me in a detailed answer and instructions on how to fix this.

As you can see some products doesn’t have a dark blue box background when I hover on them. But the other products have it, how do i fix it please

https://drive.google.com/file/d/1mvnuG49rJbcX0-53Zpj4teSNLBCwQlHM/view?usp=drive_link

1 Like
2

Hi @rnzmracn

Would you mind to share your store URL? Thanks!

3

sweetselderberry.com

Here you go!

4

Hi @rnzmracn
Please put below css in theme.liquid before body closing tag

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

5

Hey, I really appreciate this! This worked but if there’s a way to make the blue box the same width as the images and centered that would be awesome!!

6

Thanks for the info, just clarification. Do you want only to change the background or you like same font size and alignment?

This is for background and color.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.bold-ro__recurring-title {
    background-color: #13294b;
    color: white;
    padding-top: 5px;
}

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

7

Hi @rnzmracn

Giving it 100% width will cover the whole card

Thanks!

1 Like
8

THANK YOU SO MUCH!!

9

This is for the same design with the add to cart button. Same Instruction.

.bold-ro__recurring-title {
    background-color: #13294b;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fafafa;
    font-size: 13px;
    font-weight: 600;
    font-style: normal;
}

And Save.

result:

Made4uoRibe_1-1721407158740.png
Made4uoRibe_1-1721407158740.png540×476 44.8 KB

Made4uoRibe_2-1721407166043.png
Made4uoRibe_2-1721407166043.png438×438 69.3 KB

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