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

Technical Q&A
,
1

Hello,

Our FAQ page has an accordion style layout, but doesn’t seem to allow hyperlinks in the text. Unfortunately I’m unable to contact the person who designed our theme, so I’m hoping to find a workaround.

Is there a way to edit this in the theme to allow hyperlinked text?

Thank you in advance.

Screenshot (6).png
Screenshot (6).png1939×415 35.8 KB

2

You can add a link to text if your collapsible has this option

Screenshot 2024-03-19 at 10.43.19.png
Screenshot 2024-03-19 at 10.43.19.png579×622 31.2 KB

3

Thank you. This doesn’t appear to be an option - the text input field for each FAQ is very basic, with no option to for bold, justification, links etc. I’m wondering if there’s a workaround for this to include links?

Screenshot (7).png
Screenshot (7).png335×250 22.4 KB

Screenshot (8).png
Screenshot (8).png357×516 15.6 KB

4

You can try to check if your theme has the option to add a Collapsible content section instead of using the FAQs section.

5

can you track down the code for accordion and provide me the file I will help you fix it it’s a small change honestly it will be fixed

6

Thanks, I’ll look into it. Is this something I would find in this area to indicate that it’s possible with my theme?

Screenshot (9).png
Screenshot (9).png691×814 53.1 KB

7

Hi @ribc24

As I said it’s a small change in code can you track down code for the collapsible if no then I can help you track it then you can send me code and I will fix it for you

8

Hello, I have the code for the FAQ page below. Not sure if this is where it’s located?

{% 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 %}
.p_ttl{ color:{{section.settings.questions}}; border-bottom:1px solid {{section.settings.borders}}; } .p_con{color:{{section.settings.answers}};} .p_ttl:before {color:{{section.settings.icons}}; }

.fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-mbl}}px; padding-right:{{ section.settings.pad-mbl}}px; }
@media only screen and (min-width: 768px){
.fullwidth-{{section.id}} { padding-left:{{ section.settings.pad-desk}}px; padding-right:{{ section.settings.pad-desk}}px; }
}

{% 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”:“textarea”,
“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 %}

#faq h3 { background:{{section.settings.sec-title-bg}}; color:{{section.settings.sec-title}}; }
9

Now replace this code and you will be able to add link text from the frontend.


{% 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 %}

Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!

1 Like
10

Thank you. When trying to replace the code I’m getting the following error:

“Invalid block ‘faqs’: setting with id=“answer” default is invalid richtext: All top level nodes must be ‘

’, ‘

    ’, ‘
      ’ or ‘

      ’-‘

      ’ tags”

      Do you have any ideas why this may be?

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
12

Excellent! That worked. Thank you so much for your help, I really appreciate it.

1 Like
13

Gimme a like then :sweat_smile:

14

Done! Sorry, I don’t know how these things work :sweat_smile: thanks again