How to add border radius for header in Shopify Editor theme?

[riyak-029]

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

[Ahmad31]

To add functionality for adjusting the border radius of the header in the Shopify theme editor, you can follow these steps:

1. Edit the Theme Schema

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
}

2. Update the Header Section

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>

3. Preview and Test

• Go to the Shopify theme editor.
• Navigate to the Header settings.
• Adjust the new "Header border radius" slider and ensure the border radius changes dynamically.

4. Optional: Add a Fallback in CSS

You can add default styling in the theme’s CSS file to ensure a fallback:

.header-container {
  border-radius: 10px; /* Default value */
}

5. Save and Publish

Save the changes, test the functionality.