Editing Submit Button Curve & Enlarging Store Logo

[sof000]

Hey all,

I have two questions: I am using Horizon as my core Shopify theme (a lot of editing), and I would greatly appreciate some help with editing the site. Firstly, how can I edit a curved square (submit button attached below) into a regular sharp square?

Secondly, instead of attaching a logo to my profile, I am using the business name and a different font (one of the available Shopify fonts). I would like to enlarge the logo, but I cannot do so in the theme settings section, as it relies on an uploaded logo (I cannot find the identical font, New York, online), so I was wondering whether there is a way to enlarge it.

All help is greatly appreciated

[sof000]

the text logo size would be great

[Maximus3]

@sof000

If you want real help, you’re going to have to provide specific url so real people can give you real solutions.

Otherwise you’ll get generic copy/paste responses like above.

[sof000]

Hey, do you mean the URL to my site?

[Maximus3]

Yes. No one can give you a solution for the form button unless they know what specific name of the button it is and where it is.

[tim_tairli]

Out of the box, Horizon has these settings under Theme settings, so changing “Corner radius” on “Primary button” does control the ATC corners.

This, however, may also effect other buttons.

If you’d rather use CSS to control only ATC corners, you can use this:

.add-to-cart-button {
  border-radius: 0;
}

And this should change the logo text size:

.header-logo__image-container {
  font-size: 1.5rem;
}

But this is all for default theme. Modified one may require different code.

[oscprofessional]

@sof000

Fast, safe fix

Add this to assets/base.css (or theme.css ):

.button,
button,
input[type="submit"],
.shopify-payment-button__button {
  border-radius: 0 !important;
}

This will:

• Remove rounding from Submit, Add to Cart, Checkout, etc.
• Keep spacing and hover behavior intact

---

If you want to target ONLY the submit button shown

If the button has a class like .contact-form or .newsletter-form, use:

.contact-form .button {
  border-radius: 0 !important;
}

[sof000]

Thank you so much for your help! Now that you have shown me where to go it seems like such an obvious place to look. Thanks for the patience :)!

[sof000]

Thank you so much for the help!

[sof000]

Once again, thank you so much! The logo / font size changed with ease!!

[sof000]

Is there any way to have two different font sizes set for the computer version and the phone version?

[tim_tairli]

Of course, just have it like this:

/* default (mobile) */
.header-logo__image-container {
  font-size: 1.25rem;
}
/* wider screens (desktop) */
@media (min-width:750px) {
  .header-logo__image-container {
    font-size: 1.5rem;
  }
}

There are other ways, but this one is the most traditional.

[mt686]

Hey! Both of these are doable with a couple small theme tweaks.

For the rounded button, Horizon usually controls that with border-radius. You can add something like this to your custom CSS to square it off:

button,
.button,
input[type="submit"] {
  border-radius: 0;
}

If it’s only one specific button, you can inspect it in the browser and target that class instead.

For the text-based logo, Shopify treats that as a heading rather than an image, so the size is controlled by font styles, not the logo setting. Look for the header logo or site title CSS (often something like .header__heading or .site-title) and increase the font-size there:

.header__heading {
  font-size: 32px;
}

You may need to adjust desktop vs mobile separately.

Also worth mentioning: I built Easy Edits, which lets you just click on things like buttons or header text and change styles visually, or even tell the AI what you want changed and it applies it for you. I’m the developer, and it’s designed for exactly these kinds of small but annoying tweaks.

https://apps.shopify.com/easy-edits