Shopify Dawn: Make a FAQ into a global section

Technical Q&A
,
1

Hello! I have a FAQ collapsible content on one product collection theme template. I want this FAQ to be the same on all product pages, even if those pages have different collection theme templates. Is this possible? It’ll act similarly to how the website footer does, as in no matter what the product collection theme template is, the footer (FAQ section) stays the same.

I created a loom so you can visually see what I am referring to:

https://www.loom.com/share/8c99e027809f4a2d994ef516971f1ae1?sid=b15a3626-ff24-4916-b282-54cafd86843c

Thank you!

2

@leu_san i believe when you are creating a new template for a particular product you can just add this faq section on there as well.

In my opinion what I know, you can copy the template which has this faq and then add/remove sections on that new template as per your requirement.

Let me know if this makes sense.

Thanks

3

Yes when I create a new template, I can base it off the FAQ one which will automatically add it.

What I want to achieve is, say in the future, I want to update that FAQ, it applies to all pages with it. Otherwise, I’d have to go into each page manually, which would take a decent amount of time.

4

@leu_san I am not sure if shopify allows this global sort of feature. Theres one way only thats coming to my mind is you make changes inside the code of the faq section if its related to styling. This will also take care of the content i believe in a way but only if you have the same faq content inside all the product pages you want it. If you have different content in your faq in different pages then again you will have to manually do it on all of the faq

I hope i was able to explain

Thanks

5

Hello @leu_san ,

Create a new section and call it just before the footer.
For refrence you can follow the existing footer section.
btw while creating the new section use a unique name to it also change the section name in the code you will copy from the existing faq file.

For more you can follow:
https://shopify.dev/docs/storefronts/themes/architecture/sections

https://shopify.dev/changelog/introducing-new-enabled_on-disabled_on-section-schema-attributes-deprecating-templates

Thanks

6

Just add a FAQ section in the footer.

wo_0-1720667368139.png
wo_0-1720667368139.png460×492 24.3 KB

Because it only needs to be visible on the product page. Then add a little CSS

.index-template .faq-section,.page-template .faq-section{display:none;}

The class name depends on the class name of your theme’s section.

7

For future readers, I actually did not exactly do this but this reminded me that I could just add a custom liquid section right above the header.

You can use my code for Dawn theme and just add as many rows as you need:

#faq-container { margin-top: 10px; /* Adjust the top margin as needed */ margin-bottom: 30px; /* Adjust the bottom margin as needed */ max-width: 850px; /* Limit maximum width */ font-family: 'Montserrat', sans-serif; /* Replace with your Shopify theme font */ margin-left: auto; margin-right: auto; }

.collapsible {
background-color: #FFFFFF;
color: black;
cursor: pointer;
padding-top: 20px; /* Adjust padding individually /
padding-right: 18px;
padding-bottom: 18px;
padding-left: 2px;
width: 100%;
border-top: 1px solid #acacac;
border-right: none;
border-bottom: none;
border-left: none;
text-align: left;
font-size: 15px;
position: relative;
transition: background-color 0.3s ease;
font-family: ‘Montserrat’, sans-serif; / Montserrat font for collapsible headers /
font-weight: bold; / Make collapsible headers bold */
}

.collapsible:after {
content: ‘\02795’; /* Unicode character for “plus” sign (+) */
font-size: 13px;
color: black;
float: right;
margin-left: 5px;
}

.active:after {
content: “\2796”; /* Unicode character for “minus” sign (-) */
}

.collapsible:hover {
background-color: #f6f6f6;
font-weight: bold;
text-decoration: underline;
}

.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #ffffff;
}

#faq-container .content p {
text-align: left; /* Ensure text alignment is left /
font-size: 14px; / Adjust font size for the text inside collapsible content /
background-color: #ffffff; / Adjust background color for the text inside collapsible content */
}

h2 {
text-align: center;
margin-top: 20px; /* Adjust the top margin for h2 /
margin-bottom: 30px; / Adjust the bottom margin for h2 /
font-size: 40px; / Adjust the font size for h2 /
font-weight: bold; / Adjust the font weight for h2 */
}

p {
text-align: center;
margin-top: 15px; /* Adjust the top margin for p /
margin-bottom: 30px; / Adjust the bottom margin for p /
font-size: 16px; / Adjust the font size for p */
}

.collapsible:hover .active {
font-weight: normal;
text-decoration: none;
}

@media screen and (max-width: 600px) {
#faq-container {
margin-left: 15px; /* Left margin for mobile view /
margin-right: 15px; / Right margin for mobile view */
}
}

FAQ

Question 1

Insert your content here.

Question 2

Insert your content here.

Question 3

Insert your content here.