Schema doesn't output or render anything on my front-end page (Shopify dawn theme 2.0)

Store Design
1

Hi,

I am not sure if this is a right place to ask a coding question but I do need a kind help from anyone who can help me solve the issue I am running into.

I have recreated tabs on the dawn theme and also add a schema on setting customizer but for some reasons it does not show anything on my tab. The schema does work on setting but not output any information I want it to be displayed on front-end page (image below).

URL HERE: https://wallartfantasy.com/products/create-your-own-art

Screen Shot 2022-08-24 at 3.31.41 PM.jpg
Screen Shot 2022-08-24 at 3.31.41 PM.jpg1891Ă—492 75 KB

I also want to know I should set up the tab that allows me to rename the tab label with setting customizer instead of manually going to code file to change it. I have try to put {{section.settings.id}} anywhere I can just to see if it works but no luck so far… below is the code I have.

Please let me know what I am missing. Any hint is appreciated. Thank you.


      
      
      
      

      

      
      
        ### {{ section.settings.heading-1}}
        

{{ section.settings.content-1}}

        
      

      
      
        ### PROCESSING TIME
        

      

      
      
        ### RETURN
        

s
      

      
      
        ### FAQs
        

      

          
      

{{ section.settings.heading-1 }}
{% schema %}    
    {
      "name": "t:sections.main-product.name",
      "tag": "section",
      "class": "section",
      "blocks": [
         {
        "type": "product_tab",
        "name": "️Product tab",
        "settings": [
          {
             "type":"text",  
             "id":"heading-1",
             "label":"heading" 
          },
          
          {
            "type":"richtext",
            "id":"content-1",
            "label":"content"
          },
          {
             "type":"text",  
             "id":"heading-2",
             "label":"heading" 
          },
         {
            "type": "richtext",
            "id": "content-2",
            "label": "content"
          },
          {
             "type":"text",  
             "id":"heading-3",
             "label":"heading" 
          },
         {
            "type": "richtext",
            "id": "content-3",
            "label": "content"
          },
          {
             "type":"text",  
             "id":"heading-4",
             "label":"heading" 
          },
          {
            "type": "richtext",
            "id": "content-4",
            "label": "content"
          }
      ]
    },
1 Like
2

Hi @KcZyien ,

It seems like you are set on this way. You can actually executed this without using javascript code but anyway.

I revised your code to function. Please replace your current code with the code below.

{% for block in section.blocks %}
      
{% endfor %}
      
      
{% for block in section.blocks %}
      

        ### {{ block.settings.heading }}
        

{{ block.settings.content }}

      

{% endfor %}
       
      

{% schema %}    
    {
      "name": "t:sections.main-product.name",
      "tag": "section",
      "class": "section",
      "blocks": [
         {
        "type": "product_tab",
        "name": "️Product tab",
        "settings": [
      {
             "type":"text",  
             "id":"button_text",
             "label":"button text" 
          },
          {
             "type":"text",  
             "id":"heading",
             "label":"heading" 
          },
          {
            "type":"richtext",
            "id":"content",
            "label":"content"
          }
      ]
    }
]
}
{% endschema %}
1 Like
3

@made4Uo

Thank you so much for helping me revise the code and it works, but there are some extra blocks showing on the pages. Was there anything I did wrong?

KcZyien_0-1661387299301.png
KcZyien_0-1661387299301.png1198Ă—276 64.3 KB

4

Remove the empty blocks that you have

5

@KcZyien

I change the code below that will check if the heading or the button text is not empty


{% for block in section.blocks %}
{% if block.settings.button_text != blank %}
      
{% endif %}
{% endfor %}
      

      
{% for block in section.blocks %}
{% if block.settings.heading != blank %}
      
        ### {{ block.settings.heading }}
        

{{ block.settings.content }}

      

{% endif %}
{% endfor %}
       
      

{% schema %}    
    {
      "name": "t:sections.main-product.name",
      "tag": "section",
      "class": "section",
      "blocks": [
         {
        "type": "product_tab",
        "name": "️Product tab",
        "settings": [
      {
             "type":"text",  
             "id":"button_text",
             "label":"button text" 
          },
          {
             "type":"text",  
             "id":"heading",
             "label":"heading" 
          },
          {
            "type":"richtext",
            "id":"content",
            "label":"content"
          }
      ]
    }
]
}
{% endschema %}
1 Like
6

Hi @made4Uo

One thing I noticed with previous code is all that extra blocks represent all other blocks on my product page such as product title, price, quantity and all others. If I hide all of them in setting customizer, then the extra buttons will be hidden as well. I actually don’t know how those buttons are reflecting other blocks. If you could also let me know, it would be so much appreciated. Regardless, the problem is all fixed and buttons are hidden, and I can’t appreciate you enough for what you did. Thank you.