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

  • @oliviamorgan4191
    @oliviamorgan4191 Жыл бұрын

    Super helpful, your videos have become my favorite shopify tutorials to watch! Would love to see how to make this auto scroll next!

  • @mrandroid2191
    @mrandroid21914 ай бұрын

    Wow amazing video and instructions.

  • @ishisplayhouse7419
    @ishisplayhouse7419 Жыл бұрын

    Thanks for the videos.. It Helped a lot

  • @phn0893
    @phn0893 Жыл бұрын

    Thank you, you save me a lot !

  • @Webmyster

    @Webmyster

    Жыл бұрын

    Glad it helped!

  • @user-re7zk9zo6d
    @user-re7zk9zo6d Жыл бұрын

    great tutorial sir

  • @Webmyster

    @Webmyster

    Жыл бұрын

    Thank you

  • @IK-rj7yp
    @IK-rj7yp7 ай бұрын

    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.

  • @MactacFPV
    @MactacFPV2 жыл бұрын

    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

    @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

    @MactacFPV

    2 жыл бұрын

    @@Webmyster Thanks so much. I'd be happy to pay for it if you'd like to be compensated.

  • @massonmobelmanufaktur3392
    @massonmobelmanufaktur3392 Жыл бұрын

    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?

  • @markciantar90
    @markciantar902 жыл бұрын

    Can you give code for the arrows to be on the sides of the testimonials ? and also make the arrows/sliders bigger size

  • @CarltonPwasteman
    @CarltonPwasteman Жыл бұрын

    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

    @Webmyster

    Жыл бұрын

    Are you still having this issue? You might have missed something.

  • @fot9074
    @fot9074 Жыл бұрын

    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

    @litlckrets

    Жыл бұрын

    This is the same problem I'm having. ETA: check out his multicolumn slider tutorial.

  • @antonmoulard
    @antonmoulard Жыл бұрын

    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 :)

  • @innatski
    @innatski Жыл бұрын

    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 :(

  • @jinlonghuang3591
    @jinlonghuang3591 Жыл бұрын

    Thanks for this video, how can I change the color of the quotation marks? black doesn't fit my site.

  • @Webmyster

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

  • @faithandyou79
    @faithandyou796 ай бұрын

    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

  • @Rafail500Saketi
    @Rafail500Saketi2 жыл бұрын

    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

    @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

    @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

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

  • @HydramyBeauty
    @HydramyBeauty Жыл бұрын

    I need testimonials with customers pictures. Round pic, rectangle pic

  • @achyuthroyal9358
    @achyuthroyal9358 Жыл бұрын

    Can I add images to the testimonal section you created?

  • @Webmyster

    @Webmyster

    Жыл бұрын

    Yes but will get a bit more complicated

  • @crochet2cherish4you76
    @crochet2cherish4you762 жыл бұрын

    Can you give a line # to copy and paste the schma do not know where you put it Thank you

  • @Webmyster

    @Webmyster

    2 жыл бұрын

    HI, sorry I did quite a bit of changes to schema, not sure which part are you referring to.

  • @user-re7zk9zo6d
    @user-re7zk9zo6d Жыл бұрын

    but I have a error on testimonial slider on mobile plz sir can you fix this

  • @Webmyster

    @Webmyster

    Жыл бұрын

    HI! what is the error?

  • @psgamelover3000
    @psgamelover30002 жыл бұрын

    you are genius Boss... Big fan boss, i am brand new boss i need your help 🙏🙏🙏🙏🙏🙏🙏 please help me 🥰🥰

  • @faithandyou79
    @faithandyou796 ай бұрын

    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

Келесі