Item Label for Custom Section

Store Design
,

Topic summary

A user created a custom tabs section for the Shopify Dawn theme and wants the backend editor to display the user-entered “Tab Label” text instead of the default “Tab” label when listing items.

Issue Clarification:
The tab labels display correctly on the frontend, but in the theme editor’s backend list, all items show as “Tab” rather than their custom labels (e.g., “Back To The Future”).

Solution Provided:
Modify the block’s name property in the schema to dynamically reference the tab_label setting:

"name": "{{ block.settings.tab_label | default: 'Tab' }}"

Implementation Steps:

  • Update the schema’s block name property to use Liquid templating
  • The default: 'Tab' ensures a fallback if no label is entered
  • Save changes and refresh the theme editor
  • Verify proper Liquid syntax formatting for Shopify’s schema requirements

This change makes the backend editor reflect user-defined labels, improving customization clarity.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

I created a new section for my Shopify Dawn Theme to add Tabs and other items. Clicking “Add Tab” adds a Tab item with the label “Tab” but I would like to display the content from the “Tab Label” field instead of the text default text “Tab”.

Relevant schema:

“blocks”: [
{
“type”: “tab”,
“name”: “Tab”,
“settings”: [
{
“type”: “text”,
“id”: “tab_label”,
“label”: “Tab Label”
},

rollover-tab.jpg
rollover-tab.jpg605×172 8.37 KB

2

Hi @yourbudweiser

To display the “Tab Label” text instead of the default “Tab” label in your new section:

  1. In your Liquid code for the tabs section, locate where the tab name is rendered.
  2. Replace the hardcoded “Tab” label with dynamic content that references the tab_label setting, like this:

{{ block.settings.tab_label }}

This change will display the label entered in the “Tab Label” field. Save and refresh to see the update in your Shopify Dawn theme.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy

3

Maybe my question was not clear. The correct Tab Label is displayed on the front end page but in the backend, it says Tab where it should say whatever the user entered in the Tab Label textbox. So in my image, if the user types “Back To The Future” in the Tab Label textbox, then instead of the first item in the Rollover List Tabs saying Tab, the first item would say “Back To The Future”. Is it a schema issue?

4

Hi @yourbudweiser

Yes, it’s a schema issue. You need to update the block’s name property in the schema to use the tab_label setting. Replace “name”: “Tab” with:

“name”: “{{ block.settings.tab_label | default: ‘Tab’ }}”

To be more specific:

To display the user-entered “Tab Label” in the Shopify theme editor backend instead of the default “Tab,” you need to modify the block’s name property to reference the tab_label setting. Here’s how to do it:

  1. Update the Schema:
    Ensure your block schema includes the tab_label setting, which you already have:

“blocks”: [

{

“type”: “tab”,

“name”: “{{ block.settings.tab_label | default: ‘Tab’ }}”,

“settings”: [

{

“type”: “text”,

“id”: “tab_label”,

“label”: “Tab Label”

}

]

}

]

  1. Use Liquid to Dynamically Set the Block Name:

Replace the static “name”: “Tab” with a Liquid template that pulls from the tab_label setting. The default: ‘Tab’ ensures it falls back to “Tab” if no label is provided.

“name”: “{{ block.settings.tab_label | default: ‘Tab’ }}”

  1. Ensure Proper Liquid Syntax:

Make sure the Liquid syntax is correctly interpreted in your theme’s JSON schema. Shopify may require specific formatting, so verify with Shopify’s Schema documentation.

  1. Save and Refresh:

After updating the schema, save your changes and refresh the theme editor. The backend should now display the custom “Tab Label” entered by the user instead of the default “Tab.”

Summary: By dynamically setting the block’s name property to use the tab_label setting with Liquid, the backend will reflect the user-defined label, enhancing clarity and customization.