Anyone know how I can reduce the button size on my front page only? They’re currently a little too big and are distracting. Thank you (Dawn 15.0.1)
Topic summary
A user seeks to reduce button sizes specifically on their store’s front page, finding them too large and distracting.
Proposed Solutions:
Two community members offered CSS-based approaches:
-
EBOOST’s method: Navigate to Online Store → Themes → Edit Code → Assets/base.css, then add custom CSS targeting button classes at the end of the file. The code adjusts
min-widthandmin-heightproperties using calc functions with CSS variables. -
PageFly-Richard’s method: Add CSS code to theme.liquid file above the
</head>tag by accessing Online Stores → Themes → More Actions → Edit Code.
Both solutions involve custom CSS modifications to the theme files. Visual screenshots were provided to guide the implementation process.
Status: The discussion remains open with no confirmation from the original poster about which solution was attempted or whether the issue was resolved.
Hi @ape514 ,
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Add code below to end of file
.button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded {
min-width: calc(10rem + var(--buttons-border-width) * 2);
min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}
Hi @ape514
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly