How to make buy buttons more square Shopify? You can do this in two different ways: by editing code or without touching the code. In this guide, we teach both ways to change the Shopify button radius.
Contact Us to for Any Shopify Help
How to Make Buy Buttons More Square Shopify? By Edit Code
If you have a little knowledge of editing code in Shopify, then you can follow the steps to change the button border radius.
Here is the step-by-step guide.
1. Access the Theme Editor
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on the theme you want to edit.
2. Open the Theme's Code
- In the theme editor, click on Actions > Edit Code.
3. Locate the CSS File
- In the code editor, find the CSS file where your button styles are defined. It’s usually found under Assets and could be named something like `theme.scss.liquid','style.css', or`style.css`, or `main.scss`.
4. Edit the Button Styles
- Look for the CSS class that defines the styles for the buy buttons. It might be something like '.btn', '.button', or '.btn--primary'.
- To make the buttons more square, you’ll need to adjust the 'border-radius' property. To make the button edges square, set it to '0'. You might also need to adjust the 'padding' to make the button more of a square shape.
Here’s an example of what the CSS might look like:
css
.btn, .button, .btn--primary {
border-radius: 0px; /* Remove rounded corners */
padding: 10px 10px; /* Adjust padding to make the button square */
}
You can also control the button's height and width to ensure it maintains a square shape, depending on your design needs.
5. Save and Preview
- After making your changes, click Save.
- Preview your store to see the updated button design. To achieve the desired square look, adjust the padding or other properties as necessary.
6. Testing
- Test your changes across different devices (desktop, mobile, tablet) to ensure the buttons look good on all screen sizes.
Change the Shopify Button Radius without Touch Code
- Log in to your Shopify admin panel.
- Click on “Online Store”, and now click on the 'Customize' option in your current theme.
- Once you select the 'Customize' option, the store editing dashboard will appear, with a small gear icon representing the theme settings option on the left side.
- After selecting the theme settings menu, you need to select the 'Buttons' option. Under this, you'll see the 'Corner Radius' option.
- From here, you can manage button radius. For example, if you want to make that square shape, set the radius slider to zero, or if you want to add radius, drag it.
- This change in radius also affects the button radius on the product page.
- Once you're satisfied, simply click the 'Save' button.
Final Words
Making Shopify buy buttons more square is easy if you follow the above steps. But if you still find some difficulty to change the buy now button on your Shopify store, you can get the help of our Shopify expert developer to make any change to your Shopify store.
Also read: What is Shopify Sidekick and Shopify Magic?