Shopify Dawn Theme Testimonials Slider | Dawn Theme Customization
Ғылым және технология
In this Dawn theme testimonials tutorial I will show you how to add a testimonials section slider on the home page of Dawn theme. I will show you how to create a new testimonials section from an existing section so it takes minimal code changes to show testimonials.
Timestamps:
00:00 Intro - Dawn theme 3.0 testimonials slider preview
00:25 Create new testimonials section template file and CSS file
04:46 Modify settings for testimonials
11:00 Code changes to template file
14:36 CSS changes
16:52 More code changes to fix navigation arrow issues on different screen sizes
19:08 CSS change to fix half item slide issue
21:44 Add author setting to testimonials section
25:00 Add quote icon to improve styling
28:26 Final testimonials section slider
29:17 How to address known issue with number of sliders text
30:33 Testimonials slider code cleanup suggestions
docs.google.com/document/d/1l...
Shopify is one of the leading ecommerce platforms for online stores and point of sale systems.
It is easy to use and you can be up and running in no time.
If you have not signed up already go to www.shopify.com to get started.
Пікірлер: 35
Super helpful, your videos have become my favorite shopify tutorials to watch! Would love to see how to make this auto scroll next!
Wow amazing video and instructions.
Thanks for the videos.. It Helped a lot
Thank you, you save me a lot !
@Webmyster
Жыл бұрын
Glad it helped!
great tutorial sir
@Webmyster
Жыл бұрын
Thank you
Excellent tutorial. Thank You. I have one quick question. In the testimonial cards. I need more space (left to right) to fit more text. Is there a way to reduce the left and right margin in each card using css?. Any help is very much appreciated. Thanks again.
Absolutely fantastic tutorial - thank you so much for taking the time to do it! The code was a bit different on my version for some reason, but I did get it working. I had a question: Would it be possible to make the slider auto-slide every 5 seconds? and also would it be possible to change the type of buttons underneath to the dots similar to the debut slider? Would there be a quick & dirty way to do that? Thanks!
@Webmyster
2 жыл бұрын
Thank you! So I'll have to look at that code to see if there is an easy way of achieving it.
@MactacFPV
2 жыл бұрын
@@Webmyster Thanks so much. I'd be happy to pay for it if you'd like to be compensated.
I have Dawn 10.0.0 and many places where the code should be added are not to be found or are now different than in your video. Can you describe this once also for 10.0.0?
Can you give code for the arrows to be on the sides of the testimonials ? and also make the arrows/sliders bigger size
Hey, thanks for your help! I've input the commands exactly put my quote icon isn't changing size. Any idea why that might be?
@Webmyster
Жыл бұрын
Are you still having this issue? You might have missed something.
great walkthrough! the only thing that isn't working for me is that it fits 4 testimonials per line and the 5th goes on the line below instead of hiding and only showing when I use the slider button... do you know what I am doing wrong?
@litlckrets
Жыл бұрын
This is the same problem I'm having. ETA: check out his multicolumn slider tutorial.
Hello! For some reasons I can't get the slider. It seems like the problem starts at the very beginning of the tutorial : My multicolumn.liquido file doesn't have the exact same code as yours. For instance at the very beginning, there is this extra line : {{ 'component-slider.css' | asset_url | stylesheet_tag }}. I also use the theme Dawn, any reason why it wouldn't work in 2023? And is there any chance you uploaded the full code of testimonials.liquido and section-testimonials.css somewhere? Thanks :)
Hi there! I sent you an emaila asking for help regarding the "Invalid JSON in tag 'schema' that shows up when I changed the code for multicolumn. I hope you can help :(
Thanks for this video, how can I change the color of the quotation marks? black doesn't fit my site.
@Webmyster
Жыл бұрын
Hi! try adding this to your CSS code. .icon-quote>path { fill: #ccc; } you can replace the #ccc with whatever color you want to use.
dude, my slider is not working on desktop or mobile. It does not show the 3/3 and you need to scroll for it to move. can you pls check my code for me
Hello. Thanks for the opportunity you give us to create a testimonial like this, it looks amazing but i messed up and destroyed the slider. any advice?
@Webmyster
2 жыл бұрын
HI Rafail, what happened? Did you not backup your theme? if you have a backup, you can create a new copy and start over.
@Rafail500Saketi
2 жыл бұрын
@@Webmysterno i didn't backup my theme because the theme i edited is unpublished, i can go to previous version of every liquid or css. My struggling is there that i need to take of the "swipe_on_mobile" texts from the liquid, to enable it after with another code.
@Webmyster
2 жыл бұрын
@@Rafail500Saketi I don't know what you did in the code so not sure how to give you an advice on how to fix it :-) Can you send me an email on webmyster1@gmail.com with some screenshots and a bit more details and I can try to help you.
I need testimonials with customers pictures. Round pic, rectangle pic
Can I add images to the testimonal section you created?
@Webmyster
Жыл бұрын
Yes but will get a bit more complicated
Can you give a line # to copy and paste the schma do not know where you put it Thank you
@Webmyster
2 жыл бұрын
HI, sorry I did quite a bit of changes to schema, not sure which part are you referring to.
but I have a error on testimonial slider on mobile plz sir can you fix this
@Webmyster
Жыл бұрын
HI! what is the error?
you are genius Boss... Big fan boss, i am brand new boss i need your help 🙏🙏🙏🙏🙏🙏🙏 please help me 🥰🥰
pls reply if you love ur fans. My desktop 1/3 thing is not working but on mobile it is perfectly fine. pls help me @Webmyster