Skip to content

两步让你拥有一个更靓的 FAQ Page 模板

第一步:创建 Template,并对应修改引用的 Section

page.faq-lfei.liquid

{% section 'page-faq-lfei-template' %}

第二步:创建 Section 并粘贴代码

<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": [],
"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 %}

上一篇文稿 20210519 更新样式: Shopify Back to the top 点击返回到顶部按钮
下一篇文稿 适用于任何主题的 <信任徽章> Trust Badge