There are a million topics on how to turn of express payment options on the check out page, but none of them seems to work for me. Using the Refresh theme v9.0.0
Please help, these buttons are real conversion killer for us.
Tried to remove a couple of lines of code from liquid.footer but that doesn’t work anymore, apparently.
Watched al kind of YouTube video’s but they are all out dated.
Hello there,
To disable express payment options on the checkout page in the Refresh theme v9.0.0, you can follow these steps:
1.From your Shopify admin, go to “Online Store” and click on “Themes.”
2.Locate the Refresh theme and click on “Actions” → “Edit code.”
3.In the left sidebar, under “Sections,” click on “checkout.liquid” to open the checkout section file.
4.Find the following code:
{{ content_for_layout }}
5.Replace it with the following code:
{% unless checkout.enable_payment_button %}
{{ content_for_layout }}
{% endunless %}
6.Save the changes.
This modification will disable the express payment buttons on the checkout page. It checks if the enable_payment_button variable is set to false in the checkout settings, and if so, it won’t render the payment buttons.
Please note that modifying the theme code requires some technical knowledge, and it’s always recommended to create a backup of your theme before making any changes.
Thanks for your help.
However, I don’t see “checkout.liquid” under sections.
Hello there,
I apologize for the confusion. In the Refresh theme, the checkout section is not directly accessible from the “Sections” folder. Instead, you can disable express payment options on the checkout page by following these steps:
1.From your Shopify admin, go to “Online Store” and click on “Themes.”
2.Locate the Refresh theme and click on “Actions” → “Edit code.”
3.In the left sidebar, click on “Assets” to open the assets folder.
4.Find and click on the file named “theme.js” or “theme.min.js” to open it.
5.Search for the following code block:
enablePaymentButtons: function () {
if (window.Shopify && Shopify.StorefrontExpressButtons) {
Shopify.StorefrontExpressButtons.initialize();
}
},
6.Comment out or delete this code block by adding “//” at the beginning of each line or removing the entire block.
7.Save the changes.
By commenting out or deleting the code responsible for initializing the express payment buttons, you will effectively disable them on the checkout page.
Again, I recommend creating a backup of your theme or making the changes on a duplicate theme to avoid any potential issues.
Unfortuntely, no theme.js / theme.min.js
Hello there,
Could you please send me a screenshot of the Asset folder js file?
Hello there,
you can search for global.js
Yes, this is the content
function getFocusableElements(container) {
return Array.from(
container.querySelectorAll(
"summary, a[href], button:enabled, [tabindex]:not([tabindex^='-']), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe"
)
);
}
document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
summary.setAttribute('role', 'button');
summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open'));
if(summary.nextElementSibling.getAttribute('id')) {
summary.setAttribute('aria-controls', summary.nextElementSibling.id);
}
summary.addEventListener('click', (event) => {
event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
});
if (summary.closest('header-drawer')) return;
summary.parentElement.addEventListener('keyup', onKeyUpEscape);
});
const trapFocusHandlers = {};
function trapFocus(container, elementToFocus = container) {
var elements = getFocusableElements(container);
var first = elements[0];
var last = elements[elements.length - 1];
removeTrapFocus();
trapFocusHandlers.focusin = (event) => {
if (
event.target !== container &&
event.target !== last &&
event.target !== first
)
return;
document.addEventListener('keydown', trapFocusHandlers.keydown);
};
trapFocusHandlers.focusout = function() {
document.removeEventListener('keydown', trapFocusHandlers.keydown);
};
trapFocusHandlers.keydown = function(event) {
if (event.code.toUpperCase() !== 'TAB') return; // If not TAB key
// On the last focusable element and tab forward, focus the first element.
if (event.target === last && !event.shiftKey) {
event.preventDefault();
first.focus();
}
// On the first focusable element and tab backward, focus the last element.
if (
(event.target === container || event.target === first) &&
event.shiftKey
) {
event.preventDefault();
last.focus();
}
};
document.addEventListener('focusout', trapFocusHandlers.focusout);
document.addEventListener('focusin', trapFocusHandlers.focusin);
elementToFocus.focus();
if (elementToFocus.tagName === 'INPUT' &&
['search', 'text', 'email', 'url'].includes(elementToFocus.type) &&
elementToFocus.value) {
elementToFocus.setSelectionRange(0, elementToFocus.value.length);
}
}
// Here run the querySelector to figure out if the browser supports :focus-visible or not and run code based on it.
try {
document.querySelector(":focus-visible");
} catch(e) {
focusVisiblePolyfill();
}
function focusVisiblePolyfill() {
const navKeys = ['ARROWUP', 'ARROWDOWN', 'ARROWLEFT', 'ARROWRIGHT', 'TAB', 'ENTER', 'SPACE', 'ESCAPE', 'HOME', 'END', 'PAGEUP', 'PAGEDOWN']
let currentFocusedElement = null;
let mouseClick = null;
window.addEventListener('keydown', (event) => {
if(navKeys.includes(event.code.toUpperCase())) {
mouseClick = false;
}
});
window.addEventListener('mousedown', (event) => {
mouseClick = true;
});
window.addEventListener('focus', () => {
if (currentFocusedElement) currentFocusedElement.classList.remove('focused');
if (mouseClick) return;
currentFocusedElement = document.activeElement;
currentFocusedElement.classList.add('focused');
}, true);
}
function pauseAllMedia() {
document.querySelectorAll('.js-youtube').forEach((video) => {
video.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
});
document.querySelectorAll('.js-vimeo').forEach((video) => {
video.contentWindow.postMessage('{"method":"pause"}', '*');
});
document.querySelectorAll('video').forEach((video) => video.pause());
document.querySelectorAll('product-model').forEach((model) => {
if (model.modelViewerUI) model.modelViewerUI.pause();
});
}
function removeTrapFocus(elementToFocus = null) {
document.removeEventListener('focusin', trapFocusHandlers.focusin);
document.removeEventListener('focusout', trapFocusHandlers.focusout);
document.removeEventListener('keydown', trapFocusHandlers.keydown);
if (elementToFocus) elementToFocus.focus();
}
function onKeyUpEscape(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;
const openDetailsElement = event.target.closest('details[open]');
if (!openDetailsElement) return;
const summaryElement = openDetailsElement.querySelector('summary');
openDetailsElement.removeAttribute('open');
summaryElement.setAttribute('aria-expanded', false);
summaryElement.focus();
}
class QuantityInput extends HTMLElement {
constructor() {
super();
this.input = this.querySelector('input');
this.changeEvent = new Event('change', { bubbles: true });
this.input.addEventListener('change', this.onInputChange.bind(this));
this.querySelectorAll('button').forEach(
(button) => button.addEventListener('click', this.onButtonClick.bind(this))
);
}
quantityUpdateUnsubscriber = undefined;
connectedCallback() {
this.validateQtyRules();
this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this));
}
disconnectedCallback() {
if (this.quantityUpdateUnsubscriber) {
this.quantityUpdateUnsubscriber();
}
}
onInputChange(event) {
this.validateQtyRules();
}
onButtonClick(event) {
event.preventDefault();
const previousValue = this.input.value;
event.target.name === 'plus' ? this.input.stepUp() : this.input.stepDown();
if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent);
}
validateQtyRules() {
const value = parseInt(this.input.value);
if (this.input.min) {
const min = parseInt(this.input.min);
const buttonMinus = this.querySelector(".quantity__button[name='minus']");
buttonMinus.classList.toggle('disabled', value <= min);
}
if (this.input.max) {
const max = parseInt(this.input.max);
const buttonPlus = this.querySelector(".quantity__button[name='plus']");
buttonPlus.classList.toggle('disabled', value >= max);
}
}
}
customElements.define('quantity-input', QuantityInput);
function debounce(fn, wait) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}
function fetchConfig(type = 'json') {
return {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': `application/${type}` }
};
}
/*
* Shopify Common JS
*
*/
if ((typeof window.Shopify) == 'undefined') {
window.Shopify = {};
}
Shopify.bind = function(fn, scope) {
return function() {
return fn.apply(scope, arguments);
}
};
Shopify.setSelectorByValue = function(selector, value) {
for (var i = 0, count = selector.options.length; i < count; i++) {
var option = selector.options[i];
if (value == option.value || value == option.innerHTML) {
selector.selectedIndex = i;
return i;
}
}
};
Shopify.addListener = function(target, eventName, callback) {
target.addEventListener ? target.addEventListener(eventName, callback, false) : target.attachEvent('on'+eventName, callback);
};
Shopify.postLink = function(path, options) {
options = options || {};
var method = options['method'] || 'post';
var params = options['parameters'] || {};
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
};
Shopify.CountryProvinceSelector = function(country_domid, province_domid, options) {
this.countryEl = document.getElementById(country_domid);
this.provinceEl = document.getElementById(province_domid);
this.provinceContainer = document.getElementById(options['hideElement'] || province_domid);
Shopify.addListener(this.countryEl, 'change', Shopify.bind(this.countryHandler,this));
this.initCountry();
this.initProvince();
};
Shopify.CountryProvinceSelector.prototype = {
initCountry: function() {
var value = this.countryEl.getAttribute('data-default');
Shopify.setSelectorByValue(this.countryEl, value);
this.countryHandler();
},
initProvince: function() {
var value = this.provinceEl.getAttribute('data-default');
if (value && this.provinceEl.options.length > 0) {
Shopify.setSelectorByValue(this.provinceEl, value);
}
},
countryHandler: function(e) {
var opt = this.countryEl.options[this.countryEl.selectedIndex];
var raw = opt.getAttribute('data-provinces');
var provinces = JSON.parse(raw);
this.clearOptions(this.provinceEl);
if (provinces && provinces.length == 0) {
this.provinceContainer.style.display = 'none';
} else {
for (var i = 0; i < provinces.length; i++) {
var opt = document.createElement('option');
opt.value = provinces[i][0];
opt.innerHTML = provinces[i][1];
this.provinceEl.appendChild(opt);
}
this.provinceContainer.style.display = "";
}
},
clearOptions: function(selector) {
while (selector.firstChild) {
selector.removeChild(selector.firstChild);
}
},
setOptions: function(selector, values) {
for (var i = 0, count = values.length; i < values.length; i++) {
var opt = document.createElement('option');
opt.value = values[i];
opt.innerHTML = values[i];
selector.appendChild(opt);
}
}
};
class MenuDrawer extends HTMLElement {
constructor() {
super();
this.mainDetailsToggle = this.querySelector('details');
this.addEventListener('keyup', this.onKeyUp.bind(this));
this.addEventListener('focusout', this.onFocusOut.bind(this));
this.bindEvents();
}
bindEvents() {
this.querySelectorAll('summary').forEach(summary => summary.addEventListener('click', this.onSummaryClick.bind(this)));
this.querySelectorAll('button:not(.localization-selector)').forEach(button => button.addEventListener('click', this.onCloseButtonClick.bind(this)));
}
onKeyUp(event) {
if(event.code.toUpperCase() !== 'ESCAPE') return;
const openDetailsElement = event.target.closest('details[open]');
if(!openDetailsElement) return;
openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector('summary')) : this.closeSubmenu(openDetailsElement);
}
onSummaryClick(event) {
const summaryElement = event.currentTarget;
const detailsElement = summaryElement.parentNode;
const parentMenuElement = detailsElement.closest('.has-submenu');
const isOpen = detailsElement.hasAttribute('open');
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
function addTrapFocus() {
trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector('button'));
summaryElement.nextElementSibling.removeEventListener('transitionend', addTrapFocus);
}
if (detailsElement === this.mainDetailsToggle) {
if(isOpen) event.preventDefault();
isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement);
if (window.matchMedia('(max-width: 990px)')) {
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
}
} else {
setTimeout(() => {
detailsElement.classList.add('menu-opening');
summaryElement.setAttribute('aria-expanded', true);
parentMenuElement && parentMenuElement.classList.add('submenu-open');
!reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus);
}, 100);
}
}
openMenuDrawer(summaryElement) {
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus = false) {
if (event === undefined) return;
this.mainDetailsToggle.classList.remove('menu-opening');
this.mainDetailsToggle.querySelectorAll('details').forEach(details => {
details.removeAttribute('open');
details.classList.remove('menu-opening');
});
this.mainDetailsToggle.querySelectorAll('.submenu-open').forEach(submenu => {
submenu.classList.remove('submenu-open');
});
document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`);
removeTrapFocus(elementToFocus);
this.closeAnimation(this.mainDetailsToggle);
}
onFocusOut() {
setTimeout(() => {
if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement)) this.closeMenuDrawer();
});
}
onCloseButtonClick(event) {
const detailsElement = event.currentTarget.closest('details');
this.closeSubmenu(detailsElement);
}
closeSubmenu(detailsElement) {
const parentMenuElement = detailsElement.closest('.submenu-open');
parentMenuElement && parentMenuElement.classList.remove('submenu-open');
detailsElement.classList.remove('menu-opening');
detailsElement.querySelector('summary').setAttribute('aria-expanded', false);
removeTrapFocus(detailsElement.querySelector('summary'));
this.closeAnimation(detailsElement);
}
closeAnimation(detailsElement) {
let animationStart;
const handleAnimation = (time) => {
if (animationStart === undefined) {
animationStart = time;
}
const elapsedTime = time - animationStart;
if (elapsedTime < 400) {
window.requestAnimationFrame(handleAnimation);
} else {
detailsElement.removeAttribute('open');
if (detailsElement.closest('details[open]')) {
trapFocus(detailsElement.closest('details[open]'), detailsElement.querySelector('summary'));
}
}
}
window.requestAnimationFrame(handleAnimation);
}
}
customElements.define('menu-drawer', MenuDrawer);
class HeaderDrawer extends MenuDrawer {
constructor() {
super();
}
openMenuDrawer(summaryElement) {
this.header = this.header || document.querySelector('.section-header');
this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`);
this.header.classList.add('menu-open');
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
window.addEventListener('resize', this.onResize);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus) {
if (!elementToFocus) return;
super.closeMenuDrawer(event, elementToFocus);
this.header.classList.remove('menu-open');
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
this.header && document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`);
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
};
}
customElements.define('header-drawer', HeaderDrawer);
class ModalDialog extends HTMLElement {
constructor() {
super();
this.querySelector('[id^="ModalClose-"]').addEventListener(
'click',
this.hide.bind(this, false)
);
this.addEventListener('keyup', (event) => {
if (event.code.toUpperCase() === 'ESCAPE') this.hide();
});
if (this.classList.contains('media-modal')) {
this.addEventListener('pointerup', (event) => {
if (event.pointerType === 'mouse' && !event.target.closest('deferred-media, product-model')) this.hide();
});
} else {
this.addEventListener('click', (event) => {
if (event.target === this) this.hide();
});
}
}
connectedCallback() {
if (this.moved) return;
this.moved = true;
document.body.appendChild(this);
}
show(opener) {
this.openedBy = opener;
const popup = this.querySelector('.template-popup');
document.body.classList.add('overflow-hidden');
this.setAttribute('open', '');
if (popup) popup.loadContent();
trapFocus(this, this.querySelector('[role="dialog"]'));
window.pauseAllMedia();
}
hide() {
document.body.classList.remove('overflow-hidden');
document.body.dispatchEvent(new CustomEvent('modalClosed'));
this.removeAttribute('open');
removeTrapFocus(this.openedBy);
window.pauseAllMedia();
}
}
customElements.define('modal-dialog', ModalDialog);
class ModalOpener extends HTMLElement {
constructor() {
super();
const button = this.querySelector('button');
if (!button) return;
button.addEventListener('click', () => {
const modal = document.querySelector(this.getAttribute('data-modal'));
if (modal) modal.show(button);
});
}
}
customElements.define('modal-opener', ModalOpener);
class DeferredMedia extends HTMLElement {
constructor() {
super();
const poster = this.querySelector('[id^="Deferred-Poster-"]');
if (!poster) return;
poster.addEventListener('click', this.loadContent.bind(this));
}
loadContent(focus = true) {
window.pauseAllMedia();
if (!this.getAttribute('loaded')) {
const content = document.createElement('div');
content.appendChild(this.querySelector('template').content.firstElementChild.cloneNode(true));
this.setAttribute('loaded', true);
const deferredElement = this.appendChild(content.querySelector('video, model-viewer, iframe'));
if (focus) deferredElement.focus();
if (deferredElement.nodeName == 'VIDEO' && deferredElement.getAttribute('autoplay')) {
// force autoplay for safari
deferredElement.play();
}
}
}
}
customElements.define('deferred-media', DeferredMedia);
class SliderComponent extends HTMLElement {
constructor() {
super();
this.slider = this.querySelector('[id^="Slider-"]');
this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
this.enableSliderLooping = false;
this.currentPageElement = this.querySelector('.slider-counter--current');
this.pageTotalElement = this.querySelector('.slider-counter--total');
this.prevButton = this.querySelector('button[name="previous"]');
this.nextButton = this.querySelector('button[name="next"]');
if (!this.slider || !this.nextButton) return;
this.initPages();
const resizeObserver = new ResizeObserver(entries => this.initPages());
resizeObserver.observe(this.slider);
this.slider.addEventListener('scroll', this.update.bind(this));
this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
}
initPages() {
this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
if (this.sliderItemsToShow.length < 2) return;
this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft;
this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset);
this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
this.update();
}
resetPages() {
this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
this.initPages();
}
update() {
// Temporarily prevents unneeded updates resulting from variant changes
// This should be refactored as part of https://github.com/Shopify/dawn/issues/2057
if (!this.slider || !this.nextButton) return;
const previousPage = this.currentPage;
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1;
if (this.currentPageElement && this.pageTotalElement) {
this.currentPageElement.textContent = this.currentPage;
this.pageTotalElement.textContent = this.totalPages;
}
if (this.currentPage != previousPage) {
this.dispatchEvent(new CustomEvent('slideChanged', { detail: {
currentPage: this.currentPage,
currentElement: this.sliderItemsToShow[this.currentPage - 1]
}}));
}
if (this.enableSliderLooping) return;
if (this.isSlideVisible(this.sliderItemsToShow[0]) && this.slider.scrollLeft === 0) {
this.prevButton.setAttribute('disabled', 'disabled');
} else {
this.prevButton.removeAttribute('disabled');
}
if (this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1])) {
this.nextButton.setAttribute('disabled', 'disabled');
} else {
this.nextButton.removeAttribute('disabled');
}
}
isSlideVisible(element, offset = 0) {
const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset;
return (element.offsetLeft + element.clientWidth) <= lastVisibleSlide && element.offsetLeft >= this.slider.scrollLeft;
}
onButtonClick(event) {
event.preventDefault();
const step = event.currentTarget.dataset.step || 1;
this.slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (step * this.sliderItemOffset) : this.slider.scrollLeft - (step * this.sliderItemOffset);
this.slider.scrollTo({
left: this.slideScrollPosition
});
}
}
customElements.define('slider-component', SliderComponent);
class SlideshowComponent extends SliderComponent {
constructor() {
super();
this.sliderControlWrapper = this.querySelector('.slider-buttons');
this.enableSliderLooping = true;
if (!this.sliderControlWrapper) return;
this.sliderFirstItemNode = this.slider.querySelector('.slideshow__slide');
if (this.sliderItemsToShow.length > 0) this.currentPage = 1;
this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.slider-counter__link'));
this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));
this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this));
this.setSlideVisibility();
if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
}
setAutoPlay() {
this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay');
this.autoplaySpeed = this.slider.dataset.speed * 1000;
this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this));
this.addEventListener('mouseover', this.focusInHandling.bind(this));
this.addEventListener('mouseleave', this.focusOutHandling.bind(this));
this.addEventListener('focusin', this.focusInHandling.bind(this));
this.addEventListener('focusout', this.focusOutHandling.bind(this));
this.play();
this.autoplayButtonIsSetToPlay = true;
}
onButtonClick(event) {
super.onButtonClick(event);
const isFirstSlide = this.currentPage === 1;
const isLastSlide = this.currentPage === this.sliderItemsToShow.length;
if (!isFirstSlide && !isLastSlide) return;
if (isFirstSlide && event.currentTarget.name === 'previous') {
this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length;
} else if (isLastSlide && event.currentTarget.name === 'next') {
this.slideScrollPosition = 0;
}
this.slider.scrollTo({
left: this.slideScrollPosition
});
}
update() {
super.update();
this.sliderControlButtons = this.querySelectorAll('.slider-counter__link');
this.prevButton.removeAttribute('disabled');
if (!this.sliderControlButtons.length) return;
this.sliderControlButtons.forEach(link => {
link.classList.remove('slider-counter__link--active');
link.removeAttribute('aria-current');
});
this.sliderControlButtons[this.currentPage - 1].classList.add('slider-counter__link--active');
this.sliderControlButtons[this.currentPage - 1].setAttribute('aria-current', true);
}
autoPlayToggle() {
this.togglePlayButtonState(this.autoplayButtonIsSetToPlay);
this.autoplayButtonIsSetToPlay ? this.pause() : this.play();
this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay;
}
focusOutHandling(event) {
const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
this.play();
}
focusInHandling(event) {
const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
this.play();
} else if (this.autoplayButtonIsSetToPlay) {
this.pause();
}
}
play() {
this.slider.setAttribute('aria-live', 'off');
clearInterval(this.autoplay);
this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed);
}
pause() {
this.slider.setAttribute('aria-live', 'polite');
clearInterval(this.autoplay);
}
togglePlayButtonState(pauseAutoplay) {
if (pauseAutoplay) {
this.sliderAutoplayButton.classList.add('slideshow__autoplay--paused');
this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.playSlideshow);
} else {
this.sliderAutoplayButton.classList.remove('slideshow__autoplay--paused');
this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.pauseSlideshow);
}
}
autoRotateSlides() {
const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.slider.querySelector('.slideshow__slide').clientWidth;
this.slider.scrollTo({
left: slideScrollPosition
});
}
setSlideVisibility() {
this.sliderItemsToShow.forEach((item, index) => {
const linkElements = item.querySelectorAll('a');
if (index === this.currentPage - 1) {
if (linkElements.length) linkElements.forEach(button => {
button.removeAttribute('tabindex');
});
item.setAttribute('aria-hidden', 'false');
item.removeAttribute('tabindex');
} else {
if (linkElements.length) linkElements.forEach(button => {
button.setAttribute('tabindex', '-1');
});
item.setAttribute('aria-hidden', 'true');
item.setAttribute('tabindex', '-1');
}
});
}
linkToSlide(event) {
event.preventDefault();
const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
this.slider.scrollTo({
left: slideScrollPosition
});
}
}
customElements.define('slideshow-component', SlideshowComponent);
class VariantSelects extends HTMLElement {
constructor() {
super();
this.addEventListener('change', this.onVariantChange);
}
onVariantChange() {
this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, '', false);
this.updatePickupAvailability();
this.removeErrorMessage();
this.updateVariantStatuses();
if (!this.currentVariant) {
this.toggleAddButton(true, '', true);
this.setUnavailable();
} else {
this.updateMedia();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
this.updateShareUrl();
}
}
updateOptions() {
this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
}
updateMasterId() {
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options.map((option, index) => {
return this.options[index] === option;
}).includes(false);
});
}
updateMedia() {
if (!this.currentVariant) return;
if (!this.currentVariant.featured_media) return;
const mediaGalleries = document.querySelectorAll(`[id^="MediaGallery-${this.dataset.section}"]`);
mediaGalleries.forEach(mediaGallery => mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true));
const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
if (!modalContent) return;
const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`);
modalContent.prepend(newMediaModal);
}
updateURL() {
if (!this.currentVariant || this.dataset.updateUrl === 'false') return;
window.history.replaceState({ }, '', `${this.dataset.url}?variant=${this.currentVariant.id}`);
}
updateShareUrl() {
const shareButton = document.getElementById(`Share-${this.dataset.section}`);
if (!shareButton || !shareButton.updateUrl) return;
shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`);
}
updateVariantInput() {
const productForms = document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`);
productForms.forEach((productForm) => {
const input = productForm.querySelector('input[name="id"]');
input.value = this.currentVariant.id;
input.dispatchEvent(new Event('change', { bubbles: true }));
});
}
updateVariantStatuses() {
const selectedOptionOneVariants = this.variantData.filter(variant => this.querySelector(':checked').value === variant.option1);
const inputWrappers = [...this.querySelectorAll('.product-form__input')];
inputWrappers.forEach((option, index) => {
if (index === 0) return;
const optionInputs = [...option.querySelectorAll('input[type="radio"], option')]
const previousOptionSelected = inputWrappers[index - 1].querySelector(':checked').value;
const availableOptionInputsValue = selectedOptionOneVariants.filter(variant => variant.available && variant[`option${ index }`] === previousOptionSelected).map(variantOption => variantOption[`option${ index + 1 }`]);
this.setInputAvailability(optionInputs, availableOptionInputsValue)
});
}
setInputAvailability(listOfOptions, listOfAvailableOptions) {
listOfOptions.forEach(input => {
if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
input.innerText = input.getAttribute('value');
} else {
input.innerText = window.variantStrings.unavailable_with_option.replace('[value]', input.getAttribute('value'));
}
});
}
updatePickupAvailability() {
const pickUpAvailability = document.querySelector('pickup-availability');
if (!pickUpAvailability) return;
if (this.currentVariant && this.currentVariant.available) {
pickUpAvailability.fetchAvailability(this.currentVariant.id);
} else {
pickUpAvailability.removeAttribute('available');
pickUpAvailability.innerHTML = '';
}
}
removeErrorMessage() {
const section = this.closest('section');
if (!section) return;
const productForm = section.querySelector('product-form');
if (productForm) productForm.handleErrorMessage();
}
renderProductInfo() {
const requestedVariantId = this.currentVariant.id;
const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
fetch(`${this.dataset.url}?variant=${requestedVariantId}§ion_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
.then((response) => response.text())
.then((responseText) => {
// prevent unnecessary ui changes from abandoned selections
if (this.currentVariant.id !== requestedVariantId) return;
const html = new DOMParser().parseFromString(responseText, 'text/html')
const destination = document.getElementById(`price-${this.dataset.section}`);
const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
const skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
const skuDestination = document.getElementById(`Sku-${this.dataset.section}`);
const inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
const inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`);
if (source && destination) destination.innerHTML = source.innerHTML;
if (inventorySource && inventoryDestination) inventoryDestination.innerHTML = inventorySource.innerHTML;
if (skuSource && skuDestination) {
skuDestination.innerHTML = skuSource.innerHTML;
skuDestination.classList.toggle('visibility-hidden', skuSource.classList.contains('visibility-hidden'));
}
const price = document.getElementById(`price-${this.dataset.section}`);
if (price) price.classList.remove('visibility-hidden');
if (inventoryDestination) inventoryDestination.classList.toggle('visibility-hidden', inventorySource.innerText === '');
const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`);
this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute('disabled') : true, window.variantStrings.soldOut);
publish(PUB_SUB_EVENTS.variantChange, {data: {
sectionId,
html,
variant: this.currentVariant
}});
});
}
toggleAddButton(disable = true, text, modifyClass = true) {
const productForm = document.getElementById(`product-form-${this.dataset.section}`);
if (!productForm) return;
const addButton = productForm.querySelector('[name="add"]');
const addButtonText = productForm.querySelector('[name="add"] > span');
if (!addButton) return;
if (disable) {
addButton.setAttribute('disabled', 'disabled');
if (text) addButtonText.textContent = text;
} else {
addButton.removeAttribute('disabled');
addButtonText.textContent = window.variantStrings.addToCart;
}
if (!modifyClass) return;
}
setUnavailable() {
const button = document.getElementById(`product-form-${this.dataset.section}`);
const addButton = button.querySelector('[name="add"]');
const addButtonText = button.querySelector('[name="add"] > span');
const price = document.getElementById(`price-${this.dataset.section}`);
const inventory = document.getElementById(`Inventory-${this.dataset.section}`);
const sku = document.getElementById(`Sku-${this.dataset.section}`);
if (!addButton) return;
addButtonText.textContent = window.variantStrings.unavailable;
if (price) price.classList.add('visibility-hidden');
if (inventory) inventory.classList.add('visibility-hidden');
if (sku) sku.classList.add('visibility-hidden');
}
getVariantData() {
this.variantData = this.variantData || JSON.parse(this.querySelector('[type="application/json"]').textContent);
return this.variantData;
}
}
customElements.define('variant-selects', VariantSelects);
class VariantRadios extends VariantSelects {
constructor() {
super();
}
setInputAvailability(listOfOptions, listOfAvailableOptions) {
listOfOptions.forEach(input => {
if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
input.classList.remove('disabled');
} else {
input.classList.add('disabled');
}
});
}
updateOptions() {
const fieldsets = Array.from(this.querySelectorAll('fieldset'));
this.options = fieldsets.map((fieldset) => {
return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
});
}
}
customElements.define('variant-radios', VariantRadios);
class ProductRecommendations extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const handleIntersection = (entries, observer) => {
if (!entries[0].isIntersecting) return;
observer.unobserve(this);
fetch(this.dataset.url)
.then(response => response.text())
.then(text => {
const html = document.createElement('div');
html.innerHTML = text;
const recommendations = html.querySelector('product-recommendations');
if (recommendations && recommendations.innerHTML.trim().length) {
this.innerHTML = recommendations.innerHTML;
}
if (!this.querySelector('slideshow-component') && this.classList.contains('complementary-products')) {
this.remove();
}
if (html.querySelector('.grid__item')) {
this.classList.add('product-recommendations--loaded');
}
})
.catch(e => {
console.error(e);
});
}
new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 400px 0px'}).observe(this);
}
}
customElements.define('product-recommendations', ProductRecommendations);
Yes, this is the content
function getFocusableElements(container) {
return Array.from(
container.querySelectorAll(
"summary, a[href], button:enabled, [tabindex]:not([tabindex^='-']), [draggable], area, input:not([type=hidden]):enabled, select:enabled, textarea:enabled, object, iframe"
)
);
}
document.querySelectorAll('[id^="Details-"] summary').forEach((summary) => {
summary.setAttribute('role', 'button');
summary.setAttribute('aria-expanded', summary.parentNode.hasAttribute('open'));
if(summary.nextElementSibling.getAttribute('id')) {
summary.setAttribute('aria-controls', summary.nextElementSibling.id);
}
summary.addEventListener('click', (event) => {
event.currentTarget.setAttribute('aria-expanded', !event.currentTarget.closest('details').hasAttribute('open'));
});
if (summary.closest('header-drawer')) return;
summary.parentElement.addEventListener('keyup', onKeyUpEscape);
});
const trapFocusHandlers = {};
function trapFocus(container, elementToFocus = container) {
var elements = getFocusableElements(container);
var first = elements[0];
var last = elements[elements.length - 1];
removeTrapFocus();
trapFocusHandlers.focusin = (event) => {
if (
event.target !== container &&
event.target !== last &&
event.target !== first
)
return;
document.addEventListener('keydown', trapFocusHandlers.keydown);
};
trapFocusHandlers.focusout = function() {
document.removeEventListener('keydown', trapFocusHandlers.keydown);
};
trapFocusHandlers.keydown = function(event) {
if (event.code.toUpperCase() !== 'TAB') return; // If not TAB key
// On the last focusable element and tab forward, focus the first element.
if (event.target === last && !event.shiftKey) {
event.preventDefault();
first.focus();
}
// On the first focusable element and tab backward, focus the last element.
if (
(event.target === container || event.target === first) &&
event.shiftKey
) {
event.preventDefault();
last.focus();
}
};
document.addEventListener('focusout', trapFocusHandlers.focusout);
document.addEventListener('focusin', trapFocusHandlers.focusin);
elementToFocus.focus();
if (elementToFocus.tagName === 'INPUT' &&
['search', 'text', 'email', 'url'].includes(elementToFocus.type) &&
elementToFocus.value) {
elementToFocus.setSelectionRange(0, elementToFocus.value.length);
}
}
// Here run the querySelector to figure out if the browser supports :focus-visible or not and run code based on it.
try {
document.querySelector(":focus-visible");
} catch(e) {
focusVisiblePolyfill();
}
function focusVisiblePolyfill() {
const navKeys = ['ARROWUP', 'ARROWDOWN', 'ARROWLEFT', 'ARROWRIGHT', 'TAB', 'ENTER', 'SPACE', 'ESCAPE', 'HOME', 'END', 'PAGEUP', 'PAGEDOWN']
let currentFocusedElement = null;
let mouseClick = null;
window.addEventListener('keydown', (event) => {
if(navKeys.includes(event.code.toUpperCase())) {
mouseClick = false;
}
});
window.addEventListener('mousedown', (event) => {
mouseClick = true;
});
window.addEventListener('focus', () => {
if (currentFocusedElement) currentFocusedElement.classList.remove('focused');
if (mouseClick) return;
currentFocusedElement = document.activeElement;
currentFocusedElement.classList.add('focused');
}, true);
}
function pauseAllMedia() {
document.querySelectorAll('.js-youtube').forEach((video) => {
video.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
});
document.querySelectorAll('.js-vimeo').forEach((video) => {
video.contentWindow.postMessage('{"method":"pause"}', '*');
});
document.querySelectorAll('video').forEach((video) => video.pause());
document.querySelectorAll('product-model').forEach((model) => {
if (model.modelViewerUI) model.modelViewerUI.pause();
});
}
function removeTrapFocus(elementToFocus = null) {
document.removeEventListener('focusin', trapFocusHandlers.focusin);
document.removeEventListener('focusout', trapFocusHandlers.focusout);
document.removeEventListener('keydown', trapFocusHandlers.keydown);
if (elementToFocus) elementToFocus.focus();
}
function onKeyUpEscape(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;
const openDetailsElement = event.target.closest('details[open]');
if (!openDetailsElement) return;
const summaryElement = openDetailsElement.querySelector('summary');
openDetailsElement.removeAttribute('open');
summaryElement.setAttribute('aria-expanded', false);
summaryElement.focus();
}
class QuantityInput extends HTMLElement {
constructor() {
super();
this.input = this.querySelector('input');
this.changeEvent = new Event('change', { bubbles: true });
this.input.addEventListener('change', this.onInputChange.bind(this));
this.querySelectorAll('button').forEach(
(button) => button.addEventListener('click', this.onButtonClick.bind(this))
);
}
quantityUpdateUnsubscriber = undefined;
connectedCallback() {
this.validateQtyRules();
this.quantityUpdateUnsubscriber = subscribe(PUB_SUB_EVENTS.quantityUpdate, this.validateQtyRules.bind(this));
}
disconnectedCallback() {
if (this.quantityUpdateUnsubscriber) {
this.quantityUpdateUnsubscriber();
}
}
onInputChange(event) {
this.validateQtyRules();
}
onButtonClick(event) {
event.preventDefault();
const previousValue = this.input.value;
event.target.name === 'plus' ? this.input.stepUp() : this.input.stepDown();
if (previousValue !== this.input.value) this.input.dispatchEvent(this.changeEvent);
}
validateQtyRules() {
const value = parseInt(this.input.value);
if (this.input.min) {
const min = parseInt(this.input.min);
const buttonMinus = this.querySelector(".quantity__button[name='minus']");
buttonMinus.classList.toggle('disabled', value <= min);
}
if (this.input.max) {
const max = parseInt(this.input.max);
const buttonPlus = this.querySelector(".quantity__button[name='plus']");
buttonPlus.classList.toggle('disabled', value >= max);
}
}
}
customElements.define('quantity-input', QuantityInput);
function debounce(fn, wait) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}
function fetchConfig(type = 'json') {
return {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'Accept': `application/${type}` }
};
}
/*
* Shopify Common JS
*
*/
if ((typeof window.Shopify) == 'undefined') {
window.Shopify = {};
}
Shopify.bind = function(fn, scope) {
return function() {
return fn.apply(scope, arguments);
}
};
Shopify.setSelectorByValue = function(selector, value) {
for (var i = 0, count = selector.options.length; i < count; i++) {
var option = selector.options[i];
if (value == option.value || value == option.innerHTML) {
selector.selectedIndex = i;
return i;
}
}
};
Shopify.addListener = function(target, eventName, callback) {
target.addEventListener ? target.addEventListener(eventName, callback, false) : target.attachEvent('on'+eventName, callback);
};
Shopify.postLink = function(path, options) {
options = options || {};
var method = options['method'] || 'post';
var params = options['parameters'] || {};
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
};
Shopify.CountryProvinceSelector = function(country_domid, province_domid, options) {
this.countryEl = document.getElementById(country_domid);
this.provinceEl = document.getElementById(province_domid);
this.provinceContainer = document.getElementById(options['hideElement'] || province_domid);
Shopify.addListener(this.countryEl, 'change', Shopify.bind(this.countryHandler,this));
this.initCountry();
this.initProvince();
};
Shopify.CountryProvinceSelector.prototype = {
initCountry: function() {
var value = this.countryEl.getAttribute('data-default');
Shopify.setSelectorByValue(this.countryEl, value);
this.countryHandler();
},
initProvince: function() {
var value = this.provinceEl.getAttribute('data-default');
if (value && this.provinceEl.options.length > 0) {
Shopify.setSelectorByValue(this.provinceEl, value);
}
},
countryHandler: function(e) {
var opt = this.countryEl.options[this.countryEl.selectedIndex];
var raw = opt.getAttribute('data-provinces');
var provinces = JSON.parse(raw);
this.clearOptions(this.provinceEl);
if (provinces && provinces.length == 0) {
this.provinceContainer.style.display = 'none';
} else {
for (var i = 0; i < provinces.length; i++) {
var opt = document.createElement('option');
opt.value = provinces[i][0];
opt.innerHTML = provinces[i][1];
this.provinceEl.appendChild(opt);
}
this.provinceContainer.style.display = "";
}
},
clearOptions: function(selector) {
while (selector.firstChild) {
selector.removeChild(selector.firstChild);
}
},
setOptions: function(selector, values) {
for (var i = 0, count = values.length; i < values.length; i++) {
var opt = document.createElement('option');
opt.value = values[i];
opt.innerHTML = values[i];
selector.appendChild(opt);
}
}
};
class MenuDrawer extends HTMLElement {
constructor() {
super();
this.mainDetailsToggle = this.querySelector('details');
this.addEventListener('keyup', this.onKeyUp.bind(this));
this.addEventListener('focusout', this.onFocusOut.bind(this));
this.bindEvents();
}
bindEvents() {
this.querySelectorAll('summary').forEach(summary => summary.addEventListener('click', this.onSummaryClick.bind(this)));
this.querySelectorAll('button:not(.localization-selector)').forEach(button => button.addEventListener('click', this.onCloseButtonClick.bind(this)));
}
onKeyUp(event) {
if(event.code.toUpperCase() !== 'ESCAPE') return;
const openDetailsElement = event.target.closest('details[open]');
if(!openDetailsElement) return;
openDetailsElement === this.mainDetailsToggle ? this.closeMenuDrawer(event, this.mainDetailsToggle.querySelector('summary')) : this.closeSubmenu(openDetailsElement);
}
onSummaryClick(event) {
const summaryElement = event.currentTarget;
const detailsElement = summaryElement.parentNode;
const parentMenuElement = detailsElement.closest('.has-submenu');
const isOpen = detailsElement.hasAttribute('open');
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
function addTrapFocus() {
trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector('button'));
summaryElement.nextElementSibling.removeEventListener('transitionend', addTrapFocus);
}
if (detailsElement === this.mainDetailsToggle) {
if(isOpen) event.preventDefault();
isOpen ? this.closeMenuDrawer(event, summaryElement) : this.openMenuDrawer(summaryElement);
if (window.matchMedia('(max-width: 990px)')) {
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
}
} else {
setTimeout(() => {
detailsElement.classList.add('menu-opening');
summaryElement.setAttribute('aria-expanded', true);
parentMenuElement && parentMenuElement.classList.add('submenu-open');
!reducedMotion || reducedMotion.matches ? addTrapFocus() : summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus);
}, 100);
}
}
openMenuDrawer(summaryElement) {
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus = false) {
if (event === undefined) return;
this.mainDetailsToggle.classList.remove('menu-opening');
this.mainDetailsToggle.querySelectorAll('details').forEach(details => {
details.removeAttribute('open');
details.classList.remove('menu-opening');
});
this.mainDetailsToggle.querySelectorAll('.submenu-open').forEach(submenu => {
submenu.classList.remove('submenu-open');
});
document.body.classList.remove(`overflow-hidden-${this.dataset.breakpoint}`);
removeTrapFocus(elementToFocus);
this.closeAnimation(this.mainDetailsToggle);
}
onFocusOut() {
setTimeout(() => {
if (this.mainDetailsToggle.hasAttribute('open') && !this.mainDetailsToggle.contains(document.activeElement)) this.closeMenuDrawer();
});
}
onCloseButtonClick(event) {
const detailsElement = event.currentTarget.closest('details');
this.closeSubmenu(detailsElement);
}
closeSubmenu(detailsElement) {
const parentMenuElement = detailsElement.closest('.submenu-open');
parentMenuElement && parentMenuElement.classList.remove('submenu-open');
detailsElement.classList.remove('menu-opening');
detailsElement.querySelector('summary').setAttribute('aria-expanded', false);
removeTrapFocus(detailsElement.querySelector('summary'));
this.closeAnimation(detailsElement);
}
closeAnimation(detailsElement) {
let animationStart;
const handleAnimation = (time) => {
if (animationStart === undefined) {
animationStart = time;
}
const elapsedTime = time - animationStart;
if (elapsedTime < 400) {
window.requestAnimationFrame(handleAnimation);
} else {
detailsElement.removeAttribute('open');
if (detailsElement.closest('details[open]')) {
trapFocus(detailsElement.closest('details[open]'), detailsElement.querySelector('summary'));
}
}
}
window.requestAnimationFrame(handleAnimation);
}
}
customElements.define('menu-drawer', MenuDrawer);
class HeaderDrawer extends MenuDrawer {
constructor() {
super();
}
openMenuDrawer(summaryElement) {
this.header = this.header || document.querySelector('.section-header');
this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`);
this.header.classList.add('menu-open');
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
window.addEventListener('resize', this.onResize);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus) {
if (!elementToFocus) return;
super.closeMenuDrawer(event, elementToFocus);
this.header.classList.remove('menu-open');
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
this.header && document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`);
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
};
}
customElements.define('header-drawer', HeaderDrawer);
class ModalDialog extends HTMLElement {
constructor() {
super();
this.querySelector('[id^="ModalClose-"]').addEventListener(
'click',
this.hide.bind(this, false)
);
this.addEventListener('keyup', (event) => {
if (event.code.toUpperCase() === 'ESCAPE') this.hide();
});
if (this.classList.contains('media-modal')) {
this.addEventListener('pointerup', (event) => {
if (event.pointerType === 'mouse' && !event.target.closest('deferred-media, product-model')) this.hide();
});
} else {
this.addEventListener('click', (event) => {
if (event.target === this) this.hide();
});
}
}
connectedCallback() {
if (this.moved) return;
this.moved = true;
document.body.appendChild(this);
}
show(opener) {
this.openedBy = opener;
const popup = this.querySelector('.template-popup');
document.body.classList.add('overflow-hidden');
this.setAttribute('open', '');
if (popup) popup.loadContent();
trapFocus(this, this.querySelector('[role="dialog"]'));
window.pauseAllMedia();
}
hide() {
document.body.classList.remove('overflow-hidden');
document.body.dispatchEvent(new CustomEvent('modalClosed'));
this.removeAttribute('open');
removeTrapFocus(this.openedBy);
window.pauseAllMedia();
}
}
customElements.define('modal-dialog', ModalDialog);
class ModalOpener extends HTMLElement {
constructor() {
super();
const button = this.querySelector('button');
if (!button) return;
button.addEventListener('click', () => {
const modal = document.querySelector(this.getAttribute('data-modal'));
if (modal) modal.show(button);
});
}
}
customElements.define('modal-opener', ModalOpener);
class DeferredMedia extends HTMLElement {
constructor() {
super();
const poster = this.querySelector('[id^="Deferred-Poster-"]');
if (!poster) return;
poster.addEventListener('click', this.loadContent.bind(this));
}
loadContent(focus = true) {
window.pauseAllMedia();
if (!this.getAttribute('loaded')) {
const content = document.createElement('div');
content.appendChild(this.querySelector('template').content.firstElementChild.cloneNode(true));
this.setAttribute('loaded', true);
const deferredElement = this.appendChild(content.querySelector('video, model-viewer, iframe'));
if (focus) deferredElement.focus();
if (deferredElement.nodeName == 'VIDEO' && deferredElement.getAttribute('autoplay')) {
// force autoplay for safari
deferredElement.play();
}
}
}
}
customElements.define('deferred-media', DeferredMedia);
class SliderComponent extends HTMLElement {
constructor() {
super();
this.slider = this.querySelector('[id^="Slider-"]');
this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
this.enableSliderLooping = false;
this.currentPageElement = this.querySelector('.slider-counter--current');
this.pageTotalElement = this.querySelector('.slider-counter--total');
this.prevButton = this.querySelector('button[name="previous"]');
this.nextButton = this.querySelector('button[name="next"]');
if (!this.slider || !this.nextButton) return;
this.initPages();
const resizeObserver = new ResizeObserver(entries => this.initPages());
resizeObserver.observe(this.slider);
this.slider.addEventListener('scroll', this.update.bind(this));
this.prevButton.addEventListener('click', this.onButtonClick.bind(this));
this.nextButton.addEventListener('click', this.onButtonClick.bind(this));
}
initPages() {
this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
if (this.sliderItemsToShow.length < 2) return;
this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft;
this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset);
this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
this.update();
}
resetPages() {
this.sliderItems = this.querySelectorAll('[id^="Slide-"]');
this.initPages();
}
update() {
// Temporarily prevents unneeded updates resulting from variant changes
// This should be refactored as part of https://github.com/Shopify/dawn/issues/2057
if (!this.slider || !this.nextButton) return;
const previousPage = this.currentPage;
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItemOffset) + 1;
if (this.currentPageElement && this.pageTotalElement) {
this.currentPageElement.textContent = this.currentPage;
this.pageTotalElement.textContent = this.totalPages;
}
if (this.currentPage != previousPage) {
this.dispatchEvent(new CustomEvent('slideChanged', { detail: {
currentPage: this.currentPage,
currentElement: this.sliderItemsToShow[this.currentPage - 1]
}}));
}
if (this.enableSliderLooping) return;
if (this.isSlideVisible(this.sliderItemsToShow[0]) && this.slider.scrollLeft === 0) {
this.prevButton.setAttribute('disabled', 'disabled');
} else {
this.prevButton.removeAttribute('disabled');
}
if (this.isSlideVisible(this.sliderItemsToShow[this.sliderItemsToShow.length - 1])) {
this.nextButton.setAttribute('disabled', 'disabled');
} else {
this.nextButton.removeAttribute('disabled');
}
}
isSlideVisible(element, offset = 0) {
const lastVisibleSlide = this.slider.clientWidth + this.slider.scrollLeft - offset;
return (element.offsetLeft + element.clientWidth) <= lastVisibleSlide && element.offsetLeft >= this.slider.scrollLeft;
}
onButtonClick(event) {
event.preventDefault();
const step = event.currentTarget.dataset.step || 1;
this.slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + (step * this.sliderItemOffset) : this.slider.scrollLeft - (step * this.sliderItemOffset);
this.slider.scrollTo({
left: this.slideScrollPosition
});
}
}
customElements.define('slider-component', SliderComponent);
class SlideshowComponent extends SliderComponent {
constructor() {
super();
this.sliderControlWrapper = this.querySelector('.slider-buttons');
this.enableSliderLooping = true;
if (!this.sliderControlWrapper) return;
this.sliderFirstItemNode = this.slider.querySelector('.slideshow__slide');
if (this.sliderItemsToShow.length > 0) this.currentPage = 1;
this.sliderControlLinksArray = Array.from(this.sliderControlWrapper.querySelectorAll('.slider-counter__link'));
this.sliderControlLinksArray.forEach(link => link.addEventListener('click', this.linkToSlide.bind(this)));
this.slider.addEventListener('scroll', this.setSlideVisibility.bind(this));
this.setSlideVisibility();
if (this.slider.getAttribute('data-autoplay') === 'true') this.setAutoPlay();
}
setAutoPlay() {
this.sliderAutoplayButton = this.querySelector('.slideshow__autoplay');
this.autoplaySpeed = this.slider.dataset.speed * 1000;
this.sliderAutoplayButton.addEventListener('click', this.autoPlayToggle.bind(this));
this.addEventListener('mouseover', this.focusInHandling.bind(this));
this.addEventListener('mouseleave', this.focusOutHandling.bind(this));
this.addEventListener('focusin', this.focusInHandling.bind(this));
this.addEventListener('focusout', this.focusOutHandling.bind(this));
this.play();
this.autoplayButtonIsSetToPlay = true;
}
onButtonClick(event) {
super.onButtonClick(event);
const isFirstSlide = this.currentPage === 1;
const isLastSlide = this.currentPage === this.sliderItemsToShow.length;
if (!isFirstSlide && !isLastSlide) return;
if (isFirstSlide && event.currentTarget.name === 'previous') {
this.slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * this.sliderItemsToShow.length;
} else if (isLastSlide && event.currentTarget.name === 'next') {
this.slideScrollPosition = 0;
}
this.slider.scrollTo({
left: this.slideScrollPosition
});
}
update() {
super.update();
this.sliderControlButtons = this.querySelectorAll('.slider-counter__link');
this.prevButton.removeAttribute('disabled');
if (!this.sliderControlButtons.length) return;
this.sliderControlButtons.forEach(link => {
link.classList.remove('slider-counter__link--active');
link.removeAttribute('aria-current');
});
this.sliderControlButtons[this.currentPage - 1].classList.add('slider-counter__link--active');
this.sliderControlButtons[this.currentPage - 1].setAttribute('aria-current', true);
}
autoPlayToggle() {
this.togglePlayButtonState(this.autoplayButtonIsSetToPlay);
this.autoplayButtonIsSetToPlay ? this.pause() : this.play();
this.autoplayButtonIsSetToPlay = !this.autoplayButtonIsSetToPlay;
}
focusOutHandling(event) {
const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
if (!this.autoplayButtonIsSetToPlay || focusedOnAutoplayButton) return;
this.play();
}
focusInHandling(event) {
const focusedOnAutoplayButton = event.target === this.sliderAutoplayButton || this.sliderAutoplayButton.contains(event.target);
if (focusedOnAutoplayButton && this.autoplayButtonIsSetToPlay) {
this.play();
} else if (this.autoplayButtonIsSetToPlay) {
this.pause();
}
}
play() {
this.slider.setAttribute('aria-live', 'off');
clearInterval(this.autoplay);
this.autoplay = setInterval(this.autoRotateSlides.bind(this), this.autoplaySpeed);
}
pause() {
this.slider.setAttribute('aria-live', 'polite');
clearInterval(this.autoplay);
}
togglePlayButtonState(pauseAutoplay) {
if (pauseAutoplay) {
this.sliderAutoplayButton.classList.add('slideshow__autoplay--paused');
this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.playSlideshow);
} else {
this.sliderAutoplayButton.classList.remove('slideshow__autoplay--paused');
this.sliderAutoplayButton.setAttribute('aria-label', window.accessibilityStrings.pauseSlideshow);
}
}
autoRotateSlides() {
const slideScrollPosition = this.currentPage === this.sliderItems.length ? 0 : this.slider.scrollLeft + this.slider.querySelector('.slideshow__slide').clientWidth;
this.slider.scrollTo({
left: slideScrollPosition
});
}
setSlideVisibility() {
this.sliderItemsToShow.forEach((item, index) => {
const linkElements = item.querySelectorAll('a');
if (index === this.currentPage - 1) {
if (linkElements.length) linkElements.forEach(button => {
button.removeAttribute('tabindex');
});
item.setAttribute('aria-hidden', 'false');
item.removeAttribute('tabindex');
} else {
if (linkElements.length) linkElements.forEach(button => {
button.setAttribute('tabindex', '-1');
});
item.setAttribute('aria-hidden', 'true');
item.setAttribute('tabindex', '-1');
}
});
}
linkToSlide(event) {
event.preventDefault();
const slideScrollPosition = this.slider.scrollLeft + this.sliderFirstItemNode.clientWidth * (this.sliderControlLinksArray.indexOf(event.currentTarget) + 1 - this.currentPage);
this.slider.scrollTo({
left: slideScrollPosition
});
}
}
customElements.define('slideshow-component', SlideshowComponent);
class VariantSelects extends HTMLElement {
constructor() {
super();
this.addEventListener('change', this.onVariantChange);
}
onVariantChange() {
this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, '', false);
this.updatePickupAvailability();
this.removeErrorMessage();
this.updateVariantStatuses();
if (!this.currentVariant) {
this.toggleAddButton(true, '', true);
this.setUnavailable();
} else {
this.updateMedia();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
this.updateShareUrl();
}
}
updateOptions() {
this.options = Array.from(this.querySelectorAll('select'), (select) => select.value);
}
updateMasterId() {
this.currentVariant = this.getVariantData().find((variant) => {
return !variant.options.map((option, index) => {
return this.options[index] === option;
}).includes(false);
});
}
updateMedia() {
if (!this.currentVariant) return;
if (!this.currentVariant.featured_media) return;
const mediaGalleries = document.querySelectorAll(`[id^="MediaGallery-${this.dataset.section}"]`);
mediaGalleries.forEach(mediaGallery => mediaGallery.setActiveMedia(`${this.dataset.section}-${this.currentVariant.featured_media.id}`, true));
const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
if (!modalContent) return;
const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`);
modalContent.prepend(newMediaModal);
}
updateURL() {
if (!this.currentVariant || this.dataset.updateUrl === 'false') return;
window.history.replaceState({ }, '', `${this.dataset.url}?variant=${this.currentVariant.id}`);
}
updateShareUrl() {
const shareButton = document.getElementById(`Share-${this.dataset.section}`);
if (!shareButton || !shareButton.updateUrl) return;
shareButton.updateUrl(`${window.shopUrl}${this.dataset.url}?variant=${this.currentVariant.id}`);
}
updateVariantInput() {
const productForms = document.querySelectorAll(`#product-form-${this.dataset.section}, #product-form-installment-${this.dataset.section}`);
productForms.forEach((productForm) => {
const input = productForm.querySelector('input[name="id"]');
input.value = this.currentVariant.id;
input.dispatchEvent(new Event('change', { bubbles: true }));
});
}
updateVariantStatuses() {
const selectedOptionOneVariants = this.variantData.filter(variant => this.querySelector(':checked').value === variant.option1);
const inputWrappers = [...this.querySelectorAll('.product-form__input')];
inputWrappers.forEach((option, index) => {
if (index === 0) return;
const optionInputs = [...option.querySelectorAll('input[type="radio"], option')]
const previousOptionSelected = inputWrappers[index - 1].querySelector(':checked').value;
const availableOptionInputsValue = selectedOptionOneVariants.filter(variant => variant.available && variant[`option${ index }`] === previousOptionSelected).map(variantOption => variantOption[`option${ index + 1 }`]);
this.setInputAvailability(optionInputs, availableOptionInputsValue)
});
}
setInputAvailability(listOfOptions, listOfAvailableOptions) {
listOfOptions.forEach(input => {
if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
input.innerText = input.getAttribute('value');
} else {
input.innerText = window.variantStrings.unavailable_with_option.replace('[value]', input.getAttribute('value'));
}
});
}
updatePickupAvailability() {
const pickUpAvailability = document.querySelector('pickup-availability');
if (!pickUpAvailability) return;
if (this.currentVariant && this.currentVariant.available) {
pickUpAvailability.fetchAvailability(this.currentVariant.id);
} else {
pickUpAvailability.removeAttribute('available');
pickUpAvailability.innerHTML = '';
}
}
removeErrorMessage() {
const section = this.closest('section');
if (!section) return;
const productForm = section.querySelector('product-form');
if (productForm) productForm.handleErrorMessage();
}
renderProductInfo() {
const requestedVariantId = this.currentVariant.id;
const sectionId = this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section;
fetch(`${this.dataset.url}?variant=${requestedVariantId}§ion_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
.then((response) => response.text())
.then((responseText) => {
// prevent unnecessary ui changes from abandoned selections
if (this.currentVariant.id !== requestedVariantId) return;
const html = new DOMParser().parseFromString(responseText, 'text/html')
const destination = document.getElementById(`price-${this.dataset.section}`);
const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
const skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
const skuDestination = document.getElementById(`Sku-${this.dataset.section}`);
const inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
const inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`);
if (source && destination) destination.innerHTML = source.innerHTML;
if (inventorySource && inventoryDestination) inventoryDestination.innerHTML = inventorySource.innerHTML;
if (skuSource && skuDestination) {
skuDestination.innerHTML = skuSource.innerHTML;
skuDestination.classList.toggle('visibility-hidden', skuSource.classList.contains('visibility-hidden'));
}
const price = document.getElementById(`price-${this.dataset.section}`);
if (price) price.classList.remove('visibility-hidden');
if (inventoryDestination) inventoryDestination.classList.toggle('visibility-hidden', inventorySource.innerText === '');
const addButtonUpdated = html.getElementById(`ProductSubmitButton-${sectionId}`);
this.toggleAddButton(addButtonUpdated ? addButtonUpdated.hasAttribute('disabled') : true, window.variantStrings.soldOut);
publish(PUB_SUB_EVENTS.variantChange, {data: {
sectionId,
html,
variant: this.currentVariant
}});
});
}
toggleAddButton(disable = true, text, modifyClass = true) {
const productForm = document.getElementById(`product-form-${this.dataset.section}`);
if (!productForm) return;
const addButton = productForm.querySelector('[name="add"]');
const addButtonText = productForm.querySelector('[name="add"] > span');
if (!addButton) return;
if (disable) {
addButton.setAttribute('disabled', 'disabled');
if (text) addButtonText.textContent = text;
} else {
addButton.removeAttribute('disabled');
addButtonText.textContent = window.variantStrings.addToCart;
}
if (!modifyClass) return;
}
setUnavailable() {
const button = document.getElementById(`product-form-${this.dataset.section}`);
const addButton = button.querySelector('[name="add"]');
const addButtonText = button.querySelector('[name="add"] > span');
const price = document.getElementById(`price-${this.dataset.section}`);
const inventory = document.getElementById(`Inventory-${this.dataset.section}`);
const sku = document.getElementById(`Sku-${this.dataset.section}`);
if (!addButton) return;
addButtonText.textContent = window.variantStrings.unavailable;
if (price) price.classList.add('visibility-hidden');
if (inventory) inventory.classList.add('visibility-hidden');
if (sku) sku.classList.add('visibility-hidden');
}
getVariantData() {
this.variantData = this.variantData || JSON.parse(this.querySelector('[type="application/json"]').textContent);
return this.variantData;
}
}
customElements.define('variant-selects', VariantSelects);
class VariantRadios extends VariantSelects {
constructor() {
super();
}
setInputAvailability(listOfOptions, listOfAvailableOptions) {
listOfOptions.forEach(input => {
if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
input.classList.remove('disabled');
} else {
input.classList.add('disabled');
}
});
}
updateOptions() {
const fieldsets = Array.from(this.querySelectorAll('fieldset'));
this.options = fieldsets.map((fieldset) => {
return Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value;
});
}
}
customElements.define('variant-radios', VariantRadios);
class ProductRecommendations extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const handleIntersection = (entries, observer) => {
if (!entries[0].isIntersecting) return;
observer.unobserve(this);
fetch(this.dataset.url)
.then(response => response.text())
.then(text => {
const html = document.createElement('div');
html.innerHTML = text;
const recommendations = html.querySelector('product-recommendations');
if (recommendations && recommendations.innerHTML.trim().length) {
this.innerHTML = recommendations.innerHTML;
}
if (!this.querySelector('slideshow-component') && this.classList.contains('complementary-products')) {
this.remove();
}
if (html.querySelector('.grid__item')) {
this.classList.add('product-recommendations--loaded');
}
})
.catch(e => {
console.error(e);
});
}
new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 400px 0px'}).observe(this);
}
}
customElements.define('product-recommendations', ProductRecommendations);
Yes, there is. But it doesn’t contain enablePaymentButtons:
I apologize for the confusion. If you cannot find the “theme.js” or “theme.min.js” file in the Refresh theme, there might be a different approach to disabling express payment options on the checkout page. Here’s an alternative method you can try:
From your Shopify admin, go to “Online Store” and click on “Themes.”
Locate the Refresh theme and click on “Actions” → “Edit code.”
In the left sidebar, click on “Layout” and open the “theme.liquid” file.
Look for the tags in the “theme.liquid” file.
Inside the tags, search for code related to express payment buttons or initialization of payment scripts.
Comment out or delete any code that initializes or enables express payment buttons. This could include code related to Shopify Storefront Express Buttons or any other payment-related scripts.
For example:
Save the changes.
By commenting out or removing the code that enables express payment buttons in the “theme.liquid” file, you should be able to disable them on the checkout page.
Please note that the specific code and location may vary depending on your theme’s customization and structure. If you’re unsure about making the changes, it’s always recommended to consult with a developer or reach out to Shopify support for further assistance.
Not much to see there…
{%- if settings.favicon != blank -%}
{%- endif -%}
{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
{%- endunless -%}
{% if page_description %}
{% endif %}
{% render 'meta-tags' %}
{{ content_for_header }}
{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}
{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}
:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};
--font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};
--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};
--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};
--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-shadow: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
--payment-terms-background-color: {{ settings.colors_background_1 }};
--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
--gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
--gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
--gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};
--media-padding: {{ settings.media_padding }}px;
--media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
--media-border-width: {{ settings.media_border_thickness }}px;
--media-radius: {{ settings.media_radius }}px;
--media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
--media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
--media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
--media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
--media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};
--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
--product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
--product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
--product-card-text-alignment: {{ settings.card_text_alignment }};
--product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
--product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
--product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
--product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;
--collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
--collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
--collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
--collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
--collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
--collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
--collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;
--blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
--blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
--blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
--blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
--blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
--blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
--blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
--blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
--blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;
--badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;
--popup-border-width: {{ settings.popup_border_thickness }}px;
--popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
--popup-corner-radius: {{ settings.popup_corner_radius }}px;
--popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
--popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
--popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
--popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;
--drawer-border-width: {{ settings.drawer_border_thickness }}px;
--drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
--drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
--drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
--drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
--drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;
--spacing-sections-desktop: {{ settings.spacing_sections }}px;
--spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;
--grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
--grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
--grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
--grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;
--text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
--text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
--text-boxes-radius: {{ settings.text_boxes_radius }}px;
--text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
--text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
--text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
--text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
--text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;
--buttons-radius: {{ settings.buttons_radius }}px;
--buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
--buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
--buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
--buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
--buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
--buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
--buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
--buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;
--inputs-radius: {{ settings.inputs_radius }}px;
--inputs-border-width: {{ settings.inputs_border_thickness }}px;
--inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
--inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
--inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
--inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
--inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
--inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
--inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;
--variant-pills-radius: {{ settings.variant_pills_radius }}px;
--variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
--variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
--variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
--variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
--variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
--variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: calc(var(--font-body-scale) * 62.5%);
height: 100%;
}
body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}
@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}
{{ 'base.css' | asset_url | stylesheet_tag }}
{%- unless settings.type_body_font.system? -%}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{%- endunless -%}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{% render 'rapid-search-settings' %}
{{ "accessibility.skip_to_text" | t }}
{%- if settings.cart_type == 'drawer' -%}
{%- render 'cart-drawer' -%}
{%- endif -%}
{% sections 'header-group' %}
{% sections 'footer-group' %}
- {{ 'accessibility.refresh_page' | t }}
- {{ 'accessibility.link_messages.new_window' | t }}
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{% render 'rps-csb' %}