Trends Web Developing
DocumentationSupportBack to Website

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)

FilePurpose
critical.cssAbove-the-fold critical styles
theme.cssMain theme stylesheet
product-card.cssProduct card component
swiper-bundle.min.cssCarousel/slider library
global.jsWeb Components, shared utilities
theme.jsCart, search, product UI, theme interactions
utils.jsHelper functions

CSS by feature area

Header & navigation

  • navigation.css — Main header and menu
  • menu-vertical.css — Vertical header layout
  • minicart.css — Cart drawer
  • header-account-popup.css — Account popup
  • search-type-default.css — Search UI
  • marquee.css — Announcement bar marquee

Product page

  • main-product.css — Standard product layout
  • main-product-layout-2.css — Alternative product layout
  • variant-picker-cards.css — Card-style variant picker
  • component-deferred-media.css — Video/3D deferred load
  • component-product-model.css — 3D model viewer
  • component-model-viewer-ui.css — Model viewer UI
  • countdown.css — All countdown timers

Collection & catalog

  • collection-page.css — Collection template
  • collection-packery.css — Packery grid layout
  • section-collection.css — Collection sections

Cart & checkout

  • cart-page.css — Cart page
  • minicart.css — Drawer cart

Homepage & sections

  • slideshow.css — Slideshow sections
  • banner.css — Banner sections
  • featured-product.css — Featured product section
  • popup.css — Popups and modals
  • before-you-leave.css — Exit-intent popup

Blog & content

  • blog.css — Blog templates

Pages

  • page-contact.css — Contact page
  • page-sale.css — Sale page
  • page-password.css — Password page
  • password.css — Password layout
  • store-location.css — Store locator
  • lookbook.css — Lookbook sections
  • shopable-video.css — Shoppable video

Utilities

  • collapsible.css — Accordion/collapsible rows
  • skeleton.css — Loading skeletons
  • rtl.css — Right-to-left languages
  • design-mode.css — Theme editor preview
  • photoswipe.css — Image lightbox
  • drift-basic.min.css — Image zoom
  • tingle.min.css — Modal library

Third-party / maps

  • mapbox-gl.css — Mapbox maps
  • mapbox-gl-geocoder.css — Map search
  • judgeme-reviews.css — Judge.me reviews styling (if app installed)

JavaScript by feature

FileLoaded when
cart.jsCart operations
cart-components.jsCart drawer components
cart-discount.jsCart discount field
main-product.jsProduct page
collection.jsCollection filtering
slideshow-section.jsSlideshow sections
shopable-video.jsShoppable video
recently-viewed.jsRecently viewed products
pickup-availability.jsPickup availability block
product-model.js3D product models
photoswipe-init.jsProduct image zoom
contact.jsContact form
blog.jsBlog interactions
password-modal.jsPassword page
header-account-popup.jsAccount popup
motion-effect.jsScroll animations
page-store-location.jsStore locator map
product_tab.jsProduct tabs
recipient-form.jsGift card recipient
swiper-bundle.min.jsSliders/carousels
mapbox-gl.jsGoogle Map / Mapbox sections
tingle.jsModal dialogs
drift.jsImage 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 in layout/theme.liquid
  • Font variables in snippets/font-variables.liquid with font_modify filter
  • Mobile-first responsive design

Custom CSS

Merchants can add custom styles via:

  1. Custom Liquid section or block
  2. Edit assets/theme.css in 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