How do I make buttons round with Flow theme please?

Store Design

Topic summary

A user seeks help converting rectangular buttons to rounded ones on their Shopify store using the Flow theme.

Initial Attempts:

  • Multiple responders provided CSS solutions targeting button elements with border-radius: 20px
  • Suggested placement in base.css or theme.liquid files
  • Early solutions failed to produce the desired effect

Working Solution:
The issue was resolved using CSS wrapped in Liquid style tags:

{% style %}
button.quick-add-button {
    border-radius: 20px;
}
a.quick-add-button-variants {
    border-radius: 20px;
}
{% endstyle %}

Outcome:

  • Code successfully rounded the buttons when placed in theme.liquid above the </body> tag
  • User confirmed the solution worked and expressed gratitude
  • Discussion resolved with working implementation
Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
6

Hi, @BBS3 .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

a {
    border-radius: 20px !important;
}
input#subscribe {
    border-radius: 20px;
}

Result:

websensepro_0-1696421562578.png
websensepro_0-1696421562578.png1336×407 14.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
websensepro

1 Like