Help With CSS and Javascript for Shopify Theme

[dayzia122]

l'm trying to add external CSS and Javascript to my website but I'm not sure how to. I'm not the most advanced with code so I've tried doing research but I'm still stuck. I have a Shopify theme, has anyone had any experience with this?

Like i said i'm not familiar with code so even when I write it I don't think it's right because once I put it back into the seo checker it stills says my javascript and css are not external 

[LitExtension]

Hi @dayzia122,

Please go to Actions > Edit code > Layout > theme.liquid file, you can add the code directly here.

Or go to Assets, here contains all the CSS and JS files, you can add the code at each specific file.

Hope it helps!

[dayzia122]

How should it be written though?

[LitExtension]

Hi @dayzia122,

What code do you want to insert? Please send me the code, and I will check it.

[Schooltijd]

@LitExtension 

I want to add this Javascript into my shopify website:

https://codepen.io/nickelse/pen/VqdEQg

The HTML part is already done on my Section "Announcement-bar.liquid"

The 4 Contents of the "swiper-content" are all together visible at my site (Test environment).

The CSS is also done.

The JS part i am struggling with..

I tried a few options:

1) Putting it also like this in "Announcement-bar.liquid"

Example:

<script>

// Global Swipe Function
function swiperGoodness() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional Swimper Parameters
loop: true,
autoplay: { delay: 5000 }
})
};

// Run Function On Load
$(function(){
swiperGoodness();
})

// Run Function On Window Re-Size
$(window).resize(function() {
swiperGoodness();
});

</script>

2) Putting it also like this in a new Asset and call it from Theme.liquid

Example:

The new asset 'Test'

// Global Swipe Function
function swiperGoodness() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional Swimper Parameters
loop: true,
autoplay: { delay: 5000 }
})
};

// Run Function On Load
$(function(){
swiperGoodness();
})

// Run Function On Window Re-Size
$(window).resize(function() {
swiperGoodness();
});

Theme.liquid

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

Unfortunately it all not worked out..

I don't have enough knowledge about how to put in the JS code..

Can somebody bring me on the right track?