Shopify Dawn: Make a FAQ into a global section

Solved

Shopify Dawn: Make a FAQ into a global section

leu_san
New Member
7 0 0

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!

Accepted Solution (1)

wo
Shopify Partner
116 26 22

This is an accepted solution.

Just add a FAQ section in the footer.

wo_0-1720667368139.png

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.

 

 

View solution in original post

Replies 6 (6)

Shadab_dev
Shopify Partner
159 5 18

@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

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks
leu_san
New Member
7 0 0

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.

Shadab_dev
Shopify Partner
159 5 18

@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 

If this is helpful, please Like and Accept the solution.
Buy me Coffee, if you feel i was helpful. Definitely a motivation to carry out gutting solutions. Need help with shopify liquid or any project in web dev- Feel free to Email Me

Thanks

Guleria
Shopify Partner
3155 616 883

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-depre...

 

Thanks 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder

wo
Shopify Partner
116 26 22

This is an accepted solution.

Just add a FAQ section in the footer.

wo_0-1720667368139.png

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.

 

 

leu_san
New Member
7 0 0

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:

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#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 */
}
}
</style>
</head>
<body>

<div id="faq-container">

<h2>FAQ</h2>

<button class="collapsible">Question 1</button>
<div class="content">
<p>Insert your content here.</p>
</div>

<button class="collapsible">Question 2</button>
<div class="content">
<p>Insert your content here.</p>
</div>

<button class="collapsible">Question 3</button>
<div class="content">
<p>Insert your content here.</p>
</div>

</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>

</body>
</html>