Questions and Answers Page On Shopify Store ( Venture Theme )

Solved
Highlighted
Tourist
5 0 1

Hi guys!

- Does anyone have any input on how to create a question and answer page like this on Venture Theme? - https://www.heysilkyskin.com/pages/questions-answers

Looking for any input! 

Thank you!

0 Likes
Highlighted

This is an accepted solution.

Hi there,
Jack from OpenThinking here!

Create a new page inside templates/faq.page.liquid

paste following code:

 

 

<style>
.container {
  margin: 0 auto;
  padding: 4rem;
  width: 48rem;
}

.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #03b5d2;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #03b5d2;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #03b5d2;
  border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded='true'] {
  color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: opacity 200ms linear, max-height 200ms linear;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}

</style>

<div class="container">
  <h2>Frequently Asked Questions</h2>
  <div class="accordion">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Why is the moon sometimes out during the day?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Why is the sky blue?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Will we ever discover aliens?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">How much does the Earth weigh?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">How do airplanes stay up?</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
      </div>
    </div>
  </div>
</div>

<script>
	const items = document.querySelectorAll(".accordion button");

function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  
  for (i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}

items.forEach(item => item.addEventListener('click', toggleAccordion));
</script>

 

 

then go in Online Store > Pages > Create Page > FAQ

in page Template suffix select > page.faq

 

If you need this implemented and styled to fit your website contact in PM for prices!

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
1 Like
Highlighted
Tourist
5 0 1

Thank you @OpenThinking you are an absolute legend!

- I'm really sorry to ask this on this thread - it's a bit unrelated, but do you think it's possible to change collection text background to a transparent color or lower the opacity so that the image is more visible?

I'll link what I mean in a form of a picture below:

BorderTransparent.png

 

0 Likes
Highlighted

This is an accepted solution.

Locate the id or class of the elements and use RGBA like so:

#yourID { background: rgba(255,255,255,.65); }

 

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
1 Like
Highlighted
Tourist
5 0 1

@OpenThinking Thank you so much!

One last query for you as I see you are an amazing expert! 

Is it possible to set it as semi-transparent, ( so that letters are still visible and the background is greying transparent? ) not fully using the RGBA number code below?

0 Likes
Highlighted

This is an accepted solution.

@GentMen  can you better explain, please?!

the .65 is the transparency... so you can play with that

0 fully transparent | .5 is half transparent | 1 is not transparent.

so if you need it to be grey you can use black and have the transparency around .5

 

rgba(0,0,0,.5);

 

 

RGBA is the best way to do it, because if you went to use something like this

youID { background: grey; opacity: .5 }

that will affect the whole block included your text.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
1 Like