🐢Static Sections

Static Sections contain content that is not deeply integrated into user interactivity and not based on dynamic content with a personalized experience.

These sections are always based on a .liquid template with possible snippets that render blocks.

Basic interactivity is achieved via Vanilla JS for sections, such as the slideshow or tabs section. The Vanilla JS is setup to only manipulate existing HTML elements, and never renders entire components on the client side only.

Section List

• apps

• benefit-tabs → Interactive via ./assets/scroll-slider.tsx

• categories → Interactive via ./assets/scroll-slider.tsx

• collection-grid-with-filters (Product cards with a color selector are dynamic)

  • Makes use of ./snippets/product-card.liquid and ./assets/product-card.tsx

• collection-nav → Interactive via ./assets/scroll-slider.tsx and ./assets/tabs.tsx

• custom-liquid

• faq → Interactive via ./assets/scroll-slider.tsx , ./assets/tabs.tsx

  • Content loaded via ./snippets/_collapsible.liquid and ./asssets/accordion.tsx

• featured-articles

• featured-collection-grid

• featured-objects (Product cards with a color selector are dynamic)

• featured-reviews

• features

• features-slider

• footer

• forms

• highlights

• image-banner

• image-feed

• image-with-text

• main404

• main-account

• main-addresses

• main-article

• main-blog

• main-cart

• main-collection-banner

• main-collection-filter-sort-bar

• main-collection-product-grid (Product cards with a color selector are dynamic)

• main-collections-list

• main-page

• main-search-filters

• main-search-grid

• main-search-input

• marquee-bar

• newsletter

• object-over-image

• partner-slider

• products-scrollable (Product cards with a color selector are dynamic)

• richtext

• scrollable-images

• slideshow

• store-locator

• tagged-product-images

• testimonials

• video-banner

Mega Menu Sections

The content is static, but needs to be linked by handle to the main header menu.

• megamenu

• drawer-menu