This page provides technical documentation for the Avante theme. It is intended for developers, agencies, or individuals with advanced technical knowledge.

<aside> <img src="/icons/warning_red.svg" alt="/icons/warning_red.svg" width="40px" /> Warning

You should only edit your theme's code if you cannot make the necessary changes using a Shopify app or the theme editor. If you want to add custom features or code but lack experience in developing websites with HTML, CSS, and JavaScript, feel free to contact us or consider hiring a Shopify expert.

</aside>

Theme dependencies

Here is a comprehensive list of the dependencies we use in our theme:

• **TweenMax from GSAP** – the Greensock Animation Platform (v: 2.1.2). It’s a JavaScript library that is used to create an animation effect when an image appears on hover in the Editorial: collection list , Editorial: link list , and Scrolling promotion sections. Reference to TweenMax inside HoverImageReveal JavaScript class.
• **Masonry (v: 4.2.2).** It’s a JavaScript library that is used to build a cascading grid layout in the Image grid section and the image grid block (in the Blog posts and Page sections of the corresponding templates). Reference to Masonry inside CascadingGrid JavaScript class.

Theme architecture

The file structure of our theme is based on the standard file structure used by Shopify.

CSS

Our theme includes a single base.css file that contains styles for UI elements that are common across the entire theme. All other styles are separated into smaller files, with each section or block having its own file. This approach allows us to avoid loading styles if the corresponding block or section is not added, improving performance. Additionally, we have written all of our CSS code ourselves and do not use any CSS frameworks.

JavaScript

We have separated all of the JavaScript code in our theme into several files. The global.js file contains scripts that can be connected to the template or section multiple times (for example, color swatches in the product card). All other JavaScript code is divided into files that contain functionality related to a specific section.

Add custom JavaScript and CSS

In our theme, we allow the use of custom scripts and styles to extend and add functionality without having to edit the theme’s JavaScript and CSS files.

The best practice for modifying a theme is to create a duplicate copy of the original before editing any code. This makes it easy to restore the backup version in case of any issues or if you are not satisfied with the changes, saving you time and trouble in the long run.

Use custom-script.js to add custom scripts, including new creations and scripts with custom events.