API tools faq
paste
Guest User

shopify help

a guest
Jun 29th, 2026
41
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.48 KB | Source Code | 0 0
raw download clone embed print report
  1. {% liquid
  2. assign order = 'logo,menu,localization,search,drawer_search,actions'
  3. if shop.customer_accounts_enabled
  4. assign order = 'drawer_search,logo,menu,localization,search,actions'
  5. endif
  6. assign rows = 'top,bottom' | split: ','
  7. assign search_style = 'none'
  8. if section.settings.show_search
  9. assign search_style = 'modal'
  10. endif
  11. if section.settings.show_search
  12. render 'predictive-search-styles'
  13. render 'slideshow-styles'
  14. endif
  15. if section.settings.enable_transparent_header_home and template.name == 'index'
  16. assign transparent = 'always'
  17. assign transparent_color_scheme = section.settings.home_color_scheme
  18. elsif section.settings.enable_transparent_header_product and template.name == 'product'
  19. assign transparent = 'always'
  20. assign transparent_color_scheme = section.settings.product_color_scheme
  21. elsif section.settings.enable_transparent_header_collection and template.name == 'collection'
  22. assign transparent = 'always'
  23. assign transparent_color_scheme = section.settings.collection_color_scheme
  24. endif
  25. if section.settings.enable_sticky_header == 'always'
  26. assign sticky = 'always'
  27. elsif section.settings.enable_sticky_header == 'scroll-up'
  28. assign sticky = 'scroll-up'
  29. endif
  30. if transparent and sticky
  31. assign transparent = 'not-sticky'
  32. endif
  33. if transparent
  34. if transparent_color_scheme == 'inverse'
  35. assign transparent_color_scheme = 'color-' | append: section.settings.color_scheme_transparent
  36. else
  37. assign transparent_color_scheme = 'color-' | append: section.settings.color_scheme_top
  38. endif
  39. endif
  40. capture logo
  41. content_for 'block', type: '_header-logo', id: 'header-logo'
  42. endcapture
  43. capture menu
  44. content_for 'block', type: '_header-menu', id: 'header-menu'
  45. endcapture
  46. capture drawer_menu
  47. content_for 'block', type: '_header-menu', id: 'header-menu', variant: 'mobile'
  48. endcapture
  49. capture navigation_bar
  50. content_for 'block', type: '_header-menu', id: 'header-menu', variant: 'navigation_bar', transparent: transparent
  51. endcapture
  52. capture actions
  53. render 'header-actions', customer_account_menu: section.settings.customer_account_menu, display_style: section.settings.actions_display_style, section: section
  54. endcapture
  55. if shop.customer_accounts_enabled
  56. assign search_class = 'search-action--hidden-on-drawer'
  57. endif
  58. if section.settings.localization_position == 'left'
  59. if section.settings.search_position == 'left'
  60. if shop.customer_accounts_enabled
  61. assign order = 'drawer_search,logo,search,localization,menu,actions'
  62. else
  63. assign order = 'logo,search,localization,menu,drawer_search,actions'
  64. endif
  65. else
  66. if shop.customer_accounts_enabled
  67. assign order = 'drawer_search,logo,localization,menu,search,actions'
  68. else
  69. assign order = 'logo,localization,menu,search,drawer_search,actions'
  70. endif
  71. endif
  72. else
  73. if section.settings.search_position == 'left'
  74. if shop.customer_accounts_enabled
  75. assign order = 'drawer_search,logo,search,menu,localization,actions'
  76. else
  77. assign order = 'logo,search,menu,localization,drawer_search,actions'
  78. endif
  79. endif
  80. endif
  81. capture search
  82. render 'search', style: search_style, class: search_class, display_style: section.settings.actions_display_style
  83. endcapture
  84. assign skip_drawer_search = false
  85. if shop.customer_accounts_enabled == false and section.settings.search_position == 'left' and search_style != 'none'
  86. assign skip_drawer_search = true
  87. endif
  88. if section.settings.search_row == 'bottom' or search_style != 'none' and skip_drawer_search == false
  89. capture drawer_search
  90. render 'search', class: 'search-action--hidden-on-menu', style: search_style, display_style: section.settings.actions_display_style
  91. endcapture
  92. endif
  93. assign show_language = section.settings.show_language
  94. if localization.available_languages.size <= 1
  95. assign show_language = false
  96. endif
  97. assign show_country = section.settings.show_country
  98. if localization.available_countries.size <= 1
  99. assign show_country = false
  100. endif
  101. assign bottom_row_blocks = ''
  102. if section.settings.menu_row == 'bottom'
  103. assign bottom_row_blocks = bottom_row_blocks | append: 'menu,'
  104. endif
  105. if section.settings.search_style != 'none'
  106. if section.settings.search_row == 'bottom'
  107. assign bottom_row_blocks = bottom_row_blocks | append: 'search,'
  108. endif
  109. endif
  110. if section.settings.show_country or section.settings.show_language
  111. if section.settings.localization_row == 'bottom'
  112. assign bottom_row_blocks = bottom_row_blocks | append: 'localization,'
  113. endif
  114. endif
  115. assign bottom_row_blocks = bottom_row_blocks | split: ',' | compact
  116. if section.settings.section_height == 'compact'
  117. assign header_height_class = ' header--compact'
  118. endif
  119. if bottom_row_blocks.size > 0 and section.settings.color_scheme_top.settings.background.rgb == section.settings.color_scheme_bottom.settings.background.rgb and section.settings.divider_width == 0
  120. assign collapse_header_paddings_class = 'header--collapse-row-paddings'
  121. endif
  122. assign class = 'header'
  123. if transparent_color_scheme
  124. assign class = class | append: ' ' | append: transparent_color_scheme
  125. endif
  126. if header_height_class
  127. assign class = class | append: ' ' | append: header_height_class
  128. endif
  129. if collapse_header_paddings_class
  130. assign class = class | append: ' ' | append: collapse_header_paddings_class
  131. endif
  132. assign top_transparent = false
  133. assign bottom_transparent = false
  134. if section.settings.color_scheme_top.settings.background.alpha != 1
  135. assign top_transparent = true
  136. endif
  137. if section.settings.color_scheme_bottom.settings.background.alpha != 1
  138. assign bottom_transparent = true
  139. endif
  140. if top_transparent and bottom_transparent
  141. assign transparent_color_scheme_value = 'both'
  142. elsif top_transparent
  143. assign transparent_color_scheme_value = 'top'
  144. elsif bottom_transparent
  145. assign transparent_color_scheme_value = 'bottom'
  146. endif
  147. %}
  148. {% capture localization_markup %}
  149. {% liquid
  150. assign localization_font = '--menu-localization-font: var(--font-[localization_font]--family); ' | replace: '[localization_font]', section.settings.localization_font
  151. assign localization_font_size = '--menu-localization-font-size: [localization_font_size]; ' | replace: '[localization_font_size]', section.settings.localization_font_size
  152. assign color_shadow = '--color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));'
  153. assign form_style = localization_font | append: localization_font_size | append: color_shadow
  154. %}
  155. {% if show_language and show_country == false %}
  156. <div class="dropdown-localization mobile:hidden">
  157. {% render 'localization-form',
  158. show_country: show_country,
  159. show_language: show_language,
  160. localization_style: 'dropdown',
  161. form_style: form_style,
  162. form_id: section.id
  163. %}
  164. </div>
  165. {% elsif show_country %}
  166. <dropdown-localization-component
  167. class="dropdown-localization mobile:hidden"
  168. >
  169. <button
  170. type="button"
  171. class="button dropdown-localization__button localization-selector header-actions__action"
  172. aria-expanded="false"
  173. aria-controls="dropdown-localization-results"
  174. ref="button"
  175. on:click="/toggleSelector"
  176. style="{{ localization_font }} {{ localization_font_size }}"
  177. >
  178. {% if show_country %}
  179. {% if section.settings.country_selector_style == true %}
  180. {% liquid
  181. assign background_brightness = section.settings.color_scheme_top.settings.background | color_brightness
  182. if background_brightness < 64
  183. assign shadow_size = 4
  184. else
  185. assign shadow_size = 2
  186. endif
  187. %}
  188. <span
  189. class="icon-flag"
  190. style="
  191. background-image: url({{- localization.country | image_url: width: 32 }});
  192. --size-shadow: {{ shadow_size }}px;
  193. --color-shadow: rgb(var(--color-foreground-rgb) / var(--opacity-30-60));
  194. "
  195. ></span>
  196. {% endif %}
  197. <span
  198. class="currency-code"
  199. data-testid="localization-currency-code"
  200. >
  201. {{- localization.country.currency.iso_code -}}
  202. </span>
  203. {% endif %}
  204. <span
  205. class="visually-hidden"
  206. data-testid="localization-visually-hidden"
  207. >
  208. {{- 'accessibility.localization_region_and_language' | t -}}
  209. </span>
  210. {%- if show_country and show_language -%}
  211. <span>/</span>
  212. {%- endif -%}
  213. {%- if show_language -%}
  214. <span>
  215. {{ localization.language.iso_code | upcase }}
  216. </span>
  217. {%- endif -%}
  218. <span class="svg-wrapper icon-caret">
  219. {{- 'icon-caret.svg' | inline_asset_content -}}
  220. </span>
  221. </button>
  222. <div
  223. class="localization-wrapper {{ section.settings.localization_position }}-bound color-{{ settings.popover_color_scheme }}"
  224. hidden
  225. ref="panel"
  226. >
  227. {% render 'localization-form',
  228. show_country: show_country,
  229. show_language: show_language,
  230. localization_style: 'dropdown',
  231. form_style: form_style,
  232. form_id: section.id
  233. %}
  234. </div>
  235. </dropdown-localization-component>
  236. {% endif %}
  237. {% endcapture %}
  238. <script type="application/ld+json">
  239. {
  240. "@context": "http://schema.org",
  241. "@type": "Organization",
  242. "name": {{ shop.name | json }},
  243. {% if settings.logo %}
  244. "logo": {{ settings.logo | image_url: width: 500 | prepend: "https:" | json }},
  245. {% endif %}
  246. "url": {{ request.origin | append: page.url | json }}
  247. }
  248. </script>
  249. <header-component
  250. id="header-component"
  251. class="{{ class }}"
  252. data-theme-color="rgb({{ section.settings.color_scheme_top.settings.background.rgb }})"
  253. {% if transparent %}
  254. transparent="{{ transparent }}"
  255. {% endif %}
  256. {% if sticky %}
  257. sticky="{{ sticky }}"
  258. {% endif %}
  259. data-skip-node-update
  260. data-scroll-direction="none"
  261. {% if section.settings.menu_row == 'top' and bottom_row_blocks.size > 0 %}
  262. data-submenu-overlap-bottom-row
  263. {% endif %}
  264. {% if transparent_color_scheme_value %}
  265. data-transparent-color-scheme="{{ transparent_color_scheme_value }}"
  266. {% endif %}
  267. style="
  268. --color-scheme-top-row: rgba({{ section.settings.color_scheme_top.settings.background.rgba }});
  269. --color-scheme-bottom-row: rgba({{ section.settings.color_scheme_bottom.settings.background.rgba }});
  270. {% if section.settings.actions_display_style == 'text' %}
  271. --header-actions-font-size: {{ section.settings.actions_font_size | default: '1rem' }};
  272. --header-actions-font-family: var(--font-{{ section.settings.actions_font | default: 'heading' }}--family);
  273. --header-actions-font-weight: var(--font-{{ section.settings.actions_font | default: 'heading' }}--weight);
  274. --header-actions-text-case: {{ section.settings.actions_text_case | default: 'none' }};
  275. {% endif %}
  276. "
  277. >
  278. <div class="header__underlay header__underlay-closed"></div>
  279. <div
  280. class="header__underlay header__underlay-open"
  281. ></div>
  282. {%- if request.page_type == 'index' -%}
  283. <h1 class="visually-hidden">{{ shop.name }}</h1>
  284. {%- endif -%}
  285. {% for row in rows %}
  286. {% liquid
  287. assign scheme = 'color_scheme_' | append: row
  288. assign class = 'header__row header__row--[row] color-[row_scheme] section section--full-width-margin section--[section-width]' | replace: '[row]', row | replace: '[row_scheme]', section.settings[scheme] | replace: '[section-width]', section.settings.section_width
  289. case row
  290. when 'top'
  291. assign first = drawer_menu
  292. if bottom_row_blocks.size > 0 and section.settings.divider_size == 'page-width'
  293. assign class = class | append: ' divider--page-width'
  294. endif
  295. if bottom_row_blocks.size > 0
  296. assign border_bottom_setting_id = 'divider_width'
  297. else
  298. assign border_bottom_setting_id = 'border_width'
  299. endif
  300. when 'bottom'
  301. assign first = ''
  302. assign class = class | append: ' mobile:hidden'
  303. assign border_bottom_setting_id = 'border_width'
  304. endcase
  305. assign style = '--border-bottom-width: [width]px; ' | replace: '[width]', section.settings[border_bottom_setting_id]
  306. if row == 'top'
  307. assign style = style | append: '--border-bottom-width-mobile: [width]px; ' | replace: '[width]', section.settings.border_width
  308. endif
  309. %}
  310. {% capture content %}
  311. {% render 'header-row',
  312. row: row,
  313. order: order,
  314. settings: section.settings,
  315. first: first,
  316. logo: logo,
  317. menu: menu,
  318. actions: actions,
  319. localization: localization_markup,
  320. search: search,
  321. drawer_search: drawer_search
  322. %}
  323. {% endcapture %}
  324. {% assign content = content | strip %}
  325. {% if content != blank %}
  326. <div
  327. class="{{ class | strip }}"
  328. ref="headerRowTop"
  329. {%- if style != blank -%}
  330. style="{{ style | strip }}"
  331. {%- endif -%}
  332. >
  333. <div class="header__columns spacing-style">
  334. {{ content }}
  335. </div>
  336. </div>
  337. {% endif %}
  338. {% endfor %}
  339. {% if navigation_bar != blank %}
  340. <div class="header__row header__navigation-bar-row color-{{ section.settings.color_scheme_bottom }}">
  341. {{ navigation_bar }}
  342. </div>
  343. {% endif %}
  344. </header-component>
  345. <script
  346. src="{{ 'header.js' | asset_url }}"
  347. type="module"
  348. ></script>
  349. {% stylesheet %}
  350. #header-component .header__navigation-bar-row,
  351. #header-component .header__row--bottom {
  352. background-color: transparent !important;
  353. }
  354. .header-menu .menu-list__submenu,
  355. .mega-menu__list {
  356. background: #58595b !important;
  357. }
  358. #header-component .header__underlay-open {
  359. background: linear-gradient(
  360. #1a1a1a 0 var(--top-row-height),
  361. #58595b var(--top-row-height) 100%
  362. ) !important;
  363. }
  364. .header-menu .menu-list__submenu {
  365. width: 100vw !important;
  366. left: 50% !important;
  367. right: 50% !important;
  368. margin-left: -50vw !important;
  369. margin-right: -50vw !important;
  370. }
  371.  
  372. @media screen and (max-width: 749px) {
  373. .header__row--bottom,
  374. .header__navigation-bar-row,
  375. .mobile\:hidden {
  376. display: none !important;
  377. }
  378. }
  379. body {
  380. --header-height: 60px;
  381. --header-group-height: var(--header-height);
  382. --transparent-header-offset-boolean: 0;
  383. }
  384. .header {
  385. --header-padding: var(--padding-sm);
  386. --font-paragraph--line-height: 1;
  387. --header-content-transition-timing: 0s;
  388. display: block;
  389. contain: layout style;
  390. background: transparent;
  391. a,
  392. .button,
  393. .button-secondary,
  394. .header-actions__action {
  395. transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
  396. }
  397. }
  398. #header-component :is(.header-menu, .dropdown-localization) {
  399. display: none;
  400. }
  401. @media screen and (min-width: 750px) {
  402. #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
  403. display: flex;
  404. }
  405. }
  406. #header-component[data-menu-style='drawer'] .header__column {
  407. display: contents;
  408. }
  409. @media screen and (min-width: 750px) {
  410. #header-component[data-menu-style='menu'] .header__navigation-bar-row {
  411. display: none;
  412. }
  413. }
  414. .header[transparent] {
  415. --language-button-background-color: transparent;
  416. --language-button-border-color: transparent;
  417. --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
  418. var(--animation-speed-fast) var(--ease-out-cubic);
  419. --closed-underlay-height: 0px;
  420. --header-logo-display: none;
  421. --header-logo-inverse-display: block;
  422. position: absolute;
  423. top: 0;
  424. left: 0;
  425. right: 0;
  426. z-index: var(--layer-overlay);
  427. &[transparent='not-sticky'][data-sticky-state='active'],
  428. &:has(.menu-list__link:not([aria-haspopup]):hover) {
  429. --header-logo-display: unset;
  430. --header-logo-inverse-display: unset;
  431. --color-foreground: inherit;
  432. --color-foreground-rgb: inherit;
  433. --color-background: inherit;
  434. --color-background-rgb: inherit;
  435. --color-border: inherit;
  436. --color-border-rgb: inherit;
  437. --closed-underlay-height: 100%;
  438. }
  439. &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
  440. --color-foreground: inherit;
  441. --color-foreground-rgb: inherit;
  442. --color-border: inherit;
  443. --color-border-rgb: inherit;
  444. --color-primary-button-background: inherit;
  445. --color-primary-button-text: inherit;
  446. }
  447. &:has(.mega-menu__list:hover),
  448. &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
  449. &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
  450. --header-logo-display: unset;
  451. --header-logo-inverse-display: unset;
  452. --color-foreground: inherit;
  453. --color-foreground-rgb: inherit;
  454. --color-background: inherit;
  455. --color-background-rgb: inherit;
  456. --color-border: inherit;
  457. --color-border-rgb: inherit;
  458. --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
  459. }
  460. }
  461. [data-transparent-color-scheme='top']:hover .header__row--top,
  462. [data-transparent-color-scheme='top']:focus-within .header__row--top,
  463. [data-transparent-color-scheme='both']:hover .header__row--top,
  464. [data-transparent-color-scheme='both']:focus-within .header__row--top {
  465. --color-foreground: inherit;
  466. --color-foreground-rgb: inherit;
  467. --color-border: inherit;
  468. --color-border-rgb: inherit;
  469. --color-primary-button-background: inherit;
  470. --color-primary-button-text: inherit;
  471. }
  472. [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  473. [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  474. [data-transparent-color-scheme='both']:hover .header__row--bottom,
  475. [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
  476. --color-foreground: inherit;
  477. --color-foreground-rgb: inherit;
  478. --color-border: inherit;
  479. --color-border-rgb: inherit;
  480. --color-primary-button-background: inherit;
  481. --color-primary-button-text: inherit;
  482. }
  483. .header-section {
  484. position: relative;
  485. z-index: var(--layer-heightened);
  486. }
  487. #header-component {
  488. --submenu-height: 0px;
  489. --full-open-header-height: 0px;
  490. }
  491. #header-group:has(#header-component[sticky]) {
  492. display: contents;
  493. }
  494. .header-section:has(> #header-component[sticky='always']),
  495. .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
  496. position: sticky;
  497. top: -1px;
  498. z-index: var(--layer-sticky);
  499. }
  500. .header[data-sticky-state] {
  501. transition: opacity var(--animation-speed) var(--animation-easing);
  502. opacity: 1;
  503. }
  504. .header[data-sticky-state='active'] {
  505. view-transition-name: sticky-header;
  506. }
  507. :active-view-transition-type(empty-cart-drawer) {
  508. .header[data-sticky-state='active'] {
  509. view-transition-name: none;
  510. }
  511. }
  512. .header[data-sticky-state='idle'] {
  513. opacity: 0;
  514. }
  515. .header__underlay {
  516. position: absolute;
  517. inset: 0;
  518. }
  519. .header__underlay-closed {
  520. height: var(--closed-underlay-height, 100%);
  521. z-index: var(--layer-lowest);
  522. background: linear-gradient(
  523. var(--color-scheme-top-row) 0 var(--top-row-height),
  524. var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
  525. );
  526. transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  527. }
  528. .header__underlay-open {
  529. height: var(--full-open-header-height);
  530. background: linear-gradient(
  531. var(--color-scheme-top-row) 0 var(--top-row-height),
  532. var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
  533. var(--color-submenu) var(--header-height) 100%
  534. );
  535. transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  536. }
  537. .header__underlay-open::after {
  538. content: '';
  539. position: absolute;
  540. inset: 0;
  541. box-shadow: var(--shadow-popover);
  542. clip-path: inset(var(--header-height) 0 -100px 0);
  543. transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  544. }
  545. [data-transparent-color-scheme='top']:hover,
  546. [data-transparent-color-scheme='top']:focus-within,
  547. [data-transparent-color-scheme='both']:hover,
  548. [data-transparent-color-scheme='both']:focus-within {
  549. :is(.header__underlay-open, .header__underlay-closed) {
  550. --color-scheme-top-row: var(--color-background);
  551. }
  552. }
  553. [data-transparent-color-scheme='bottom']:hover,
  554. [data-transparent-color-scheme='bottom']:focus-within,
  555. [data-transparent-color-scheme='both']:hover,
  556. [data-transparent-color-scheme='both']:focus-within {
  557. :is(.header__underlay-open, .header__underlay-closed) {
  558. --color-scheme-bottom-row: var(--color-background);
  559. }
  560. }
  561. [data-submenu-overlap-bottom-row] {
  562. .header__underlay-open {
  563. background: linear-gradient(
  564. var(--color-scheme-top-row) 0 var(--top-row-height),
  565. var(--color-submenu) var(--top-row-height) 100%
  566. );
  567. }
  568. .header__row--bottom {
  569. z-index: var(--layer-lowest);
  570. }
  571. }
  572. .header__row {
  573. --color-account-icon: var(--color-foreground);
  574. position: relative;
  575. background-color: transparent;
  576. &:has(.mega-menu__list:hover),
  577. &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
  578. &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
  579. z-index: var(--layer-heightened);
  580. }
  581. }
  582. .header__row--top:not(.divider--page-width),
  583. .header__row--top.divider--page-width .header__columns,
  584. .header__row--bottom {
  585. border-bottom: var(--border-bottom-width) solid var(--color-border);
  586. }
  587. @media screen and (max-width: 749px) {
  588. .header__row--top:not(.divider--page-width),
  589. .header__row--top.divider--page-width .header__columns {
  590. border-bottom-width: var(--border-bottom-width-mobile);
  591. }
  592. }
  593. #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  594. #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
  595. border-bottom-width: var(--border-bottom-width-mobile);
  596. }
  597. .header__row.divider--page-width:not(.section--page-width) .header__columns {
  598. @media screen and (min-width: 750px) {
  599. padding-inline-start: 0;
  600. padding-inline-end: 0;
  601. margin-inline-start: var(--page-margin);
  602. margin-inline-end: var(--page-margin);
  603. }
  604. }
  605. .header__column {
  606. display: flex;
  607. align-items: center;
  608. @media screen and (max-width: 749px) {
  609. display: contents;
  610. }
  611. }
  612. .header__column--left,
  613. .header__column--center {
  614. gap: var(--gap-xl);
  615. grid-area: left;
  616. }
  617. .header__column--center {
  618. justify-content: center;
  619. grid-area: center;
  620. header-menu:only-child .overflow-menu::part(list) {
  621. justify-content: center;
  622. }
  623. }
  624. .header__column--right {
  625. gap: var(--gap-xl);
  626. justify-content: flex-end;
  627. grid-area: right;
  628. .overflow-menu::part(list) {
  629. justify-content: flex-end;
  630. }
  631. }
  632. .header__columns {
  633. --header-left: 1fr;
  634. --header-center: auto;
  635. --header-right: 1fr;
  636. --header-template-columns: var(--header-left) var(--header-center) var(--header-right);
  637. --header-mobile-bookend: 44px;
  638. display: grid;
  639. grid-template-areas: 'left center right';
  640. grid-gap: var(--gap-xl);
  641. grid-template-columns: var(--header-template-columns);
  642. &:has(.header__column--center header-menu) {
  643. --header-center: auto;
  644. --header-left: minmax(max-content, 1fr);
  645. --header-right: minmax(max-content, 1fr);
  646. }
  647. &:where(:not(:has(.header__column--center))) {
  648. @media screen and (min-width: 750px) {
  649. --header-template-columns: var(--header-left) var(--header-right);
  650. grid-template-areas: 'left right';
  651. }
  652. &:has(.header__column--right header-menu) {
  653. --header-right: auto;
  654. --header-left: minmax(max-content, 1fr);
  655. }
  656. &:has(.header__column--left header-menu) {
  657. --header-left: auto;
  658. --header-right: minmax(max-content, 1fr);
  659. }
  660. }
  661. @media screen and (max-width: 749px) {
  662. --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
  663. var(--header-mobile-bookend) var(--header-mobile-bookend);
  664. grid-template-areas: 'leftA leftB center rightA rightB';
  665. grid-column: span 3;
  666. column-gap: 0;
  667. align-items: center;
  668. padding-block: 0;
  669. padding-inline: 0 var(--padding-3xs);
  670. .header-logo {
  671. grid-area: center;
  672. }
  673. &:not(:has(header-actions)) .search-action {
  674. grid-area: leftB;
  675. }
  676. &:not(:has(shopify-account)) .search-action {
  677. grid-area: rightA;
  678. }
  679. .search-action {
  680. grid-area: leftB;
  681. }
  682. header-actions {
  683. grid-area: rightB;
  684. }
  685. }
  686. }
  687. #header-component[data-menu-style='drawer'] .header__columns {
  688. --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
  689. var(--header-mobile-bookend) var(--header-mobile-bookend);
  690. grid-template-areas: 'leftA leftB center rightA rightB';
  691. grid-column: span 3;
  692. column-gap: 0;
  693. align-items: center;
  694. padding-block: 0;
  695. padding-inline: 0 var(--padding-3xs);
  696. .header-logo {
  697. grid-area: center;
  698. }
  699. &:not(:has(header-actions)) .search-action {
  700. grid-area: leftB;
  701. }
  702. &:not(:has(shopify-account)) .search-action {
  703. grid-area: rightA;
  704. }
  705. .search-action {
  706. grid-area: leftB;
  707. }
  708. header-actions {
  709. grid-area: rightB;
  710. }
  711. }
  712. .header__columns:not(:has(.header__column)) {
  713. grid-template-columns: 1fr;
  714. }
  715. @media (hover: hover) {
  716. .header__column:has(header-menu:hover),
  717. .header__column:has(.header-actions__action:hover),
  718. .header__column:has(.header__icon--menu:hover) {
  719. header-menu:not(:hover),
  720. .header-actions__action:not(:hover),
  721. .header__icon--menu:not(:hover) {
  722. opacity: var(--opacity-subdued-text);
  723. transition: opacity var(--animation-speed) var(--animation-easing);
  724. }
  725. }
  726. }
  727. header-menu,
  728. .header-actions__action,
  729. .header__icon--menu {
  730. transition: opacity var(--animation-speed) var(--animation-easing);
  731. }
  732. .header-actions__action {
  733. --button-color: var(--color-foreground);
  734. color: var(--button-color);
  735. cursor: pointer;
  736. display: flex;
  737. justify-content: center;
  738. &:hover {
  739. --button-color: var(--color-foreground);
  740. }
  741. }
  742. .header-actions__action:not(.account-button) .svg-wrapper {
  743. height: var(--button-size);
  744. width: var(--button-size);
  745. }
  746. .header-actions__action:not(.account-button) svg {
  747. width: var(--icon-size-md);
  748. height: var(--icon-size-md);
  749. }
  750. .header:has(#Details-menu-drawer-container[open]) {
  751. contain: style;
  752. }
  753. .header.header--compact {
  754. --header-padding: var(--padding-2xs);
  755. }
  756. .header__columns {
  757. --padding-block-start: var(--header-padding);
  758. --padding-block-end: var(--header-padding);
  759. }
  760. .header:not(.header--compact) .header__row--bottom {
  761. --header-padding: var(--padding-xs);
  762. }
  763. .header--collapse-row-paddings {
  764. .header__row--top .header__columns {
  765. --padding-block-end: 0px;
  766. }
  767. .header__row--bottom .header__columns {
  768. --padding-block-start: 0px;
  769. }
  770. }
  771. .header-section:has(.header[transparent]) + .shopify-section {
  772. margin-top: var(--header-height);
  773. }
  774. main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  775. &.spacing-style,
  776. .spacing-style {
  777. --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));
  778. :is(.spacing-style, .inherit-spacing) {
  779. --section-top-offset: 0px;
  780. }
  781. }
  782. .sticky-content {
  783. margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  784. }
  785. }
  786. .header-menu .menu-list__submenu {
  787. content-visibility: auto;
  788. contain-intrinsic-size: 0px 500px;
  789. }
  790. .header-menu details[open] .menu-list__submenu,
  791. .header-menu .menu-list__submenu[data-active],
  792. .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
  793. content-visibility: visible;
  794. }
  795. @starting-style {
  796. .localization-wrapper:not([hidden]) {
  797. translate: 0 20px;
  798. opacity: 0;
  799. }
  800. }
  801. dropdown-localization-component {
  802. position: relative;
  803. background-color: transparent;
  804. }
  805. dropdown-localization-component .country-filter {
  806. position: relative;
  807. padding: 8px;
  808. }
  809. dropdown-localization-component .country-filter__input {
  810. border: none;
  811. }
  812. dropdown-localization-component .localization-form__list-item {
  813. margin-inline: 8px;
  814. }
  815. dropdown-localization-component .localization-wrapper {
  816. box-shadow: var(--shadow-popover);
  817. border: var(--style-border-popover);
  818. background-color: var(--color-background);
  819. max-height: 27.5rem;
  820. position: absolute;
  821. top: calc(100% + 10px);
  822. z-index: calc(var(--layer-header-menu) + 1);
  823. }
  824. dropdown-localization-component .localization-wrapper.right-bound {
  825. right: 0;
  826. left: unset;
  827. }
  828. dropdown-localization-component .localization-wrapper.left-bound {
  829. left: -8px;
  830. right: unset;
  831. }
  832. dropdown-localization-component .language-selector.language-selector {
  833. padding: 10px 8px 10px 16px;
  834. }
  835. dropdown-localization-component .localization-form__currency {
  836. width: max-content;
  837. opacity: 0;
  838. visibility: hidden;
  839. transition: none;
  840. }
  841. dropdown-localization-component .localization-form__select:hover {
  842. background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  843. }
  844. dropdown-localization-component
  845. :is(
  846. .localization-form__list-item:hover,
  847. .localization-form__list-item[aria-selected='true'],
  848. .localization-form__list-item[aria-current='true']
  849. )
  850. .localization-form__currency {
  851. opacity: 1;
  852. color: var(--color-foreground-muted);
  853. transition: opacity var(--animation-speed-slow) var(--animation-easing);
  854. visibility: visible;
  855. }
  856. .dropdown-localization .language-selector:where(:not(.top-shadow)) {
  857. font-weight: var(--menu-top-level-font-weight);
  858. }
  859. .dropdown-localization:not(dropdown-localization-component) .language-selector {
  860. font-family: var(--menu-localization-font);
  861. font-size: var(--menu-localization-font-size);
  862. }
  863. @media screen and (min-width: 750px) {
  864. .header__columns:has(.header__column--right .mgr-custom-search-wrapper) {
  865. --header-left: auto !important;
  866. --header-right: 1fr !important;
  867. grid-template-columns: auto 1fr auto !important;
  868. }
  869. .header__column--right {
  870. display: flex !important;
  871. width: 100% !important;
  872. gap: var(--gap-xl);
  873. }
  874. .mgr-custom-search-wrapper {
  875. flex: 1 1 auto !important;
  876. max-width: 750px !important;
  877. margin-right: auto !important;
  878. }
  879. .desktop-only-search.predictive-search {
  880. width: 100% !important;
  881. min-width: 200px !important;
  882. }
  883. }
  884.  
  885. {% endstylesheet %}
  886. {% unless request.design_mode %}
  887. <script type="module">
  888. import { hydrate } from '@theme/section-hydration';
  889. const url = new URL(window.location.href);
  890. url.searchParams.delete('page');
  891. hydrate('{{ section.id }}', url);
  892. </script>
  893. {% endunless %}
  894. {% schema %}
  895. {
  896. "name": "t:names.header",
  897. "tag": "header",
  898. "class": "header-section",
  899. "settings": [
  900. {
  901. "type": "header",
  902. "content": "t:content.logo"
  903. },
  904. {
  905. "type": "select",
  906. "id": "logo_position",
  907. "label": "t:settings.position",
  908. "options": [
  909. {
  910. "value": "left",
  911. "label": "t:options.left"
  912. },
  913. {
  914. "value": "center",
  915. "label": "t:options.center"
  916. },
  917. {
  918. "value": "right",
  919. "label": "t:options.right"
  920. }
  921. ],
  922. "default": "center"
  923. },
  924. {
  925. "type": "header",
  926. "content": "t:content.menu"
  927. },
  928. {
  929. "type": "select",
  930. "id": "menu_position",
  931. "label": "t:settings.position",
  932. "options": [
  933. {
  934. "value": "left",
  935. "label": "t:options.left"
  936. },
  937. {
  938. "value": "center",
  939. "label": "t:options.center"
  940. },
  941. {
  942. "value": "right",
  943. "label": "t:options.right"
  944. }
  945. ],
  946. "default": "left"
  947. },
  948. {
  949. "type": "select",
  950. "id": "menu_row",
  951. "label": "t:settings.row",
  952. "options": [
  953. {
  954. "value": "top",
  955. "label": "t:options.top"
  956. },
  957. {
  958. "value": "bottom",
  959. "label": "t:options.bottom"
  960. }
  961. ],
  962. "default": "top"
  963. },
  964. {
  965. "type": "header",
  966. "content": "t:content.customer_account"
  967. },
  968. {
  969. "type": "paragraph",
  970. "content": "t:content.manage_customer_accounts"
  971. },
  972. {
  973. "type": "link_list",
  974. "id": "customer_account_menu",
  975. "label": "t:settings.menu",
  976. "default": "customer-account-main-menu"
  977. },
  978. {
  979. "type": "header",
  980. "content": "t:content.search"
  981. },
  982. {
  983. "type": "checkbox",
  984. "id": "show_search",
  985. "label": "t:settings.search_icon",
  986. "default": true
  987. },
  988. {
  989. "type": "select",
  990. "id": "search_position",
  991. "label": "t:settings.search_position",
  992. "options": [
  993. {
  994. "value": "left",
  995. "label": "t:options.left"
  996. },
  997. {
  998. "value": "right",
  999. "label": "t:options.right"
  1000. }
  1001. ],
  1002. "default": "right",
  1003. "visible_if": "{{ section.settings.show_search }}"
  1004. },
  1005. {
  1006. "type": "select",
  1007. "id": "search_row",
  1008. "label": "t:settings.search_row",
  1009. "options": [
  1010. {
  1011. "value": "top",
  1012. "label": "t:options.top"
  1013. },
  1014. {
  1015. "value": "bottom",
  1016. "label": "t:options.bottom"
  1017. }
  1018. ],
  1019. "default": "top",
  1020. "visible_if": "{{ section.settings.show_search }}"
  1021. },
  1022. {
  1023. "type": "header",
  1024. "content": "t:content.localization"
  1025. },
  1026. {
  1027. "type": "checkbox",
  1028. "id": "show_country",
  1029. "label": "t:settings.country_region",
  1030. "info": "t:info.manage_countries_regions",
  1031. "default": true
  1032. },
  1033. {
  1034. "type": "checkbox",
  1035. "id": "country_selector_style",
  1036. "label": "t:settings.flag",
  1037. "default": true,
  1038. "visible_if": "{{ section.settings.show_country }}"
  1039. },
  1040. {
  1041. "type": "checkbox",
  1042. "id": "show_language",
  1043. "label": "t:settings.language_selector",
  1044. "info": "t:info.manage_languages",
  1045. "default": true
  1046. },
  1047. {
  1048. "type": "select",
  1049. "id": "localization_font",
  1050. "label": "t:settings.font",
  1051. "options": [
  1052. {
  1053. "value": "heading",
  1054. "label": "t:options.heading"
  1055. },
  1056. {
  1057. "value": "subheading",
  1058. "label": "t:options.subheading"
  1059. },
  1060. {
  1061. "value": "body",
  1062. "label": "t:options.body"
  1063. },
  1064. {
  1065. "value": "accent",
  1066. "label": "t:options.accent"
  1067. }
  1068. ],
  1069. "default": "heading",
  1070. "visible_if": "{{ section.settings.show_country or section.settings.show_language }}"
  1071. },
  1072. {
  1073. "type": "select",
  1074. "id": "localization_font_size",
  1075. "label": "t:settings.size",
  1076. "options": [
  1077. {
  1078. "value": "0.625rem",
  1079. "label": "10px"
  1080. },
  1081. {
  1082. "value": "0.75rem",
  1083. "label": "12px"
  1084. },
  1085. {
  1086. "value": "0.875rem",
  1087. "label": "14px"
  1088. },
  1089. {
  1090. "value": "1rem",
  1091. "label": "16px"
  1092. },
  1093. {
  1094. "value": "1.125rem",
  1095. "label": "18px"
  1096. }
  1097. ],
  1098. "default": "1rem"
  1099. },
  1100. {
  1101. "type": "select",
  1102. "id": "localization_position",
  1103. "label": "t:settings.position",
  1104. "options": [
  1105. {
  1106. "value": "left",
  1107. "label": "t:options.left"
  1108. },
  1109. {
  1110. "value": "right",
  1111. "label": "t:options.right"
  1112. }
  1113. ],
  1114. "default": "right",
  1115. "visible_if": "{{ section.settings.show_country or section.settings.show_language }}"
  1116. },
  1117. {
  1118. "type": "select",
  1119. "id": "localization_row",
  1120. "label": "t:settings.row",
  1121. "options": [
  1122. {
  1123. "value": "top",
  1124. "label": "t:options.top"
  1125. },
  1126. {
  1127. "value": "bottom",
  1128. "label": "t:options.bottom"
  1129. }
  1130. ],
  1131. "default": "top",
  1132. "visible_if": "{{ section.settings.show_country or section.settings.show_language }}"
  1133. },
  1134. {
  1135. "type": "header",
  1136. "content": "t:content.appearance"
  1137. },
  1138. {
  1139. "type": "select",
  1140. "id": "section_width",
  1141. "label": "t:settings.width",
  1142. "options": [
  1143. {
  1144. "value": "page-width",
  1145. "label": "t:options.page"
  1146. },
  1147. {
  1148. "value": "full-width",
  1149. "label": "t:options.full"
  1150. }
  1151. ]
  1152. },
  1153. {
  1154. "type": "select",
  1155. "id": "section_height",
  1156. "label": "t:settings.height",
  1157. "options": [
  1158. {
  1159. "value": "compact",
  1160. "label": "t:options.compact"
  1161. },
  1162. {
  1163. "value": "standard",
  1164. "label": "t:options.standard"
  1165. }
  1166. ],
  1167. "default": "standard"
  1168. },
  1169. {
  1170. "type": "select",
  1171. "id": "enable_sticky_header",
  1172. "label": "t:settings.sticky_header",
  1173. "options": [
  1174. {
  1175. "value": "always",
  1176. "label": "t:options.always"
  1177. },
  1178. {
  1179. "value": "scroll-up",
  1180. "label": "t:options.on_scroll_up"
  1181. },
  1182. {
  1183. "value": "never",
  1184. "label": "t:options.never"
  1185. }
  1186. ],
  1187. "default": "always"
  1188. },
  1189. {
  1190. "type": "range",
  1191. "id": "divider_width",
  1192. "label": "t:settings.divider_thickness",
  1193. "min": 0,
  1194. "max": 5,
  1195. "step": 0.5,
  1196. "unit": "px",
  1197. "default": 0,
  1198. "visible_if": "{{ section.settings.menu_row == 'bottom' or section.settings.localization_row == 'bottom' or section.settings.search_row == 'bottom' }}"
  1199. },
  1200. {
  1201. "type": "select",
  1202. "id": "divider_size",
  1203. "label": "t:settings.divider_width",
  1204. "options": [
  1205. {
  1206. "value": "page-width",
  1207. "label": "t:options.page"
  1208. },
  1209. {
  1210. "value": "full-width",
  1211. "label": "t:options.full"
  1212. }
  1213. ],
  1214. "visible_if": "{{ section.settings.divider_width > 0 and section.settings.menu_row == 'bottom' or section.settings.localization_row == 'bottom' or section.settings.search_row == 'bottom' }}"
  1215. },
  1216. {
  1217. "type": "range",
  1218. "id": "border_width",
  1219. "label": "t:settings.border_width",
  1220. "min": 0,
  1221. "max": 5,
  1222. "step": 0.5,
  1223. "unit": "px",
  1224. "default": 0
  1225. },
  1226. {
  1227. "type": "header",
  1228. "content": "t:content.utilities"
  1229. },
  1230. {
  1231. "type": "select",
  1232. "id": "actions_display_style",
  1233. "label": "t:settings.actions_display_style",
  1234. "info": "t:info.actions_display_style",
  1235. "options": [
  1236. {
  1237. "value": "icon",
  1238. "label": "t:options.icons"
  1239. },
  1240. {
  1241. "value": "text",
  1242. "label": "t:options.text"
  1243. }
  1244. ],
  1245. "default": "icon"
  1246. },
  1247. {
  1248. "type": "select",
  1249. "id": "actions_font_size",
  1250. "label": "t:settings.size",
  1251. "options": [
  1252. {
  1253. "value": "0.75rem",
  1254. "label": "12px"
  1255. },
  1256. {
  1257. "value": "0.875rem",
  1258. "label": "14px"
  1259. },
  1260. {
  1261. "value": "1rem",
  1262. "label": "16px"
  1263. },
  1264. {
  1265. "value": "1.125rem",
  1266. "label": "18px"
  1267. }
  1268. ],
  1269. "default": "0.875rem",
  1270. "visible_if": "{{ section.settings.actions_display_style == 'text' }}"
  1271. },
  1272. {
  1273. "type": "select",
  1274. "id": "actions_font",
  1275. "label": "t:settings.font",
  1276. "options": [
  1277. {
  1278. "value": "heading",
  1279. "label": "t:options.heading"
  1280. },
  1281. {
  1282. "value": "subheading",
  1283. "label": "t:options.subheading"
  1284. },
  1285. {
  1286. "value": "body",
  1287. "label": "t:options.body"
  1288. },
  1289. {
  1290. "value": "accent",
  1291. "label": "t:options.accent"
  1292. }
  1293. ],
  1294. "default": "body",
  1295. "visible_if": "{{ section.settings.actions_display_style == 'text' }}"
  1296. },
  1297. {
  1298. "type": "select",
  1299. "id": "actions_text_case",
  1300. "label": "t:settings.case",
  1301. "options": [
  1302. {
  1303. "value": "none",
  1304. "label": "t:options.default"
  1305. },
  1306. {
  1307. "value": "uppercase",
  1308. "label": "t:options.uppercase"
  1309. }
  1310. ],
  1311. "default": "none",
  1312. "visible_if": "{{ section.settings.actions_display_style == 'text' }}"
  1313. },
  1314. {
  1315. "type": "header",
  1316. "content": "t:content.colors"
  1317. },
  1318. {
  1319. "type": "color_scheme",
  1320. "id": "color_scheme_top",
  1321. "label": "t:settings.default",
  1322. "default": "primary"
  1323. },
  1324. {
  1325. "type": "color_scheme",
  1326. "id": "color_scheme_bottom",
  1327. "label": "t:settings.bottom_row",
  1328. "default": "primary",
  1329. "visible_if": "{{ section.settings.menu_row == 'bottom' or section.settings.localization_row == 'bottom' or section.settings.search_row == 'bottom' }}"
  1330. },
  1331. {
  1332. "type": "color_scheme",
  1333. "id": "color_scheme_transparent",
  1334. "label": "t:settings.inverse",
  1335. "default": "primary",
  1336. "visible_if": "{{ section.settings.enable_transparent_header_home or section.settings.enable_transparent_header_product or section.settings.enable_transparent_header_collection }}"
  1337. },
  1338. {
  1339. "type": "header",
  1340. "content": "t:content.home_page"
  1341. },
  1342. {
  1343. "type": "checkbox",
  1344. "id": "enable_transparent_header_home",
  1345. "label": "t:settings.transparent_background",
  1346. "default": false
  1347. },
  1348. {
  1349. "type": "select",
  1350. "id": "home_color_scheme",
  1351. "label": "t:settings.color_scheme",
  1352. "options": [
  1353. {
  1354. "value": "default",
  1355. "label": "t:options.default"
  1356. },
  1357. {
  1358. "value": "inverse",
  1359. "label": "t:options.inverse"
  1360. }
  1361. ],
  1362. "default": "default",
  1363. "visible_if": "{{ section.settings.enable_transparent_header_home }}"
  1364. },
  1365. {
  1366. "type": "header",
  1367. "content": "t:content.product_page"
  1368. },
  1369. {
  1370. "type": "checkbox",
  1371. "id": "enable_transparent_header_product",
  1372. "label": "t:settings.transparent_background",
  1373. "default": false
  1374. },
  1375. {
  1376. "type": "select",
  1377. "id": "product_color_scheme",
  1378. "label": "t:settings.color_scheme",
  1379. "options": [
  1380. {
  1381. "value": "default",
  1382. "label": "t:options.default"
  1383. },
  1384. {
  1385. "value": "inverse",
  1386. "label": "t:options.inverse"
  1387. }
  1388. ],
  1389. "default": "default",
  1390. "visible_if": "{{ section.settings.enable_transparent_header_product }}"
  1391. },
  1392. {
  1393. "type": "header",
  1394. "content": "t:content.collection_page"
  1395. },
  1396. {
  1397. "type": "checkbox",
  1398. "id": "enable_transparent_header_collection",
  1399. "label": "t:settings.transparent_background",
  1400. "default": false
  1401. },
  1402. {
  1403. "type": "select",
  1404. "id": "collection_color_scheme",
  1405. "label": "t:settings.color_scheme",
  1406. "options": [
  1407. {
  1408. "value": "default",
  1409. "label": "t:options.default"
  1410. },
  1411. {
  1412. "value": "inverse",
  1413. "label": "t:options.inverse"
  1414. }
  1415. ],
  1416. "default": "default",
  1417. "visible_if": "{{ section.settings.enable_transparent_header_collection }}"
  1418. }
  1419. ],
  1420. "presets": []
  1421. }
  1422. {% endschema %}
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!