Adding custom HTML to FAQs page

Solved
BrazenFaced
Excursionist
15 1 10

I'm having a bit of trouble adding custom HTML to my FAQs. I managed to add the code but it's not rendering on the website.

 

Could someone please lend me a hand as to what I'm missing in my code.

Below is the UI that doesn't appear to be rendering my html

BrazenFaced_3-1624394820354.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 -%}
{%- assign html = section.settings.html -%}


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

 

bdowling
Pathfinder
80 13 42

Hi, you should be accessing the html setting through the sections blocks (looks like your setting it up to have a block for each Question). 

Right now your code is trying to access the "section.settings.html" which does not exist. You need your code to access the block(s) with something like this:

 

{% for block in section.blocks %}
ACCESS block.settings.html HERE...
{%  endfor %}

 

which then can be accessed through the "block.settings.html" to display how you want.

Good luck. I hope this helps

KetanKumar
Shopify Partner
23180 2336 8580

@BrazenFaced 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
BrazenFaced
Excursionist
15 1 10

The website's URL is shopbrazenfaced.com and the password is Joker

0 Likes
bdowling
Pathfinder
80 13 42

Any feedback on my solution? 

0 Likes
BrazenFaced
Excursionist
15 1 10

It doesn't seem to have worked, maybe I'm not implementing it properly?

BrazenFaced_0-1624466132622.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 html == blank and section.blocks.size == 0 -%}
		{%- render 'faq', heading: heading, subheading: subheading, text: text, html: html -%}
	{%- endunless -%}

	{%- if page.content != blank or show_page_title -%}
		<div class="page-template">
			<div class="wrapper wrapper--medium">
            {% for block in section.blocks %}
              	{%- assign html = block.settings.html -%}
			{%  endfor %}
				{%- if show_page_title -%}
					<h1 class="page-title text-center">
						{{- page.title -}}
					</h1>
				{%- endif -%}

				{%- if page.content != blank or html -%}
					<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
bdowling
Pathfinder
80 13 42

You’re only assigning the HTML setting to a variable. You need to render it too. 


Also, the placement of the for loop probably isn’t right but you’ll see once it starts rendering.

BrazenFaced
Excursionist
15 1 10

I tried this an no results

{%- 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 html == blank and section.blocks.size == 0 -%}
		{%- render 'faq', heading: heading, subheading: subheading, text: text, html: html -%}
	{%- endunless -%}

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

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

{% schema %}
bdowling
Pathfinder
80 13 42

Just render the HTML on its own like this:

{{ html }}

 

It would be helpful if you include the faq snippet file.

BrazenFaced
Excursionist
15 1 10

Still nothing. Am I missing something?

 

{%- 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 html == blank and section.blocks.size == 0 -%}
		{%- render 'faq', heading: heading, subheading: subheading, text: text, html: html -%}
	{%- endunless -%}

	{%- if page.content != blank or show_page_title -%}
		<div class="page-template">
			<div class="wrapper wrapper--medium">
            {% for block in section.blocks %}
              	{%- assign html = block.settings.html -%}
              	{{ html }}
			{%  endfor %}
				{%- if show_page_title -%}
					<h1 class="page-title text-center">
						{{- page.title -}}
					</h1>
				{%- endif -%}

				{%- if page.content != blank or html -%}
					<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-1624469424524.png