How to code an FAQ page from scratch in Shopify

No video

How to code an FAQ page from scratch in Shopify

Рет қаралды 19,691

4 жыл бұрын

In this tutorial, we will develop a cool-looking FAQ Page for our Shopify Site from scratch.
Are you interested in becoming a developer? 👨‍💻 Start here: codingwithjan.com
🔔 Subscribe to Coding with Jan on YT:
www.youtube.co...
🧑‍💻 About our Remote Developer Bootcamp:
In Freemote we teach people how to code and help them land their first developer job or become freelance developers.
We can help if:
You are committed to making a change in your life.
You are currently making less than 6-figures/year and want to get there.
You would like to work remotely and independent of your location.
You are looking for a clear, structured, and proven learning path.
You would like to get personal guidance and direct feedback from mentors.
You would like to join a community of other like-minded people.
You want to be in control of your schedule, work, income, and lifestyle.
Start here ► codingwithjan.com
We’re looking forward to working with you! :-)
📚 Recommended Resources
Here you can find all the code that I wrote for the video:
FAQ HTML:
(This goes into a new page template called page.faq)
bit.ly/2LNiVNA
FAQ CSS
(this goes into your theme.scss)
bit.ly/2pNDYah
🔎 SEO Description:
I will explain how we build and FAQ - Accordion in pure HTML and CSS and you will be able to style it in your own way.
As I try to explain everything in depth I hope you get a good understanding of how the FAQ works.
In part 2 of this video, which will follow very soon we will then even improve our FAQ with Shopify Sections.
We will use them to add settings to Shopify´s live customizer so that the FAQ page can be maintained effortlessly.

Пікірлер: 155

@CodingWithJan 9 ай бұрын

🎯 get personal advice for your developer career. (free for a short time) codingwithjan.com/career-advice

@CodingWithJan 4 жыл бұрын

This tutorial involves more coding than my others yet. Let me know if you can follow up with the pace and the explanation. I hope you enjoy the content and you can find all the code in the Video description. Cheers :-)

@woii9547 4 жыл бұрын

Hello Jan, it is an amazing tutorial and you have done it very well, thanks a lot, I have a question and please let me know if you have an answer for it, I did as your tutorial except in my theme it appears to be full width, not as yours in block view??? thanks again

@mitchellstewart6745 3 жыл бұрын

@@woii9547 I'm having the same issue did you manage to fix this?

@weberjardim6262 3 жыл бұрын

@@mitchellstewart6745 Wich theme are you using?

@SeanScott49 4 жыл бұрын

I own my own e-commerce business and I built everything in Magento. Looking to create another store and building it in Shopify, and so far all of the videos are great. The pacing is good and your explanation of everything and how you do it is probably one of the best I have seen on KZfaq. Thank you for all of the videos. I am trying to watch them all before I dive into the new store.

@CodingWithJan 4 жыл бұрын

Hi Sean, nice to meet you 😀 Really appreciate your fantastic feedback. Love to see that you enjoy the content and that you try to implement these thing on your own. Hope you have a good day :-)

@avahildebrand4353 4 жыл бұрын

JAN THE MAN!!! I am still in awe that this video is available and free - this was an absolute LIFESAVER. My coding experience = extremely basic, no formal teaching. Prior to watching this video, I had never used the visual studio coding programs (which were also free and easy to download) before. I was not able to follow along step-by-step in real-time and paused the video a dozen or so times (sometimes going back just a little) while building the page, which I am sure others do as well. I did not mind this pace, as I was learning along the way as you walk through and explain each step. Now, I feel like a pro, hah! THANK YOU A MILLION TIMES. Seriously, I want to send you a gift basket or something.

@farheenzehra6980 3 жыл бұрын

OH My God, this is awesome... Please make more videos like Footer customization, sections, and blocks...Content and explanation is awsome.. I implement it easily.

@joshtomkinson5345 3 жыл бұрын

Hi Jan, I am literally just going through each of your videos one by one & learning shopify development on the way. Your videos are the most practical walkthroughs of the shopify eco system that i have come across, i have been trying to learn shopify for a few weeks now but couldn't fully figure out the work flow, until now. Thanks for the help Jan!

@elianetoliva6802 4 жыл бұрын

Awesome video Jan, I had some CSS knowledge but couldn't understand liquid and the way it is structured in Shopify that much and your videos provide a lot of help. I was able to implement the faq page for our site. Will keep following the videos for some other cool ideas. Thank you so much!!

@terradan2013 4 жыл бұрын

Man, I am so thankful for you. I have learned so much by watching your videos. You are a great teacher. This code works perfect and it is just what I have spent literally all day looking for! Thank you.

@weberjardim6262 3 жыл бұрын

It help me a lot. I it worked here, amazing video, thank you Jan. I will se the part 2 now!!!

@em_pasin 3 жыл бұрын

Oh man, that's exactly what I needed. Thanks to your tutorial I've made a custom FAQ section with dynamic user input data! You're awesome.

@foxieph6584 4 жыл бұрын

This is my first time to code. Had hard time following the steps as it does not auto populate in my Visual Studio: input[type=checkbox]#tab1.tab-toggle. So I ended up copying the code from the link provided. But overall. It works perfectly. Thank you.

@CodingWithJan 4 жыл бұрын

Hi there. Awesome you tried to follow along with VS code. Sometimes getting the initial setup to work properly is not that easy. If the snippets don't work one could also type everything out. Still great you found your way to making it work :-)

@lauraeverard1686 3 жыл бұрын

I am so excited to have found this video!! I am just starting out with Shopify and learning my around customizations has been tricky!! Thank you so much!! Moving on to part 2 so my client will have an easier time customizing themselves!!

@miroslavpetkov3832 3 жыл бұрын

i just started learning this at school and by far you are the best teacher i have came across Ty for your help

@dondogoberto 3 жыл бұрын

Thanks a lot for your tutorials, they are very easy to follow and straight to the point. Saludos desde Chile

@CodingWithJan 3 жыл бұрын

thank you very much glad to hear 🙂

@urossestovic6259 4 жыл бұрын

You asked for feedback, so here it is :D --> I know that your channel is not about CSS and HTML, but I know many would use a bit more of an explanation on something more advanced like ::after or similar. But you are great, and overall explanations are awesome!

@CodingWithJan 4 жыл бұрын

Hi Uros, seriously I´m super thankful for any kind of feedback that helps to improve the channel. Something more advanced you say.... I´ll find something 😁

@DeanHNZ 3 жыл бұрын

Subscribed - Excellent instruction

@CodingWithJan 3 жыл бұрын

hey thanks glad you like it

@violet-trash 3 жыл бұрын

"Transition: all" is temping because it's so easy, but it's worth specifying the individual transitions for the performance gains you'll get.

@greenmakombeh2151 3 жыл бұрын

the speed was absolutely perfect. I am not a developer and i managed to walk through the steps with the video. it took me 3 hours. I even was able to install the editor and the add-on to the editor. What I though was difficult was the colours - it seemed like magic how to make them appear in the editor. I also had problems with the autofill by the editor. That wa sthe hardes part: the use of teh editor becaue I could not see when to accept the suggestions by the editor. A tutorial on how to use it (wil function specificaly usefu for shopify) would be helpful to me

@adeisaac 4 жыл бұрын

You are legit, this is one area, I have admitedly struggled with.

@slopesjack 4 жыл бұрын

Jan you are legit my man! These videos are so helpful and have also sparked my interest in site development! All the best!

@CodingWithJan 4 жыл бұрын

Hey Jack nice meeting you 😁 Thanks for your fantastic feedback. Also like the video quality and cuts on your upload. Also trying to get to that level at some point 😃

@hishamalhadi 4 жыл бұрын

This is amazing! I learned so many other things in this tutorial as well. Thanks a bunch. Keep making the videos!

@CodingWithJan 4 жыл бұрын

Hi Hisham, I just notced that my response to your comment has never been posted! I´m sorry that I´m only getting back to you now, but I want to let you know that I was really happy when I was reading your feedback and I love that you enjoy the content. Hope you have a good day :-)

@FirozMahamud29 3 жыл бұрын

The link fro "FAQ HTML:" and "FAQ CSS " not working could you please check. Thanks

@jloo9340 4 жыл бұрын

Hi Jan I implemented this together with your Product Description Tabs video and now my FAQ page isn't responding upon clicking on the questions the answers do not appear.

@CodingWithJan 4 жыл бұрын

Hi J Loo, sorry for my late response. You´re absolutely right. There was a collision with the CSS classes. The problem arises, because in both examples I used the CSS class of "tab" Let´s try to fix that: 1. You´d go to your FAQ Markup. -> rename the css class "tab" to "question" -> rename the css class "tab-content" to "answer" 2. After that you adust the CSS for the Faq here you can compare your CSS with a working example: pastebin.com/Fu9wK2zt Hope that helps :-) Let me know if it works

@nengemann8984 4 жыл бұрын

Super understandable - I like it

@aneeshgusain2868 2 жыл бұрын

Well explained! Loved your way of explaining

@JasuanyCampos 4 жыл бұрын

You are so awesome for making this available for everyones use, Thank you so much you are greatly appreciated!

@makenziejackson9702 3 жыл бұрын

Thank you for these clear explanations and walkthroughs! This is really helpful.

@DaniCalero 4 жыл бұрын

Thank you so much for your work, I know this doesn't contribute a lot to you but it's the least I could do. Again, thank you so much for your time, you help a lot with your videos, you deserve way more views.

@CodingWithJan 4 жыл бұрын

Hey Dani, love your fantastic feedback. Means the world. You are super welcome :-)

@wayteyy 4 жыл бұрын

Absolutely fantastic tutorial. Love it and I am going to subscribe to you without hesitation. Thank you.

@CodingWithJan 4 жыл бұрын

Hey Vinnie, what an amazing feedback. Really appreciate that you took the time to write it :-)

@CodingWithJan 4 жыл бұрын

I also saw your comment, that you couldn't find the page template but somehow I can't find the comment anymore. Anyways the template has to exists within the live theme. Maybe you made a theme copy and then it wouldn't show up? You couldn't simply add the file to the live Theme and then develop the full file withing the theme copy. Maybe this will help :-)

@wayteyy 4 жыл бұрын

@@CodingWithJan yeah haha I figured it out, but thanks for clarifying. Great content keep it up

@mahiruddin9543 4 жыл бұрын

Excellent work. plz make one video on products description tabs

@CodingWithJan 4 жыл бұрын

Great idea. I think I can make this within the next 2 weeks. Thank you for the input. :-)

@raebrown1550 3 жыл бұрын

Hi. This works great in the browser but when I put it into shopify, there is a space between the 2 and the bottom has a hard edge instead of rounded. It is also making the font all caps and really ugly.

@akshaykotkar6473 3 жыл бұрын

@Jan bro, thank you so much for this tutorial, it really helps a lot...! :)

@woii9547 4 жыл бұрын

Absolutely amazing work, thanks a lot, I have copied and pasted to my store, but in my store it apears full-width screen, do you have any idea why ?

@woii9547 4 жыл бұрын

hello everyone, I wanted to share with all this matter so maybe someone will encounter the same issue, and I have solved it, I was having an issue regarding the appearance of FAQ the width of the boxes that appear in my website in full width not same as Mr. Jan shows on the site, and I have written comment regarding that, but I got no answer, I think the issue of that behavior is because I am running different theme, so I went through all the code that Mr. Jan has taught us (thanks to him), but I found no clue for my issue, at the end I decided to remove one word from that code which it was on the page.faq.liquid the first line () I just remove the (-indent) and it works for me, hope this is will help anyone who uses a different theme and encounter the same issue. Thanks again to Mr. Jan

@adeelraza2801 4 жыл бұрын

Excellent work.. Keep it up

@CodingWithJan 4 жыл бұрын

Thank you :-)

@arnoldkonopa1196 4 жыл бұрын

I appreciate this video so much! Thank you Jan!

@fammorf 4 жыл бұрын

I did this and it looks reallly nice I like it. But there is one problem. If the question is multiple lines long (mostly in mobile because the screen isnt as wide) the arrow that rotates just goes further to the right when i open the question, and at 3 lines it goes out of the box becoming invisible. Is there any I can change in the HTML to prevent that from happening? Thanks!

@unexpectedteachers6140 4 жыл бұрын

Thank you for putting up quality content, Jan. I've been looking towards such great content from a long time now and hopefully found your channel. By the way, I'm having trouble with _.tab-toggle:checked = .tab-content_ , it isn't making the text appear back again.

@CodingWithJan 4 жыл бұрын

Hey Shivam, thank you for the great feedback 😊 Try to use the tilde character ~ instead of the equal sign = This should do the trick. Let me know if it works :-)

@CodingWithJan 4 жыл бұрын

@Owl Out Marketing thank you for your feedback. Would you might sharing the shop url? You can also share it privately on Instagram. Its @coding_with_jan Than I will have a look at your theme :-)

@CodingWithJan 4 жыл бұрын

Here I uploaded the HTML and CSS that I wrote during the tutorial. Maybe you can use this to get it working :-) pastebin.com/9dcjbNLU pastebin.com/2heXkDrj

@jinkalbarevadiya5742 4 жыл бұрын

Thank you so much! For helping, I have subscribe your channel. You are really great.

@paulalopezmascarin2739 3 жыл бұрын

Oh my god!!!! you are amazing

@stormn3464 4 жыл бұрын

Thanks a bunch, this is really thorough and well explained!!

@TheRestfulmist 4 жыл бұрын

Thank you so much! Very easy to watch and follow this tutorial. Definitely subscribing

@CodingWithJan 4 жыл бұрын

Glad you liked it! Thank your for your positive feedback :-)

@woii9547 4 жыл бұрын

@clearwavepro100 4 жыл бұрын

This was more complicated, but fun I learned a lot. thanks!

@nielsk9587 4 жыл бұрын

Hello, first of all I want to thank you for this tutorial it was really great! I have a problem however. I have copied all the code which is exactly the same as yours (except for the colours) into shopify, but there remains a little white stroke in between the questions. When I look at the live preview thingy, those white strokes do not appear in between the questions, what is the problem? and how can I solve this? As for the feedback: I would like you to explain a bit more in depth what each section in the HTML code actually does. For example everything between the ...

@CodingWithJan 4 жыл бұрын

Hey, thank you for the nice feedback :-) So the white stroke only appears in the actual front end but not when you see the frontend in the live customizer? Maybe in Chrome Browser you can rightlick and inspect the element and once you click on the html markup for this element you might find some margin that is applied to the faq element. You would see that in the CSS section on the right side of the developer tools. Otherwise you can send me a screenshot on Instagram so I could see the strokes. Hope that helps :-)

@nielsk9587 4 жыл бұрын

Thank you for your reaction! What is your IG?

@CodingWithJan 4 жыл бұрын

It's @coding_with_jan just created it so that someone could send me a screenshot and I didn't upload anything yet. But I hope you can find it 😃

@clementeen 2 жыл бұрын

Jan this worked perfectly in the themes for 1.0, however with the new shopify 2.0 and the Dawn theme, the files in the Templates section are JSON and not liquid files. Can you possibly do an update tutorial how to make this same FAQ page in the Dawn theme 2.0? Thank you so much

@CodingWithJan 2 жыл бұрын

Comparing the new JSON templates with the old ones today 12:45 CET :-)

@clementeen 2 жыл бұрын

@@CodingWithJan 🙌🏼 thanks Jan

@wishpools553 2 жыл бұрын

@@CodingWithJan Hi Jan, is any results for the Dawn 2.0 comparison?

@muskangarg4961 4 жыл бұрын

Thanks for video. I was about to build the page and this helped a lot!

@CodingWithJan 4 жыл бұрын

Awesome :-)

@Ross-jl5qq 3 жыл бұрын

Great video Jan! Do you know how I could break the question list into headings e.g. General, Products etc.?

@atulgavali4249 4 жыл бұрын

Very simple way of explaining. Liked it. Please make video on this as early as possible. Also I have one question. I am creating coupons in Shopify for particular user but I want only latest (last created) coupon as active(valid)

@CodingWithJan 4 жыл бұрын

Hey Atul, thank you for the feedback. Part 2 is Comming tommorow already :-) For the coupon problem I would suggest that you simply deactivate the old coupon once you create the new one. Wouldn't that work?

@atulgavali4249 4 жыл бұрын

@@CodingWithJan Thank you for prompt reply. Actually I am creating one Shopify app in that creating coupons through Shopify API to deduct amount from cart. Creating app for loyalty program. So provided one text box on checkout page to enter the amount which will be less than or equal to available loyal amount. After entering amount user will click on apply button and then coupon will get created and get applied.

@atulgavali4249 4 жыл бұрын

@@CodingWithJan I want that because, suppose one of user creates multiple coupon and copied some where then he will use letter. Because coupon get created when user clicks on custom apply button but amount get deducted from my loyalty after placing the order

@CodingWithJan 4 жыл бұрын

@@atulgavali4249 Really sorry I don´t have an answer to your problem at hand. I would need to do some research and testing as well. Maybe you can make a nice post on the Shopify forum as a starting point? Usually they will be helpful whenever they can :-)

@ruth306 4 жыл бұрын

Thanks so much, this was just what I was looking for!

@shaheeddavids5863 4 жыл бұрын

Would it be possible for you to do a similar video to this one using themekit?

@CodingWithJan 4 жыл бұрын

Absolutely, I think Tabs for the product description could be a good example for this :-)

@Martin5213 4 жыл бұрын

I’m not sure what went wrong at the last part where I add more questions but when I look at it when they are closed it’s showing the text under the questions. When I open them they are fine.. pleased could you help me!

@CodingWithJan 4 жыл бұрын

You'd need to copy the markup for one single question without breaking the container. If you'd like you could watch the video where we improve the faq with shopify sections. Then you would be able to add more questions via the theme customizer :-)

@luayalfarino4363 4 жыл бұрын

Hey Jan, great vids! Just wanted to ask if you know a quick fix to overcome home image being cropped when viewed on a mobile device? I guess something to do with CSS but not sure.

@charlyludwig69 3 жыл бұрын

my theme doesn't show a "theme scss" in the assets folder :/ how can i still add the accordion type FAQ to my page ? thanks heaps for your videos! been super helpful

@damionwright9605 4 жыл бұрын

Awesome tutorial very detailed ive learned a lot from this video thank you

@CodingWithJan 4 жыл бұрын

Super welcome Damion :-)

@waqarii 4 жыл бұрын

WOW! Doing A GREATE TUTORIAL 😍😘👍😘👍

@rickjohnston5069 3 жыл бұрын

This is amazing, implemented it with great ease! Thank you!!! There's only one small issue I can't seem to figure out. The border-radius for .faq isn't showing for some reason. I tried adding !important; to it but still, won't show. I've been troubleshooting with a team member and we can't figure it out... any ideas? Thanks :D

@shiktoahmed5746 4 жыл бұрын

Very helpful👌. Thanks Jan.

@CodingWithJan 4 жыл бұрын

Super welcome :-) Awesome you like it

@techtopianews 4 жыл бұрын

Nice explanation

@paulflake8580 3 жыл бұрын

Hello, i got a problem with the code... the tab- content is not shown on the faq page.... But i copy your code and it works in the live server.... i don't know what to do now... I hope you can help me! Greets, Paul from Germany

@jihanekhebouiz5954 4 жыл бұрын

Very helpful, learned a lot! Thank you

@CodingWithJan 4 жыл бұрын

Super welcome :-)

@RCManiacPHCB13 4 жыл бұрын

Awesome video! I have zero experience when it comes to coding but am not afraid to learn new stuff :) Your tutorial broke it down very simply for someone with no experience. I am looking to add a FAQ drop down section on my homepage rather than directing my customers to a new page. Would that be possible?

@CodingWithJan 4 жыл бұрын

Hey, thank you for the great feedback :-) Adding the faq questions to your homepage is absolutely possible. First you'd need to implement this FAQ with Shopify sections. (I also have a video on that.) In the schema tag of that section you would then need to define so called "presets". After you define these, the section will appear in your theme's live customizer. Hope that helps :-)

@RCManiacPHCB13 4 жыл бұрын

Awesome! I appreciate the quick reply! I’ll check out your other vid and give it a try for sure! Just to be clear, if I follow your part 2 tutorial for this, the new section should appear on my homepage editor? If so, what would I define the schema as?

@CodingWithJan 4 жыл бұрын

Very welcome 😄 Here is the video kzfaq.info/get/bejne/f7CSpsSjzL3VlaM.html When you're done with that you would need to add the presets to your schema tag. An example could be found here gist.github.com/shopifypartners/74bca74a90e286e5614f1b39f9ae4791#file-how-to-create-your-first-theme-section-call-to-action-liquid Hope that helps :-)

@RCManiacPHCB13 4 жыл бұрын

@@CodingWithJan Thanks! Any chance you would be interested in doing it for me and sharing your screen on Skype for some compensation? Lol

@CodingWithJan 4 жыл бұрын

@@RCManiacPHCB13 these days I´m don´t do an freelancing as I working for an agency. The Task itself is not too complicated though. It will be quite easy to find a freelancer on fiverr or storetasker to get the Job done. If you like, you could share your email on Instagram (@coding_with_jan) and I would help you to get in touch with a freelancer :-)

@fammorf 4 жыл бұрын

Is there any way to implement this into the product pages? I want my product page to be like on Zalando, in which you can click on shipping to have a text drop down, then on materials, size charts etc.

@m.s.aprameya5157 3 жыл бұрын

Hey, very informative. I've tried the exact same on my shopify website but it doesn't seem to work like as showed in the video. Can you or anyone please help?

@allisontom3157 4 жыл бұрын

Hey Jan (: great video! I added the faq to my site and it looks great on desktop but on mobile sections of the answers are cut off and aren’t showing. How do I fix it so that it does not cut off portions of my answers? (Answers to a few of my faq questions that are being cut off are kind of long)

@thei3omber 2 жыл бұрын

Hey Jan, got any updates for this regarding the Shopify 2.0 (Dawn) theme? Thank you!

@CodingWithJan 2 жыл бұрын

Hey, :-) This process is nearly the same, just instead of copying the code to page.faq: You will have to create a new section called faq and link it the JSON page. If that sounds like giberish to you 😅, I advice to get in touch with a developer we can help you with that if you don't know any : codingwithjan.com/developers Have an awesome day!

@imanra7691 2 жыл бұрын

Do you know how to organize questions by categorise faq ?

@harrycheap7524 4 жыл бұрын

Thank you man you very help me big LIKE for you thank you so much !

@CodingWithJan 4 жыл бұрын

Super welcome Harry :-)

@SGDCTVDUBAI 3 жыл бұрын

Awesome!

@Scentile 3 жыл бұрын

I did everything and it shows up correctly, although it doesn't appear in my "Customize" Section?? Please help

@Sidneylin1991 4 жыл бұрын

Hey Jan, great video, I really like it! When I implement the code, I noticed, somehow, my tab content doesn't appear when I click the tab. After some experiment, I added one line in the "tab-content" CSS, "display:block". Then everything works fine. I checked every line but I still can't figure out why in your original code, without the "display" order, everything works as expected, but in my case, I need a display order to show the tab content. Maybe this is something you can double check in the code logic?

@byroncabading3820 4 жыл бұрын

I encountered the same. Issue. Glad i bumped into your comment. thanks a lot!

@Sidneylin1991 4 жыл бұрын

@@byroncabading3820 No problem, glad it helps you!

@anitmodak6467 4 жыл бұрын

If you can show, how to create a multi-language online stores that will be helpful for us

@CodingWithJan 4 жыл бұрын

Hey Anit, maybe that´s something I´ll show in the future. What I´d recommend is using an App. Weglot is a good one for that. :-)

@garethmartinson2593 3 жыл бұрын

hi. i have followed your guide step by step and for some reason when i click a question, it does not drop down and give the answer. everything else works perfectly.... except giving the answer. do you have any idea why this might be happening? id really appreciate your help.

@cbohaty 3 жыл бұрын

I'm having the same issue. Have you found a solution yet? When the div "tabs" are added directly to the page, they are working. When they are added via a section, the :checked status doesn't seem to work (all other css styles beyond the :checked appear correct). EDIT: I was having the same issue, but I was able to fix the issue by re-entering the forloop used in the second part of this tutorial.

@divyanshugupta7195 4 жыл бұрын

Please make more vedios we really need this create a scratch webstore

@joaoleandro3361 4 жыл бұрын

Really Good Tutorial

@redhasalhi4986 3 жыл бұрын

Great job ! would like to ask you some questions to improve my store if you don't mind :)

@erics2860 3 жыл бұрын

Then pay up begger.

@s3rgitu525 4 жыл бұрын

You are my hero! Thank you very much

@CodingWithJan 4 жыл бұрын

Very welcome :-)

@Wae_Montero 4 жыл бұрын

Hi Jan, you have no idea how your tutorial helped me customize my theme, thanks for this very informative tutorial!! I did this coding before in a different theme and it worked, however with my Narrative theme it did not and I’ve double checked the codings, redid all the steps but it shows blank. Can you help me? Where do I need to put the codings? Thanks Jan, appreciate it.

@Wae_Montero 4 жыл бұрын

Okay, I think I found a way. I pasted all the codes in the content box in html coding. And then the checkbox appeared and I can’t seem to get it out, so I searched and put display:none , visibility:hidden , opacity:0 under the .tab-toggle . And everything looks good.

@CodingWithJan 4 жыл бұрын

Hey, nice meeting you and thanks for the nice feedback. Awesome you already found a solution that works for you. Problems that solve themselves are my favorites. Cheers :-)

@tinaka5433 3 жыл бұрын

anyone else having problems with the .tab-content ? i wrote it exactly like him but mine is not showing yellow or changing when i try to hide it like he did. so annoying :(

@CodingWithJan 3 жыл бұрын

Hey Tina, have you also implemented the product description tabs from my other video? If so, you could rename the "tab-content" in your faq to "answer". The reason is, we used the same css class in our description tabs and therefore they collide. Respectively you'd also need to adjust the CSS for the faq. Hope this already helps :-)

@davidetreghini6743 4 жыл бұрын

Hi Jan. Your videos are amazing. I've got an issue with the faq page because it doesn't show the answers to my questions. How is it possible?

@davidetreghini6743 4 жыл бұрын

I saw the comment below and I fixed it. Thank you for your video. Have you ever mind to make a video about footer?

@yousseftazit8477 3 жыл бұрын

Thank You So much Bro

@CodingWithJan 3 жыл бұрын

you are welcome.

@ramizejubovic6850 4 жыл бұрын

Hallo Jan, ich habe die FAQ Page von dir erstellt wie in deinen beiden Videos. Es hat auch super funktioniert aber jetzt seit den Weihnachtstagen öffnen sich die Antworten nicht mehr. Das heisst der kleine Pfeil rotiert um 90 Grad aber es öffnet sich nicht der Antwortenbereich. Hast du eine Idee was da sein kann?

@CodingWithJan 4 жыл бұрын

Hey Ramiz, hast du zufällig auch die Tabs für die Produkt Beschreibungen implementiert? Da gibt es ggfs einen Konflikt mit den CSS Klassen. Ist aber relativ einfach zu beheben. :-)

@ramizejubovic6850 4 жыл бұрын

@@CodingWithJan Hey Jan, danke man ich habe es lösen können. Du hattest recht es gab einen CSS Konflikt mit den Product Tabs und der FAQ Page.

@CodingWithJan 4 жыл бұрын

@@ramizejubovic6850 stark 😃 Ich hoffe jetzt kappt beides und du hast nicht die Tabs wieder ausbauen müssen. Sonst helfe ich da gerne nochmal :-)

@xeeworker1232 3 жыл бұрын

Having trouble setting up shipping rates, discounts, setting up payment gateways and installing plugins. Hire us today, and we're going to do it for you. xeecreatives.com

@abdullahsaleh8902 3 жыл бұрын

Hey. I have one question how can I center text on the label? Thank you soo much for this awesome tutorial.! you just saved me a little cost purchasing an app to do that for me. and I just did it myself. although the app is really good and I will purchase it eventually it's called .

@iordannikolov1373 4 жыл бұрын

Hey ,wonderful video once again ! Really helpful and i was able to complete it successfully! Is there a way to add a little bit spacing below every question tab? The thing is that i want to implement these same bars into my product page to show with dropdownmenu "description"/"shipping etc etc but i am trying to copy it but nothing happens Could you help/or create a video about it ?

@CodingWithJan 4 жыл бұрын

Awesome you got this to work 😃 Regarding the spacing you can try to add a CSS Property of for example margin-right:10px; or padding-right:10px; To the tabs :-) The second question I didn't quiete get. Could you explain? 😃

@iordannikolov1373 4 жыл бұрын

@@CodingWithJan yes sorry I've formed the sentence very weird 😅🤦‍♂️ I mean to use the same tabs as these for FAQ for the product page as tabs for descriptions and so on

@CodingWithJan 4 жыл бұрын

@@iordannikolov1373 oh yes, that would definitely work 😃 I know of an existing challenge though. If you implemented the product description tabs and the faq tabs there is a conflict in the CSS classes. Some people wouldn't be able to open the faq tabs when both are implemented within a theme. Luckily this can be resoveld 😃 Did you include both?

@iordannikolov1373 4 жыл бұрын

@@CodingWithJan I`ve also watched your video about Product Description Tabs and tried to mix both but in the end, it became a real mess and the easiest way to fix everything was to delete the whole Copy Theme! Definitely not successful , anyway i don`t really want to take more of your time

@iordannikolov1373 4 жыл бұрын

@@CodingWithJan yes i did include both and everything just disappeared unfortunately

@mesalesme7501 3 жыл бұрын

when I copied them one on top of the other they lose the border-radius on the adjoining tab

@mesalesme7501 3 жыл бұрын

and then when I transposed it all to shopify it lost all border-radius

@manuelsilva4931 3 жыл бұрын

How to keep the first tab checked on the page by default?

@manuelsilva4931 3 жыл бұрын

for the one that wants to know it.

@erichson_dutra 3 жыл бұрын

Congratulations on the video, your explanations and content are great! I tried to do everything in the DEBUTIFY theme and I couldn't, someone can help me! Abç - Brazil