How do I make my FAQ have coloured buttons?

Store Design
,
1

Hi everyone,

I am currently using the Bullet theme and don’t like how basic the FAQ looks. Looking at brands in entirely different industries I can see these epic layouts that I believe are more engaging and I’d love to replicate that on my site. To give you an example my FAQ looks like this

bullet theme FAQ.PNG
bullet theme FAQ.PNG1881×430 23 KB

Looking at another company I saw their FAQ positioned directly under their product photo’s (which I can’t figure out how to do), and as you can see they have these buttons which look really nice.

DaveyAlcatraz_0-1723011543942.png
DaveyAlcatraz_0-1723011543942.png935×769 232 KB

DaveyAlcatraz_1-1723011569933.png
DaveyAlcatraz_1-1723011569933.png924×767 235 KB

I’ve included one example of how they’re positioned on their product page and one example of how they open. Can someone please help me?

2

Hey @DaveyAlcatraz

Share your Store URL and Password if enabled.

Best Regards,

Moeed

3

@DaveyAlcatraz Hey, thanks for posting here.
can you please share the link to inspect it, thanks.

4

https://alcatrazgear.com/products/gt280-wireless-headphones-touch-control-earbuds-led-display-headset-for-sports-laptop-tv-smart-phones-tablets?pr_prod_strat=e5_desc&pr_rec_id=676b8d623&pr_rec_pid=9663585878337&pr_ref_pid=8721700323649&pr_seq=uniform

5

https://alcatrazgear.com/products/gt280-wireless-headphones-touch-control-earbuds-led-display-headset-for-sports-laptop-tv-smart-phones-tablets?pr_prod_strat=e5_desc&pr_rec_id=676b8d623&pr_rec_pid=9663585878337&pr_ref_pid=8721700323649&pr_seq=uniform

6

@DaveyAlcatraz thanks for response me back, can you please use this style code and put it in a .css file or put it in the head of theme?liquid
code is :

.faq details {
    margin: 0;
    padding: 8px 15px;
    border-radius: 20px;
    background-color: #596534b0;
    transition: ease all 0.8s;
}
.faq details[open] {
    background-color: #8b947257;
}
.faq summary {
    padding: 8px 0;
}

I hope you feel it looks good , thanks

let me know if anything else marks it if your issue is solved .

ProtoMan44_1-1723115396394.png
ProtoMan44_1-1723115396394.png1904×875 211 KB

7

Thanks a bunch that’s a huge help!!!

1 Like
8

@DaveyAlcatraz thanks for accepting my comment.