Theme

Theme

The purpose of this tutorial is to empower shop owners using either custom or paid themes to identify markers in the theme HTML. In this way, Ellipsis can personalize the front-end customer experience.

To add these markers, simply navigate to the appropriate files in the theme browser and modify the markup as detailed below.

Buttons


  • Purpose: Identifies the element on the product detail page after which the app inserts the "add to quote" and "add to requisition list" buttons.
  • File: "/Sections/product-template.liquid"
  • Change: Add CSS class "b2b_product_buttons_other" to the div directly above where you would like to insert the B2B buttons.
Pricing


  • Purpose: Identifies elements on the collection and search result pages that the app modifies for selective pricing.
  • File: "/Snippets/product-price.liquid"
  • Change: Add CSS class "b2b_product_price_other" to the element(s) that surround product prices. Of note, there are usually multiple instances of this in the file.
Account link


  • Purpose: Identifies the "B2B Account" link element on the user profile page.
  • File: "/Templates/customers/account.liquid"
  • Change: Add CSS class "b2b_account_link_other" to the element where you want to add the "B2B Account" button.
Search field


  • Purpose: Identifies the search input field on the search result page.
  • File: "/Templates/search.liquid"
  • Change: Add CSS class "b2b_search_field_other" to the search input element.
Search message


  • Purpose: Identifies the element containing the "no search results" message.
  • File: "/Templates/search.liquid"
  • Change: Add CSS class "b2b_search_message_other" to the container element.
Options


  • Purpose: Identifies the element that corresponds to options on the product detail page.
  • File: "/Sections/product-template.liquid"
  • Change: Add CSS class "b2b_selector_other-{{ section.id }}" to the select element that represent product options. Of note, there are usually multiple instances of this in the file.