Adding custom HTML to FAQs page

Solved
Ninthony
Shopify Partner
1973 296 782

Try typing some string different of characters inside each "unless" or "if" statement to see what's going on. I'm pretty sure your faq snippet is being rendered from the first "unless" condition. Maybe try commenting that render out and putting your forloop in there.

The if statement that you're trying to output the code in says "If page.content is not blank, or show_page_title is true, then show this." -- I suspect you don't have any content in the WYSIWYG editor in the admin (Online Store > Pages > Frequently Asked Questions -- that editor), and that "show_page_title" is False by default. -- if neither of those conditions are met, your code isnt going to show up. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
BrazenFaced
Excursionist
15 1 10

I spent some time trying a few of those suggestion and I'm still at a loss. it looks like my render code works with my section.setting but not with my section.block code.

 

This is what I have now...

{%- comment -%} FAQ page {%- endcomment -%}

{%- assign show_page_title = section.settings.show_page_title -%}
{%- assign heading = section.settings.title -%}
{%- assign subheading = section.settings.subheading -%}
{%- assign text = section.settings.text -%}



<div data-section-id="{{ section.id }}" data-section-type="faq">
  {%- unless heading == blank and subheading == blank and text == blank and section.blocks.size == 0 -%}
		{%- render 'faq', heading: heading, subheading: subheading, text: text -%}
	{%- endunless -%}
  {% for block in section.blocks %}
  {%- assign html = block.settings.html -%}
	{%- unless html == blank and section.blocks.size == 0  -%}
		{{html}}
	{%- endunless -%}
{%  endfor %}
	{%- if page.content != blank or show_page_title -%}
		<div class="page-template">
			<div class="wrapper wrapper--medium">
            
              	
              
			
				{%- if show_page_title -%}
					<h1 class="page-title text-center">
						{{- page.title -}}
					</h1>
				{%- endif -%}

				{%- if page.content != blank -%}
					<div class="rte">
						{{- page.content -}}                   
					</div>
				{%- endif -%}
			</div>
		</div>
	{%- endif -%}
</div>

{% schema %}
{
	"name": "FAQ",
	"settings": [
		{
			"type": "checkbox",
			"id": "show_page_title",
			"label": "Show page title",
			"default": false
		},
		{
			"type": "text",
			"id": "title",
			"label": "Heading"
		},
		{
			"type": "text",
			"id": "subheading",
			"label": "Subheading"
		},
		{
			"type": "richtext",
			"id": "text",
			"label": "Text"
		}
	],
	"blocks": [
		{
			"name": "Item",
			"type": "item",
			"settings": [
				{
					"type": "text",
					"id": "title",
					"label": "Question",
					"default": "Question"
				},
				{
					"type": "html",
					"id": "html",
					"label": "Answer",
					"default": "<p>Use this answer block to discuss some commonly asked questions you've discovered from your customers interactions. You could discuss product details, size fit, shipping policies, or anything you think would help merchants make an informed decision about your product or collection. This section will appear across all products.</p>"
				}
			]
		}
	]
}
{% endschema %}

 

BrazenFaced_0-1624479398607.png

 

0 Likes
BrazenFaced
Excursionist
15 1 10

Update I'm getting somewhere...

BrazenFaced_0-1624480473112.png

 

 

{%- comment -%} FAQ page {%- endcomment -%}

{%- assign show_page_title = section.settings.show_page_title -%}
{%- assign heading = section.settings.title -%}
{%- assign subheading = section.settings.subheading -%}
{%- assign text = section.settings.text -%}



<div data-section-id="{{ section.id }}" data-section-type="faq">
  {%- unless heading == blank and subheading == blank and text == blank and section.blocks.size == 0 -%}
		{%- render 'faq', heading: heading, subheading: subheading, text: text -%}
	{%- endunless -%}
  {% for block in section.blocks %}
  {%- assign html = block.settings.html -%}
	{%- unless html == blank and section.blocks.size == 0  -%}
		{{html}}
	{%- endunless -%}
{%  endfor %}
	{%- if page.content != blank or show_page_title -%}
		<div class="page-template">
			<div class="wrapper wrapper--medium">
            
              	
              
			
				{%- if show_page_title -%}
					<h1 class="page-title text-center">
						{{- page.title -}}
					</h1>
				{%- endif -%}

				{%- if page.content != blank -%}
					<div class="rte">
						{{- page.content -}}                   
					</div>
				{%- endif -%}
			</div>
		</div>
	{%- endif -%}
</div>

{% schema %}
{
	"name": "FAQ",
	"settings": [
		{
			"type": "checkbox",
			"id": "show_page_title",
			"label": "Show page title",
			"default": false
		},
		{
			"type": "text",
			"id": "title",
			"label": "Heading"
		},
		{
			"type": "text",
			"id": "subheading",
			"label": "Subheading"
		},
		{
			"type": "richtext",
			"id": "text",
			"label": "Text"
		}
	],
	"blocks": [
		{
			"name": "Item",
			"type": "item",
			"settings": [
				{
					"type": "text",
					"id": "title",
					"label": "Question",
					"default": "Question"
				},
				{
					"type": "html",
					"id": "html",
					"label": "Answers",
					"default": "<p>Use this answer block to discuss some commonly asked questions you've discovered from your customers interactions. You could discuss product details, size fit, shipping policies, or anything you think would help merchants make an informed decision about your product or collection. This section will appear across all products.</p>"
				}
			]
		}
	]
}
{% endschema %}

 

0 Likes
BrazenFaced
Excursionist
15 1 10

This is an accepted solution.

I got it! I had to change code in another page that was inheriting code from faq-page.liquid called faq.liquid

Solutions below:

Faq.liquid:

{%- unless heading == blank and subheading == blank and text == blank and section.blocks.size == 0 -%}
	<div class="faq-section">
		{%- unless heading == blank and subheading == blank and text == blank -%}
			<div class="faq__header wrapper wrapper--medium">
				{%- if heading != blank -%}
					<h1 class="faq__heading">{{ heading }}</h1>
				{%- endif -%}

				{%- if subheading != blank -%}
					<h4 class="faq__subheading subheading-text">{{ subheading }}</h4>
				{%- endif -%}

				{%- if text != blank -%}
					<div class="text-content rte">{{ text }}</div>
				{%- endif -%}
			</div>
		{%- endunless -%}

		{%- if section.blocks.size > 0 -%}
			<div class="faq__content">
				<div class="wrapper">
					<ul class="faq__list">
						{%- for block in section.blocks -%}
							{%- assign question = block.settings.title -%}
							{%- assign html = block.settings.html -%}
							{%- unless question == blank -%}
								<li class="faq__item" {{ block.shopify_attributes }} aria-haspopup="true">
									<button class="faq__item-question h2" aria-controls="FAQ-item--{{ question | handle }}-{{ forloop.index0 }}" data-collapsible-trigger>
										{{- question -}}
										{%- render 'icon-plus-minus' -%}
									</button>
									<div class="faq__item-answer-wrapper" id="FAQ-item--{{ question | handle }}-{{ forloop.index0 }}" aria-hidden="true" data-collapsible-container>
										<div class="faq__item-answer rte" data-collapsible-content>
											{{- html -}}
										</div>
									</div>
								</li>
							{%- endunless -%}
						{%- endfor -%}
					</ul>
				</div>
			</div>
		{%- else -%}
			{% comment %} Onboarding items {% endcomment %}
			{%- if is_faq_template -%}
				<div class="faq__content">
					<div class="wrapper">
						<ul class="faq__list">
							{%- for i in (1..3) -%}
								<li class="faq__item" {{ block.shopify_attributes }} aria-haspopup="true">
									<button class="faq__item-question h2" aria-controls="FAQ-item--question-{{ section.id }}-{{ forloop.index0 }}" data-collapsible-trigger>
										{{- 'homepage.onboarding.faq.question' | t -}}
										{%- render 'icon-plus-minus' -%}
									</button>
									<div class="faq__item-answer-wrapper" id="FAQ-item--question-{{ section.id }}-{{ forloop.index0 }}" aria-hidden="true" data-collapsible-container>
										<div class="faq__item-answer rte" data-collapsible-content>
											<p>{{ 'homepage.onboarding.faq.answer' | t }}</p>
										</div>
									</div>
								</li>
							{%- endfor -%}
						</ul>
					</div>
				</div>
			{%- endif -%}
		{%- endif -%}
	</div>
{%- endunless -%}

 

faq-page.liquid:

{%- comment -%} FAQ page {%- endcomment -%}

{%- assign show_page_title = section.settings.show_page_title -%}
{%- assign heading = section.settings.title -%}
{%- assign subheading = section.settings.subheading -%}
{%- assign text = section.settings.text -%}
{%- assign html = block.settings.html -%}


<div data-section-id="{{ section.id }}" data-section-type="faq">
  {%- unless heading == blank and subheading == blank and text == blank and section.blocks.size == 0 and html == blank -%}
		{%- render 'faq', heading: heading, subheading: subheading, text: text, {{html}} -%}
   		
	{%- endunless -%}
 

	{%- if page.content != blank or show_page_title -%}
		<div class="page-template">
			<div class="wrapper wrapper--medium">
            
              	
              
			
				{%- if show_page_title -%}
					<h1 class="page-title text-center">
						{{- page.title -}}
					</h1>
				{%- endif -%}

				{%- if page.content != blank -%}
					<div class="rte">
						{{- page.content -}}                   
					</div>
				{%- endif -%}
			</div>
		</div>
	{%- endif -%}
</div>

{% schema %}
{
	"name": "FAQ",
	"settings": [
		{
			"type": "checkbox",
			"id": "show_page_title",
			"label": "Show page title",
			"default": false
		},
		{
			"type": "text",
			"id": "title",
			"label": "Heading"
		},
		{
			"type": "text",
			"id": "subheading",
			"label": "Subheading"
		},
		{
			"type": "richtext",
			"id": "text",
			"label": "Text"
		}
	],
	"blocks": [
		{
			"name": "Item",
			"type": "item",
			"settings": [
				{
					"type": "text",
					"id": "title",
					"label": "Question",
					"default": "Question"
				},
				{
					"type": "html",
					"id": "html",
					"label": "Answer",
					"default": "<p>Use this answer block to discuss some commonly asked questions you've discovered from your customers interactions. You could discuss product details, size fit, shipping policies, or anything you think would help merchants make an informed decision about your product or collection. This section will appear across all products.</p>"
				}
			]
		}
	]
}
{% endschema %}

 

BrazenFaced_0-1624482439783.png