All things Shopify and commerce
I want to add one more functionality in my shopify editor theme in which user can increase and decrease the border radius for the header just like we increase and decrease the logo height . Can anyone please help me
To add functionality for adjusting the border radius of the header in the Shopify theme editor, you can follow these steps:
You need to add a new setting in your theme's settings_schema.json file or the schema section of your header section (header.liquid or similar).
Add a new slider or range input for the border radius:
{
"name": "Header border radius",
"id": "header_border_radius",
"type": "range",
"min": 0,
"max": 50,
"step": 1,
"default": 10
}
In your header section file (e.g., header.liquid), find the container or element where you want to apply the border radius, and add inline styles using the setting:
<div class="header-container" style="border-radius: {{ settings.header_border_radius | default: 10 }}px;">
<!-- Header content goes here -->
</div>
You can add default styling in the theme’s CSS file to ensure a fallback:
.header-container {
border-radius: 10px; /* Default value */
}
Save the changes, test the functionality.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025