How can I use swiper slider by calling js and css files in liquid?

Store Design
1

Hey there,

I want to use swiper slider in my product page. So I uploaded my css, min.css, js and min.js to assets file. So how can I call out these files to my liquid ?


  

  
  

  
  

    
    {% for image in product.images %}
    
      
      
        
      
    

    {% endfor %}
1 Like
2

Hi @PamDigital ,

You can use Liquid to retrieve the URL of the asset and use HTML script tags in one go:

{{ 'script.js' | asset_url | script_tag }}

The same can be done for CSS assets:

{{ 'shop.css' | asset_url | stylesheet_tag }}

I reference Shopify Liquid Cheat Sheet all the time it’s super helpful. https://www.shopify.ca/partners/shopify-cheat-sheet

Hope this helps and it’s actually what you were looking for.

Sincerely,

Sam - Owner [email removed] Achieve Applabs

1 Like
3

You can use

{{ 'filenamehere.css' | asset_url }}

to output the full path of any file in the assets folder.

2 Likes
4

That worked thanks alot! I have read this at forum but I thought it can’t be that easy. But it was that easy :slightly_smiling_face:

1 Like
5

Hi @PamDigital ,

Thanks for the great comment. Most things can be this easy but we have each other when it gets difficult.

Sincerely,

Sam - Owner [email removed] Achieve Applabs

1 Like