Buy me a coffee

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

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder