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

Solved
gthegreat
Shopify Partner
31 1 4

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)

Accepted Solutions
JohnFromJotting
Shopify Partner
665 94 129

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 40 (40)
JohnFromJotting
Shopify Partner
665 94 129

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
31 1 4

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

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
31 1 4

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

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
31 1 4

@JohnFromJotting 

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

JohnFromJotting
Shopify Partner
665 94 129

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
31 1 4

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

JohnFromJotting
Shopify Partner
665 94 129

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
31 1 4

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

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
31 1 4

@JohnFromJotting 

Okay thank you so much

JohnFromJotting
Shopify Partner
665 94 129

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
31 1 4
San21
Shopify Partner
44 0 14

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

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
44 0 14

Yes please send me a request.

https://cbdskincarehk.myshopify.com/

Thank you,

 

San21
Shopify Partner
44 0 14

If you need to contact me

ecozen88@gmail.com

JohnFromJotting
Shopify Partner
665 94 129

@San21Sent.

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


To hire me, visit my Upwork profile