How can I display the name instead of the title in the customizer?

How can I display the name instead of the title in the customizer?

Flexowitsch
Shopify Partner
2 0 0

Hi there,

 

so I am quiet new to this and I am lerning about writing sections at the moment. I am facing the following problem:

 

In the team member section I created you can input a picture, a name, a tittle and a brief description. Unfortunately when you add all this information instead of the Name being depicted in the customizer the title is displayed. In this use case it is vital that the name is displayed (see picture) in order to easily edit the entries.

 

Bildschirmfoto 2022-03-05 um 14.50.21.png

 

I played around with the code I wrote for a couple of hours now but couldn't figure out what has to be changed to display the name. Can you please enlighten me? 🙂

 

Heres the code:

 

 

 

<div>

    <h2>
        {{section.settings.team_heading}}
    </h2>

    <div class="grid team-item">
    {% for member in section.blocks %}
        <div class="grid__item medium-up--one-half">
           
          {% if member.settings.photo%}
                {{ member.settings.photo | img_url: '300x' | img_tag}}
          {% endif%}
            <h3>{{ member.settings.name}}</h3>
            <span>{{ member.settings.title}}</span>
            <p>{{ member.settings.bio}}</p>
        </div>
    {% endfor %}
    </div>

</div> 

{% schema %}
{
    "name": "Team Members",
    "class": "team_members_section",
    "settings": [
        {
            "id": "team_heading",
            "type": "text",
            "label": "Section Title",
            "default": "Team Members"
        }
       
    ],
    "blocks": [
        {
            "name": "Team Member",
            "type": "staff-profile",
            "settings": [
                {
                    "type": "image_picker",
                    "id": "photo",
                    "label": "Photo"
                },
                {
                    "id": "name",
                    "type": "text",
                    "label": "Name"
                },
                {
                    "id": "title",
                    "type": "text",
                    "label": "Title"
                },
                {
                    "id": "bio",
                    "type": "textarea",
                    "label": "Bio"
                }
                

            ]
        }
    ],
    "presets": [
        {
            "category": "Store Information",
            "name": "Team Members" 
        }
    ]
}
{% endschema %}

 

 

  

Reply 1 (1)

ryandavisdev
Shopify Partner
2 0 1

This is a very old topic, but I also ran into this.

The editor was displaying the text from a setting called "header".

Instead, I changed the setting id to be "header_text" and that seemed to fix the issue.

Now the editor shows the app name, as expected, rather than the header value.