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

[poe1]

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

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

Thankful for any help! 

URL: cutegemz.com passw.: neatyou

[Huptech-Web · Accepted solution]

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 )
5. 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.

[Huptech-Web · Accepted solution]

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 )
5. 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.

[poe1]

Thank you. It worked for the button.

[Huptech-Web]

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));
}

[poe1]

Sorry, but unfortunately it didn't work. 😕

[Huptech-Web · Accepted solution]

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.

[poe1]

Perfect! It works. Thank you.