How can I make buttons rounder in the Debut theme?

[Spaetzle93]

Hello,

i use the free debut theme on my store. is it possible to make all the buttons a little bit rounder? I think square buttons are a bit outdated and would like to use something rounder. is there a way to edit this in the theme?

[dmwwebartisan]

@Spaetzle93

Please share your store URL.

Thanks!

[Zworthkey]

Hii, @Spaetzle93
Kindly share your store URL so,
I can solve your problem and give you a proper solution.
Thank You.

[Spaetzle93]

www.holzbude.shop

i would be very grateful if there was a solution for this

[Zworthkey]

Hii, @Spaetzle93
Paste this code on top of the theme.scss file.

a, button, input {
    border-radius: 7px !important;
}

Thank You.

[Spaetzle93]

www.holzbude.shop

[dmwwebartisan]

@Spaetzle93

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

a, button, input {
    border-radius: 25px !important;
}

Thanks!

[Spaetzle93]

Thanks very much. That works.

I don’t know if you can answer that, but that would be very helpful for me:

Can i make a plus and minus in the quantity selection on the product page and in the shopping cart? Otherwise the customer has to type in the field at extra, delete the number and enter a new number.
That would be smarter. You can have a look at my products pages and cart if you want to.

[dmwwebartisan]

@Spaetzle93

Follow this:

1. Go to theme customize theme editor->select product page->tick “Show quantity selector” box from left side.

2. Go to section->product-template.liquid ->find {% if section.settings.show_quantity_selector %} and comment code that in between condition (only product-form__item–quantity this div ). and paste bellow:

          
          

            -
            
            +
          

        

3. Go to Asset->theme.scss file and add this code at bottom

.qtydiv label{display: block;margin-bottom: 12px;letter-spacing: 2.8px;color: #747a7b;}
.qtydiv .btnqty{display: inline-block;cursor: pointer;user-select: none;font-size: 25px;padding: 5px;line-height: 5px;}
.qtydiv .btnqty.qtyminus{margin-right: 8px;}
.qtydiv .btnqty.qtyplus{margin-left: 8px;}
.qtydiv .quantity-input{border: none;border: none;padding: 8px;text-align: center;width: 50px;outline: none;display: inline-block;}
.qtydiv {display: inline-block;padding-right: 15px;padding-top: 10px;}

4. Go to Asset->theme.js and add this code at bottom:

$('.qtybox .btnqty').on('click', function(){
  var qty = parseInt($(this).parent('.qtybox').find('.quantity-input').val());
  if($(this).hasClass('qtyplus')) {
    qty++;
  }else {
    if(qty > 1) {
      qty--;
    }
  }
  qty = (isNaN(qty))?1:qty;
  $(this).parent('.qtybox').find('.quantity-input').val(qty);
});

Let me know if you need help.

[Spaetzle93]

Should i put the code below this text, which is yellow marked? And what do you mean with “comment code”?

[diego_ezfy]

@Spaetzle93 , do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

.btn, .shopify-payment-button .shopify-payment-button__button--unbranded{
    border-radius: 10px !important;
}

You can control the “rounded-ness” of the buttons by changing the 10px value. The lower, the less rounded they will look.

Kind regards,
Diego

[Spaetzle93]

Thank you. Why is the product images so a strange black border displayed? get the away again?

[Ollie]

Hey @Spaetzle93 .

Thanks for reaching out.

I appreciate you letting us know which theme you are using as that is super helpful! Looking into the options available using the Debut Theme, it looks like in order to make changes to the appearance of the buttons would require a coding change. I can definitely see how making this change would be beneficial on the online store, I am going to use this context as a suggestion to our developers. It may be possible for us to include this change within the Theme Editor. With that being said, we can use free design time for Shopify themes to allow our internal themes team make the changes on your behalf.

If you are interested in using the design time, you will need to log to your store using our Contact Us page. This will allow us to securely verify you as the store owner before discussing the changes you would like to see on your online store.

Let me know if you have any questions.

[Spaetzle93]

The buttons worked, but there are some small errors. Can I change that? Otherwise I leave the buttons but again square.

I would be very grateful if there would be a solution for this.

You are welcome to have a look at my homepage. Is it perhaps possible for me to make only the green colored buttons round?