How to round add to cart and checkout button only on mobile?

[crescenthu]

Hello id like my add to cart and checkout button to be slightly rounded on my product page but ONLY on mobile. Thanks in advance!

crescent.hu

Pw: theaba

[PieLab]

Hi @crescenthu

• In your theme’s code editor, go to the file: assets/base.css.
• Scroll to the very bottom of the file and paste this code:

/* Rounded product buttons on mobile */
@media screen and (max-width: 749px) {
  .product-form__submit,
  .shopify-payment-button__button {
    border-radius: 8px; /* Adjust as needed */
  }
}

Now, preview the theme to see the changes on a mobile device. If it looks correct, publish the theme.

Hope this helps!

[crescenthu]

Hi! Unfortunately, this didn’t work for me.

[ericson2]

@crescenthu Hi there!

You can make your header transparent only on product pages (and only on mobile) with a small CSS tweak. Here’s how:

1. Go to Online Store > Themes > Edit code.

2. Open your base.css (or theme.css, depending on your theme).

3. Add this code at the very bottom:

/* Transparent header only on product pages - mobile */
@media screen and (max-width: 749px) {
  body.template-product .site-header {
    background: transparent !important;
  }
}

/* Keep header normal on all other pages */
@media screen and (max-width: 749px) {
  body:not(.template-product) .site-header {
    background: #ffffff !important; /* Change #ffffff to your header’s default color */
  }
}

What this does:

• body.template-product makes the header transparent only on product pages.

• The second rule (body:not(.template-product)) ensures the header stays its normal color everywhere else.

• The max-width: 749px media query limits it to mobile screens.

If your theme uses a different class name for the header (instead of .site-header), just adjust it after inspecting the element in your theme.

[tim_tairli]

Try this in the “theme settings”=> “Custom CSS”

@media (max-width: 749px){
  .product-form__submit,
  .product-form__submit:after,
  shopify-accelerated-checkout {
    --buttons-radius-outset: 2rem;
    border-radius: 2rem;
    
  }
}