Add a Carousel with Synchronized Sliders on Dawn

Store Design
1

Since the 2.0 themes came out I have been using them for various projects and all I can say is that they are pretty good but very simplistic. In the past few days, I’ve been working on a new project but can’t seem to figure out how to add new "sections"on the themes (that i find on codepen, since I have very little/basic knowledge of coding).

In the past themes, I would add a custom liquid to the editor, add all the CSS to theme.scss.liquid and if there was any JS that needed to be added I would go ahead and either put it on “theme.js” or “theme.liquid”. And voila!! Everything would work perfectly.

With Dawn that I currently use, I add all CSS codes to base.css(of course change some things around so they do not affect any codes that are already in the theme) and add HTML on the custom liquid. When I have to add JS I go ahead and add it to global.js but doesn’t seem to work at all!

What I wanna know is how can I add the codepen mentioned below to my theme in a custom liquid. Like what is the theme file i have to add the JS to? Am i doing something completely wrong? Please enlighten me!!

CODEPEN THAT WOULD LOVE TO ADD:

https://codepen.io/lmgonzalves/pen/djEgmv

Any help would be very much appreciated! Sorry for the long post!

@KetanKumar @made4Uo @LitCommerce @oscprofessional @PageFly-Victor

@MarinaPetrovic @LitExtension @ZestardTech @AvadaCommerce

2

Hi @Panagi1091 ,

You can add a custom section by following the instructions below.

NOTE: If you try to add this section in multiple locations, it might cause an error. Also, make sure your theme supports SCSS, you might need to convert it to CSS.

  1. In your Admin store, click Online store > Themes

  2. Go to the theme you want to edit, click Actions > Edit code

  3. In your Section folder, click Add a new section

  4. You have to enclose your code like below.

html code here....

NOTE: You need the **presets** so you can see the section in your Theme editor. You can change the "Section name" to whatever you want.
3

Thanks for getting back to me! Tried that but all i get is “Invalid JSON in tag ‘schema’” since i have no idea what to add on the settings and presets. Is this the best way to do it?

4

@Panagi1091 no rush its our pleasure to help

If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try

5

Tried that but I get an error. Might be since I do not know what to put on “settings” and “presets” I get an error of "Invalid JSON in tag ‘schema’.

6

Well i just know the basics but i found my self trying for hours to do some stuff. What i’d like to know is where to add the JS. Tried adding it in global.js but does not work. Tried adding a custom section like Made4Uo but i do not know what to add on presets and settings.

7

Tried that but I get an error. Might be since I do not know what to put on “settings” and “presets” I get an error of "Invalid JSON in tag ‘schema’.

8

Hi @Panagi1091 ,

Can you share your code? So we can figure out where the errors coming from

9

Sure thing! Thanks in advance :slightly_smiling_face:

10

Sure thing! Thanks in advance :slightly_smiling_face: Since every time I posted the code it would disappear I went ahead and added it in a word document which I attached below.

11

hey, did u able to do it ? bcoz i also wants to add pls reply