Assets (CSS & JavaScript)
Stylesheets and scripts used by Novara. Most files load only when needed (per section), not on every page.
Core files (every page)
| File | Purpose |
|---|---|
critical.css | Above-the-fold critical styles |
theme.css | Main theme stylesheet |
product-card.css | Product card component |
swiper-bundle.min.css | Carousel/slider library |
global.js | Web Components, shared utilities |
theme.js | Cart, search, product UI, theme interactions |
utils.js | Helper functions |
CSS by feature area
Header & navigation
navigation.css— Main header and menumenu-vertical.css— Vertical header layoutminicart.css— Cart drawerheader-account-popup.css— Account popupsearch-type-default.css— Search UImarquee.css— Announcement bar marquee
Product page
main-product.css— Standard product layoutmain-product-layout-2.css— Alternative product layoutvariant-picker-cards.css— Card-style variant pickercomponent-deferred-media.css— Video/3D deferred loadcomponent-product-model.css— 3D model viewercomponent-model-viewer-ui.css— Model viewer UIcountdown.css— All countdown timers
Collection & catalog
collection-page.css— Collection templatecollection-packery.css— Packery grid layoutsection-collection.css— Collection sections
Cart & checkout
cart-page.css— Cart pageminicart.css— Drawer cart
Homepage & sections
slideshow.css— Slideshow sectionsbanner.css— Banner sectionsfeatured-product.css— Featured product sectionpopup.css— Popups and modalsbefore-you-leave.css— Exit-intent popup
Blog & content
blog.css— Blog templates
Pages
page-contact.css— Contact pagepage-sale.css— Sale pagepage-password.css— Password pagepassword.css— Password layoutstore-location.css— Store locatorlookbook.css— Lookbook sectionsshopable-video.css— Shoppable video
Utilities
collapsible.css— Accordion/collapsible rowsskeleton.css— Loading skeletonsrtl.css— Right-to-left languagesdesign-mode.css— Theme editor previewphotoswipe.css— Image lightboxdrift-basic.min.css— Image zoomtingle.min.css— Modal library
Third-party / maps
mapbox-gl.css— Mapbox mapsmapbox-gl-geocoder.css— Map searchjudgeme-reviews.css— Judge.me reviews styling (if app installed)
JavaScript by feature
| File | Loaded when |
|---|---|
cart.js | Cart operations |
cart-components.js | Cart drawer components |
cart-discount.js | Cart discount field |
main-product.js | Product page |
collection.js | Collection filtering |
slideshow-section.js | Slideshow sections |
shopable-video.js | Shoppable video |
recently-viewed.js | Recently viewed products |
pickup-availability.js | Pickup availability block |
product-model.js | 3D product models |
photoswipe-init.js | Product image zoom |
contact.js | Contact form |
blog.js | Blog interactions |
password-modal.js | Password page |
header-account-popup.js | Account popup |
motion-effect.js | Scroll animations |
page-store-location.js | Store locator map |
product_tab.js | Product tabs |
recipient-form.js | Gift card recipient |
swiper-bundle.min.js | Sliders/carousels |
mapbox-gl.js | Google Map / Mapbox sections |
tingle.js | Modal dialogs |
drift.js | Image zoom |
CSS architecture
- BEM-style class naming (e.g.
.product-card,.announcement__bar) - CSS custom properties for colors, spacing, fonts
- Color schemes generate
.color-{scheme-id}classes inlayout/theme.liquid - Font variables in
snippets/font-variables.liquidwithfont_modifyfilter - Mobile-first responsive design
Custom CSS
Merchants can add custom styles via:
- Custom Liquid section or block
- Edit
assets/theme.cssin code editor (advanced — back up first)
RTL
When RTL is enabled in Theme settings, rtl.css loads automatically for Arabic, Hebrew, Urdu, and configured languages.
Novara theme v3.4.1