Solved

How do I make a slideshow section for dawn2.0?

gthegreat
Shopify Partner
60 1 13

Here is my attempt but it won't upload....any tips are greatly appreciated.

{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.min.js' | asset_url | script_tag }}

<!-- Slider main container -->
<div class="swiper">
    <div class="swiper-wrapper">
        {%- if section.settings.image != blank -%}
            <img srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%} {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%} {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%} {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%} {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%} {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}" src="{{ section.settings.image | img_url: '1500x' }}" sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)" alt="{{ section.settings.image.alt | escape }}" loading="lazy">
        {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
        <!-- Slides -->
        {% for block in section.blocks %}
  {% case block.type %}
    {% when 'slide' %}
      <div class="swiper-slide" {{ block.shopify_attributes }}>
        {{ block.settings.image | img_url }}
      </div>
  {% endcase %}
{% endfor %}

      I have a schema and all of that good stuff but nothing is wrong in it.
 
 
Accepted Solution (1)
JohnFromJotting
Shopify Partner
665 94 132

This is an accepted solution.

Blog done, check it out 🙂 https://www.bluish.io/shopify/how-to-create-a-slideshow-on-shopfiy

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

View solution in original post

Replies 41 (41)

JohnFromJotting
Shopify Partner
665 94 132

Hi @gthegreat 

Created a slider using flickity :), you can checkout my blog, this works on any theme.

https://www.bluish.io/shopify/shopify-product-slider

obviously if you want to change the contents, you can code it. You can also click on my example shopify store which has the example slider.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting 

HI thank you for your advice& time however do you know how to make an image slideshow? (similar to the one that is on the debut theme and supply theme)

I already made one a product slider

ps your blog is really cool

😕

JohnFromJotting
Shopify Partner
665 94 132

Hi @gthegreat,

 

Do you mean the thumbnail slider? Can you point me to the correct element 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting 

' Yes a thumbnail slider I attached an example from the supply theme below

gthegreat_0-1633404786300.png

thank you for your help

 

 

JohnFromJotting
Shopify Partner
665 94 132

Oh you mean a slideshow for the homepage?

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting 

oh my bad yes I meant a slideshow for the home page 🙂

JohnFromJotting
Shopify Partner
665 94 132

Hi @gthegreat 

Might take some time, but If you give me a day, ill make a blog for it. Personally I've tried both flickity and swiper. I find flickity much better.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting thank you so much,may your business forever prosper 🙂

JohnFromJotting
Shopify Partner
665 94 132

Hi @gthegreat 

Sorry been busy, checkout what I've created so far, anything you want me to add?

Link to slideshow

The below is the current customizations I've created, I'll create the blog tomorrow with all the things you need to do to create it.

Bluish_0-1633524787239.png

Bluish_1-1633524800335.png

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting 

Hey, this looks great! Do you mind adding an auto slide option and a fade effect? If those two effects arent available through flickity then don't worry about it. 

Thank you and I look forward to the blog post:) 

I appreciate your help.

 

 

JohnFromJotting
Shopify Partner
665 94 132

Hi @gthegreat 

It currently does have autoplay, but it stops if you hover over it, I'll add a setting to auto-play even if hovered. What you currently see is fade effect, but what ill do is add another setting to turn it off.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting 

Okay thank you so much

JohnFromJotting
Shopify Partner
665 94 132

This is an accepted solution.

Blog done, check it out 🙂 https://www.bluish.io/shopify/how-to-create-a-slideshow-on-shopfiy

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

gthegreat
Shopify Partner
60 1 13

@JohnFromJotting 

thank you 

San21
Shopify Partner
47 0 15

@Bluish , I did everything from your blog post, But your css is with Debut theme, so I added mine in base.css for Dawn.

With Dawn, no text and button in the middle of image. (just a line under the image), Also the image (Carousel is very big), I tried to change the height without success.

Is it possible to update your blog post for Dawn theme also?  Another question do I need a licence to use flickity or is it open source?

Thank you.

If you want to check my shop with the slideshow

https://cbdskincarehk.myshopify.com

PW: fleude

JohnFromJotting
Shopify Partner
665 94 132

Hi @San21 

Mind giving me access so I can check it out, I think there may be some conflict with classes.

For me i just tried my code into dawn and works fine

preview of dawn theme below.

https://n2g50zghdx3e9et3-59166949547.shopifypreview.com

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

San21
Shopify Partner
47 0 15

Yes please send me a request.

https://cbdskincarehk.myshopify.com/

Thank you,

 

San21
Shopify Partner
47 0 15

If you need to contact me

ecozen88@gmail.com

JohnFromJotting
Shopify Partner
665 94 132

@San21Sent.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

JohnFromJotting
Shopify Partner
665 94 132
Hi @San21,
 
Fixed your issue, the code was working fine, there is an issue with your base.css theme, it wasn't getting all the classes for some reason.
 
To solve the issue I created a seperate css class called flickity-slideshow.css and included it in your theme.liquid. This should be easier for you. I will update the blog aswell so no one else experiences this issue.
 
ALSO please fix your logo, there is so much white space causing the header to be enormously big.
Bluish_1-1633996247691.png
 
If there is any other further functionality you want me to add please let me know.
 
 

 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

San21
Shopify Partner
47 0 15

@JohnFromJotting Thank you so much

made4Uo
Shopify Partner
3804 713 1124

Hi, 

Just want to share this slideshow with multiple designs and work with Debut and Dawn theme. Video shows the previous buttons but I update the buttons to show below. No need for app or external library. No coding experience needed

slide.jpg

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
SDBdigital
Shopify Partner
67 0 16

Hi

I tried this. Thank you.

However, the text and buttons appear below the image. See attached.

 

Store URL: spitfire-furniture.myshopify.com

password: aluminium

Screenshot 2021-10-21 at 09.37.35.png

JohnFromJotting
Shopify Partner
665 94 132

Hi @SDBdigital 

I created one for flickity, and keep it updated. You can find it here https://www.bluish.io/shopify/how-to-create-a-slideshow-on-shopfiy. Works on any theme.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

SDBdigital
Shopify Partner
67 0 16

Hi

I did try your slideshow - but couldn't figure out how to make the text larger - or to style the buttons.

 

 

JohnFromJotting
Shopify Partner
665 94 132

Hey @SDBdigital 

 

I'll add functionality to change text size, what do you mean by style button? Currently you are able to change the border and inner background 

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

j1419
Shopify Partner
49 2 17

@JohnFromJotting Your slideshow has worked great for me. Would it be possible to add an image position function as well? Top, middle, bottom, center, right, etc

JohnFromJotting
Shopify Partner
665 94 132

Hi @j1419,

Do you mean the text and buttons etc? The ability to be able to move it top, middle or bottom | left, center or right?

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

j1419
Shopify Partner
49 2 17

Hi @JohnFromJotting, here is an example of what I mean for the image position changer

Screenshot (18).png


@JohnFromJotting wrote:

Hi @j1419,

Do you mean the text and buttons etc? The ability to be able to move it top, middle or bottom | left, center or right?


 

JohnFromJotting
Shopify Partner
665 94 132

Hi @j1419, not familiar with what this option does, can you let me know which theme has this?

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

j1419
Shopify Partner
49 2 17

Hi @JohnFromJotting, I've seen this function in the Debut theme

Maxim90
Excursionist
24 0 6

@JohnFromJotting Ho inserito il tuo codice, ma a me non funziona. Rimane tutto bianco.

made4Uo
Shopify Partner
3804 713 1124

Hi everyone,

I just updated the code and added a full-width option. Slideshow works great on most of shopify theme, including Dawn. Add a slideshow with multiple designs. No app or subscription needed. See link here 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
SDBdigital
Shopify Partner
67 0 16

Hi

Thanks for the update.

However it messes with the page.

My sections below the slideshow appear on top of it. See below
I've had to revert to the earlier custom.slideshow.liquid code you provided.

Screenshot 2021-11-08 at 16.38.36.png

JohnFromJotting
Shopify Partner
665 94 132

Hi @Maxim90 

You may have done something wrong, I suggest you repeat the steps.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

Maxim90
Excursionist
24 0 6

@JohnFromJotting Ho seguito i passi scritti come sono stati scritti sul blog 3 volte. La sezione esiste, ma lo spazio occupato dalla slideshow è bianco. Nel caso si possono aggiungere più di due foto alla slideshow? GrazieSchermata-2021-11-08-alle-11.38.07.jpg

JohnFromJotting
Shopify Partner
665 94 132

Hi @Maxim90 

Can you provide me access to your store to check. john@bluish.com.au

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

made4Uo
Shopify Partner
3804 713 1124

Hi @SDBdigital ,

I just fix the code

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
SDBdigital
Shopify Partner
67 0 16

Hi

 

I updated the code from your site. Thank you.

URL: https://spitfire-furniture.myshopify.com/

password: aluminium

 

 

Ozcorp_Web
Shopify Partner
12 0 1

Just here to say this works like a charm, you are a dam genius!

Jetlag_Mode
Tourist
13 0 1

Hello John,

I came across this comment and it is exactly what I am looking for but I wasn't able to find your blog or the solution.... can you help me with this please?...regards!