How can I add hyperlinks to the text in my FAQ accordion?

Technical Q&A
,

Topic summary

A Shopify FAQ accordion used a basic text field that didn’t allow hyperlinks. The store owner sought a theme-level workaround to enable linkable text within FAQ answers.

  • Initial suggestion: If available, switch to a “Collapsible content” section that supports rich text (formatting and links). This would avoid code changes.
  • Code-based solution: A contributor requested the section code, then provided a replacement that changes the FAQ “answer” setting to a richtext field, enabling links from the theme editor.

A first attempt triggered a Shopify schema error: invalid richtext default content (“All top level nodes must be ‘

’, ‘

    ’, ‘
      ’ or ‘

      ’-‘

      ’”). This happens when the default for a richtext setting isn’t wrapped in valid tags.

      The contributor supplied a corrected version of the section code/schema. The store owner confirmed it worked, and hyperlinks can now be added via the editor.

      Outcome: Resolved. No further actions requested.

      Notes: Screenshots illustrated the limited text field and settings; the code snippets were central to the fix. “Accordion” refers to collapsible FAQ items; “richtext” is a Shopify field type that supports formatted HTML including links.

Summarized with AI on January 2. AI used: gpt-5.
11

Sorry try this one.


{% if section.settings.section_cov %}
{% endif%}

 
  {%- if section.settings.title != blank  or section.settings.subtitle != blank -%}
  

    ### {{ section.settings.title }}     
    {%- if section.settings.subtitle != blank -%}{{section.settings.subtitle}}{%- endif -%}
  

  {% endif %}  
       
    {% for block in section.blocks limit: section.blocks.size%}     
 
    {% if block.type == 'faqsection' %}                   
    {% if block.settings.sectiontitle != blank %}
    ### {{block.settings.sectiontitle}}
    {% endif %}         
    {% endif %}    
 
    {% if block.type == 'faqs' %} 
    
      #### {{ block.settings.question}} 
      
        {{ block.settings.answer}}
      

    

    {% endif %}
    {% endfor %}
  

{% if section.settings.section_cov %}
 {% endif %}

 
{% schema %}
  {
    "name": "FAQ",
    "settings": [
{
        "type": "textarea",
        "id": "title",
        "label": "Heading",
        "default": "Heading",
"info":"Use **text here** to make headings bold"
      },
    {
        "type": "textarea",
        "id": "subtitle",
        "label": "Sub Heading",
        "default": "Describe your products, collection, content etc..."
      },
{
"type": "paragraph",
"content":"Section==="
      },
{
            "type": "select",
            "id": "top-offeset",
            "label": "Top OffSet",
            "default": "default",
            "options": [
              {
                "value": "default",
                "label": "Default"
              },
              {
                "value": "small",
                "label": "Small"
              },
  {
                "value": "none",
                "label": "None"
              }
]
        },
{
"type":"checkbox",
"id":"section_width",
"label":"Fullwidth?",
"default": false
  },
{
        "type": "paragraph",
        "content": "Left/Right Padding for Fullwidth ==="
      },
      {
        "type": "range",
        "id": "pad-desk",
        "label": "Desktop",
        "default": 55,
        "min": 0,
        "max": 100,
        "step": 1
      },    
      {
        "type": "range",
        "id": "pad-mbl",
        "label": "Mobile",
        "default": 15,
        "min": 0,
        "max": 15,
        "step": 1
      },
{
        "type": "checkbox",
        "id": "section_cov",
      "label": "Add Background?",
        "default": false
      },
  {
        "type": "color",
        "id": "sec_bg_clr",
        "label": "Background",
"default":"#fafafa",
"info":"select light color"
  },
  {
        "type": "checkbox",
        "id": "enable_acc",
        "label": "Enable Accordion?",
        "default": false
      },
{
            "type": "select",
            "id": "acc_style",
            "label": "Accordion icons",
            "default": "icons_1",
            "options": [
              {
                "value": "icons_1",
                "label": "Plus/Minus"
              },
              {
                "value": "icons_2",
                "label": "Up/Down Arrows"
              }
            ]
       },
       {
        "type": "checkbox",
        "id": "enable_narrow",
        "label": "Narrow width?",
        "default": false
      },
  {
        "type": "color",
        "id": "sec-title-bg",
        "label": "Section Title Background",
        "default": "#333"
      },
      {
        "type": "color",
        "id": "sec-title",
        "label": "Section Title",
        "default": "#eee"
      },
  {
        "type": "color",
        "id": "questions",
        "label": "Questions",
        "default": "#444"
      },
{
        "type": "color",
        "id": "answers",
        "label": "Answers",
        "default": "#444"
      },
{
        "type": "color",
        "id": "icons",
        "label": "Icons",
        "default": "#333"
      },
{
        "type": "color",
        "id": "borders",
        "label": "Borders",
        "default": "#eee"
      }
],
   "blocks":[
     {
        "type": "faqsection",
        "name": "Section Title",
"settings": [
          {
            "type": "text",
            "id": "sectiontitle",
            "label": "Section Title"
          }
]
      },
  {
    "type":"faqs",
"name":"FAQs",
"settings":[
{
"type":"text",
"id":"question",
"label":"Question",
"default":"Is Optimal compatible with Shopify Online Store 2.0?"
},
{
"type":"richtext",
"id":"answer",
"label":"Answer",
"default":"

Yes, our theme is fully compatible and supports Sections on every page.

"
}
]
      }
],
   "presets": [
      {
        "name": "5 - FAQs",            
        "blocks": [
          {
            "type": "faqs"
          },
          {
            "type": "faqs"
          }            
        ]
      }
    ]
 }
{% endschema %}
1 Like