Brine CSS ID

Some CSS ID/Class for Brine template.

Brine template includes:

  • Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Custom Template, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West


  • header: header.Header
  • mobile header: .Mobile-bar.Mobile-bar–top
  • desktop logo: img.Header-branding-logo
  • desktop navigation: nav.Header-nav
  • navigation links: nav.Header-nav a
  • burger icon: svg.Icon.Icon–hamburger
  • mobile navigation: .Mobile-overlay-menu-main
  • mobile navigation links: .Mobile-overlay-menu-main a
  • mobile menu close icon: svg.Icon.Icon–close
  • mobile header search icon: a.Mobile-bar-search
  • Header cart icon: span.Cart-inner
  • Cart number: span.sqs-cart-quantity


  • footer: footer.Footer
  • footer links: footer.Footer a
  • footer navigation: .Footer-nav-group
  • footer navigation links: .Footer-nav-group a

Blog (List)

  • blog: .collection-type-blog.view-list
  • image: .BlogList-item-image
  • title: .BlogList-item-title
  • author: .Blog-meta-item–author
  • date: time.Blog-meta-item.Blog-meta-item–date
  • excerpt: .BlogList-item-excerpt
  • read more: a.BlogList-item-readmore

Blog (Detail)

  • blog detail: .collection-type-blog.view-item
  • author/date: same as above
  • title: h1.BlogItem-title
  • previous: .BlogItem-pagination-link-label
  • next: .BlogItem-pagination-link-label
  • pagination title: h4.BlogItem-pagination-link-title

Shop Page

  • shop: .collection-type-products.view-list
  • product items: .ProductList .ProductList-item
  • title: h1.ProductList-title
  • price: .product-price
  • currency: body.native-currency-code-usd .sqs-money-native:before
  • image: .ProductList-outerImageWrapper

Product (Detail)

  • product: .collection-type-products.view-item
  • breadcrumb: .ProductItem-nav-breadcrumb
  • title: h1.ProductItem-details-title
  • price: .product-price
  • excerpt: .ProductItem-details-excerpt p
  • quantity: .product-quantity-input
  • quantity label: .quantity-label
  • quantity input: .product-quantity-input input
  • add to cart text: .sqs-add-to-cart-button-inner
  • add to cart button: .sqs-add-to-cart-button-wrapper
  • sharing icons: .ProductItem-details-share

Featured Image by

Leave a Comment