Font Picker not working in shopify app blocks

Shopify Discussion
1

I am building an app block for which I have written the code as below. The problem is that when I choose the font from shopify theme editor it does not get applied. I am not able to identify the issue nor could I find any resources to help me understand why this is not working


  

    

      {{ block.settings.announcements }}
    

    
      {{ block.settings.announcements }}
      

Selected Font: {{ block.settings.announcement_font_type.family }}

    

  

{% schema %}
{
  "name": "Announcement Banner",
  "target": "section",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#DC2020"
    },
    {
      "type": "text",
      "id": "announcements",
      "label": "Announcements",
      "info": "To add multiple announcements, use the delimitor //"
    },
    {
      "type": "color",
      "id": "announcement_font_color",
      "label": "Font Color",
      "default": "#ffffff"
    },
    {
      "type": "number",
      "id": "announcement_bar_height",
      "label": "Height",
      "default": 40
    },
    {
      "type": "font_picker",
      "id": "announcement_font_type",
      "label": "Font",
      "default": "helvetica_n4"
    }
  ]
}
{% endschema %}
2

Hello @siddhesh2106 . Seems like you’re building a Shopify App. We’ve copy pasted your code in a theme section and made the necessary changes to make it work in theme section. From our side, your font picker is working fine and the font is changing accordingly. So it is not a font picker issue.
However, your first line :

{% assign font = section.settings.announcement_font_type %}

It should be block.settings.announcement_font_type. Can you modify it and check the output? Please let us know if you’ve any query.

1 Like
3

Thanks a ton @BrainStation23 , It was a silly mistake from my end. I should have used block instead of section. It is working fine for me now.

I need one more help, how can I give option to merchants to add multiple announcements? Right now if you see they can add only one announcement but merchants might need to add multiple announcements which currently I am not able to implement in a clean way

4

Glad to hear that @siddhesh2106 . You’re most welcome.