第 52 期 两步让你拥有一个更靓的 FAQ Page Shopify 模板
5 min read

第 52 期 两步让你拥有一个更靓的 FAQ Page Shopify 模板

点击这里查看视频演示

创建 Template,并对应修改引用的 Section

page.faq-2022.liquid
{% section 'page-faq-2022-template' %}

创建 Section 并粘贴代码

page-faq-2022-template
<style>

/* Start of LFAQ */

@media screen and (max-width: 768px) {
.LFaq {
margin-top: 7rem;
margin-right: 1rem;
margin-left: 1rem;
}
}

.LFaq__Section {
margin-bottom: 20px;
}

.LFaq__Section ~ .LFaq__Section {
margin-top: 34px;
}

.LFaq__Item {
position: relative;
margin: 14px 0;
}

.LFaq__Icon {
position: absolute;
top: 0;
left: 0;
color: var(--text-color-light);
transition: all 0.3s ease-in-out;
}

.LFaq__Icon svg {
width: 8px;
height: 10px;
vertical-align: baseline;
}

.LFaq__Item[aria-expanded=true] .LFaq__Icon {
transform: rotateZ(90deg);
color: var(--heading-color);
}

/* .LFaq__ItemWrapper {
padding-left: 26px;
} */

/* .LFaq__Question {
display: block;
width: 100%;
margin-bottom: 0;
text-align: left;
} */

/* .LFaq__AnswerWrapper {
height: 0;
overflow: hidden;
visibility: hidden;
transition: height 0.25s ease-in-out, visibility 0s ease-in-out 0.25s;
}

.LFaq__Item[aria-expanded=true] .LFaq__AnswerWrapper {
visibility: visible;
transition: height 0.25s ease-in-out;
} */

/* .LFaq__Answer {
padding: 16px 0 22px 0;
}

.LFaq__Item--lastOfSection .LFaq__Answer {
padding-bottom: 0;
} */

.LFaqSummary {
list-style: none;
margin: 0;
padding: 0;
}

.LFaqSummary__Item {
margin-bottom: 12px;
}

.LFaqSummary__Item.is-active::after {
width: 100%;
}

.LFaqSummary__Link {
display: block;
}

.LFaqSummary__LinkLabel {
position: relative;
display: inline-block;
}

.LFaqSummary__LinkLabel::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 1px;
transform: scale(0, 1);
transform-origin: left center;
background: currentColor;
transition: transform 0.2s linear;
}

.LFaqSummary__Item.is-active .LFaqSummary__LinkLabel::after {
transform: scale(1, 1);
}

@media screen and (min-width: 641px) {
.LFaq__Section {
margin-bottom: 34px;
}

.LFaq__Section ~ .LFaq__Section {
margin-top: 60px;
}
}
.Anchor {
display: block;
position: relative;
top: -75px;
visibility: hidden;
}
.PageContent {
max-width: 1000px;
margin: 35px auto;
}
@media screen and (min-width: 641px) {
.PageContent {
margin-bottom: 80px;
margin-top: 80px;
}
}

.PageContent--narrow {
max-width: 680px;
}

@media screen and (min-width: 641px) {
.PageLayout {
display: flex;
flex-wrap: nowrap;
}
.PageLayout__Section {
flex: 1 0 0;
}

.PageLayout__Section:first-child {
margin-bottom: 0;
}

.PageLayout__Section--secondary {
flex: 1 1 200px;
max-width: 200px;
}

.PageLayout__Section + .PageLayout__Section {
margin-left: 50px;
}
}

.PageLayout__Section:first-child {
margin-bottom: 60px;
}

.PageLayout__Section--sticky {
position: -webkit-sticky;
position: sticky;
top: 75px;
align-self: flex-start;
}
@supports (--css: variables) {
.PageLayout__Section--sticky {
top: calc(var(--header-height) + 20px);
}
}

@media screen and (min-width: 641px) {
.PageLayout {
display: flex;
flex-wrap: nowrap;
}


}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.PageLayout--breakLap {
display: block;
}

.PageLayout--breakLap .PageLayout__Section:first-child {
margin-bottom: 60px;
}

.PageLayout--breakLap .PageLayout__Section + .PageLayout__Section {
margin-left: 0;
width: 100%;
}
}
@media screen and (min-width: 1008px) {
.PageLayout__Section--secondary {
flex-basis: 235px;
max-width: 235px;
}
}
@media screen and (min-width: 1140px) {
.PageLayout__Section + .PageLayout__Section {
margin-left: 80px;
}

.PageLayout__Section--secondary {
flex-basis: 290px;
max-width: 290px;
}
}

@media screen and (max-width: 640px) {
.hidden-phone {
display: none !important;
}
}


.LFaq__Item .LFaq_tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
color: #1C1B1B;

font-weight: 500;
font-size: 18px;
/* background-color: rgb(204, 134, 134); */
}
.LFaq__Item .LFaq_tab-content {
max-height: 0;

font-size: 16px;
overflow: hidden;
transition: all .4s;
padding: 0 1em;
/* background-color: rgb(250, 242, 242); */
}
.LFaq__Item .LFaq_tab-toggle:checked ~ .LFaq_tab-content {
max-height: 1000px;
padding: 1em;
}
.LFaq__Item .LFaq_tab-toggle:checked ~ .LFaq_tab-label::after {
transform: rotate(90deg);
}
.LFaq__Item .LFaq_tab-toggle {
display: none;
}
.LFaq__Item {
border-radius: 8px;
overflow: hidden;
}
.LFaq__Item .LFaq_tab-label::after {
content: '\276F';
transition: all .4s;
}

h1.LFaq__Section.Heading.u-h1 {
padding-left: .5rem;
}

/* End of LFAQ */
</style>
{%- assign has_section_separator = false -%}

{%- for block in section.blocks -%}
{%- if block.type == 'separator' -%}
{%- assign has_section_separator = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- capture LFaq_content -%}
<div class="LFaq">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'separator' -%}
<h1 class="LFaq__Section Heading u-h1" {{ block.shopify_attributes }}>
<span class="Anchor" id="block-{{ block.id }}"></span>
{{- block.settings.title | escape -}}
</h1>

{%- when 'question' -%}
<div class="LFaq__Item {% if section.blocks[forloop.index].type == 'separator' or forloop.last %}LFaq__Item--lastOfSection{% endif %}" aria-expanded="false" {{ block.shopify_attributes }}>
{% comment %}
<span class="LFaq__Icon">{% render 'icon' with 'select-arrow-right' %}</span>
<div class="LFaq__ItemWrapper">
<button class="LFaq__Question">{{ block.settings.title | escape }}</button>

<div class="LFaq__AnswerWrapper" aria-hidden="true">
<div class="LFaq__Answer Rte">
{{ block.settings.answer }}
</div>
</div>
</div>
{% endcomment %}
<div class="LFaq_tab">
<input type="checkbox" id="LFaq_tab{{forloop.index}}" class="LFaq_tab-toggle">
<label for="LFaq_tab{{forloop.index}}" class="LFaq_tab-label">{{ block.settings.title | escape }}</label>
<div class="LFaq_tab-content">{{block.settings.answer}}</div>
</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
{%- endcapture -%}

<section data-section-type="LFaq" data-section-id="{{ section.id }}">
<div class="Container">
<div class="PageContent {% unless has_section_separator %}PageContent--narrow{% endunless %}">
{%- if has_section_separator -%}
<div class="PageLayout">
<div class="PageLayout__Section PageLayout__Section--secondary PageLayout__Section--sticky hidden-phone">
<ol class="LFaqSummary">
{%- assign LFaq_separator_count = 0 -%}

{%- for block in section.blocks -%}
{%- if block.type == 'separator' -%}
<li class="LFaqSummary__Item {% if LFaq_separator_count == 0 %}is-active{% endif %}">
<a href="#block-{{ block.id }}" class="LFaqSummary__Link" data-offset="80">
<span class="LFaqSummary__LinkLabel">{{ block.settings.title | escape }}</span>
</a>
</li>

{%- assign LFaq_separator_count = LFaq_separator_count | plus: 1 -%}
{%- endif -%}
{%- endfor -%}
</ol>
</div>

<div class="PageLayout__Section">
{{- LFaq_content -}}
</div>
</div>
{%- else -%}
{{- LFaq_content -}}
{%- endif -%}
</div>
</div>
</section>

{% schema %}
{
"name": "LFaq",
"settings": [
{
	"type": "header",
    "content": "折叠 FAQ",
    "info": "[使用参考](https://www.shopify2006.com/diy-shopify-faq-page-template/)"
}
],
"blocks": [
{
"type": "separator",
"name": "大项(分类)",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "修改这里"
}
]
},
{
"type": "question",
"name": "FAQ(可排序、添加链接)",
"settings": [
{
"type": "text",
"id": "title",
"label": "Question"
},
{
"type": "richtext",
"id": "answer",
"label": "Answer"
}
]
}
],
"default": {
"blocks": [
{
"type": "separator",
"settings": {
"title": "Shipping"
}
},
{
"type": "question",
"settings": {
"title": "Do you ship overseas?",
"answer": "<p>Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.</p>"
}
},
{
"type": "question",
"settings": {
"title": "How long will it take to get my order?",
"answer": "<p>It depends on where you are. Orders processed here will take 5-7 business days to arrive. Overseas deliveries can take anywhere from 7-16 days. Delivery details will be provided in your confirmation email.</p>"
}
},
{
"type": "question",
"settings": {
"title": "What shipping carriers do you use?",
"answer": "<p>We use all major carriers, and local courier partners. You’ll be asked to select a delivery method during checkout.</p>"
}
},
{
"type": "separator",
"settings": {
"title": "Product"
}
},
{
"type": "question",
"settings": {
"title": "Can I return my product?",
"answer": "<p>We always aim for make sure our customers love our products, but if you do need to return an order, we’re happy to help. Just email us directly and we’ll take you through the process.</p>"
}
},
{
"type": "question",
"settings": {
"title": "Can I get my product personalized?",
"answer": "<p>It depends on the creator and the product. All options are outlined on the product page, so look out for customization options there.</p>"
}
},
{
"type": "separator",
"settings": {
"title": "Other"
}
},
{
"type": "question",
"settings": {
"title": "Any question?",
"answer": "<p>You can contact us through our contact page! We will be happy to assist you.</p>"
}
}
]
}
}
{% endschema %}