Solved

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

poe1
Excursionist
21 0 4

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

Bildschirmfoto 2024-05-10 um 11.55.07.png

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

Thankful for any help! 

URL: cutegemz.com passw.: neatyou

Accepted Solutions (2)

Rishihuptech
Shopify Partner
489 83 94

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Rishihuptech
Shopify Partner
489 83 94

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 6 (6)

Rishihuptech
Shopify Partner
489 83 94

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
poe1
Excursionist
21 0 4

Thank you. It worked for the button.

Rishihuptech
Shopify Partner
489 83 94

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

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
poe1
Excursionist
21 0 4

Sorry, but unfortunately it didn't work. 😕

Rishihuptech
Shopify Partner
489 83 94

This is an 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.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
poe1
Excursionist
21 0 4

Perfect! It works. Thank you.