Why is there an empty button on my cart site and how can I get rounded corners for my product image?

Store Design
, , , ,

Topic summary

Issue: An empty button appeared on the cart page after adding a product, and the user wanted rounded corners for product images in the cart.

Initial guidance: Edit theme CSS (base.css). Replace the .button, .shopify-challenge__button, .customer button rule (line ~1237) and add border-radius: 5px to .product__media.media.media–transparent, .global-media-settings img (line ~1125) and .global-media-settings (line ~3019).

Progress: The button issue was fixed; the image rounding initially did not take effect.

Follow-up fix: Add more specific overrides at the end of the CSS file to ensure they apply:

  • body .button, .shopify-challenge__button, .customer button { color: #000; }
  • body .product__media.media.media–transparent, .global-media-settings img { border-radius: 5px; }
  • body .global-media-settings { border-radius: 5px; }

Outcome: Both the empty button styling and rounded image corners worked after applying the final CSS overrides. Status: Resolved. Note: Code snippets and CSS specificity/placement were central to the solution.

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

Hi, when I add a product to my cart there is an empty button visible.

Bildschirmfoto 2024-05-10 um 11.55.07.png
Bildschirmfoto 2024-05-10 um 11.55.07.png862×770 40.5 KB

I’m also wondering on how I can get the corners of my images in the cart rounded.

Bildschirmfoto 2024-05-10 um 11.55.02.png
Bildschirmfoto 2024-05-10 um 11.55.02.png2322×350 122 KB

Thankful for any help!

URL: cutegemz.com passw.: neatyou

2

For empty button:
Hello! @poe1 Please follow these steps to add this CSS code:

  1. Go to your Online Store

  2. Click on “Themes”

  3. Select “Edit code”

  4. open “base.css”

  5. find this class .button, .shopify-challenge__button, .customer button ( line no : 1237 )

  6. replace the following code

.button, .shopify-challenge__button, .customer button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 0;
    padding: 0 3rem;
    cursor: pointer;
    font: inherit;
    font-size: 1.5rem;
    text-decoration: none;
    color: #000;
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(var(--color-button), var(--alpha-button-background));
}

Let me know if you need further assistance.

3

Hello! @poe1 For corners, cart rounded images:
reply to this CSS on

Fine this class in base.css file and replace CSS ( line no : 1125 )

.product__media.media.media--transparent, .global-media-settings img {
    border-radius: 5px;
}

Fine this class in base.css file and replace CSS ( line no : 3019 )

.global-media-settings {
    position: relative;
    border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
    border-radius: 5px;
    overflow: visible !important;
    background-color: rgb(var(--color-background));
}
4

Sorry, but unfortunately it didn’t work. :confused:

5

Thank you. It worked for the button.

6

Hello! @poe1 Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
body .button, .shopify-challenge__button, .customer button {
    color: #000;
}
body .product__media.media.media--transparent, .global-media-settings img {
    border-radius: 5px;
}
body .global-media-settings {
    border-radius: 5px;
}

Let me know if you need further assistance.

7

Perfect! It works. Thank you.