Will Meyers Expanding Panels 

Enter in a BLOCK

<div data-wm-plugin="expanding-panels" class="wm-expanding-panels" data-source="/collection" panel-count="4" data-text="View More">

</div>

Will Meyers Pinned Page Nav Bar

SITE FOOTER BEFORE ANYTHING ELSE FOR PINNED PAGE

<!-- Pinned Page Nav Bar Setting -->

<script>

window.wmPinnedPageNavbarSettings = {

upperThreshold: 0, // after how many pixels scrolled should the navbar appear

lowerThreshold: 0, // how close to the bottom of th page should the navbar disappear

scrollMargin: 0, // scroll-to-section offset after when you click on a button

}

</script>

Enter in a BLOCK

<div data-wm-pinned-page-navbar>Button Title</div>

Enter in a Block to END

<div data-wm-pinned-page-navbar-end></div>

Custom CSS

div.wm-pinned-page-navbar{

--ppn-border-radius: 10px;

--ppn-background: ~'hsla(var(--black-hsl), 0.5)';

--ppn-border-style: solid;

--ppn-border-width: 0px;

--ppn-background-blur: 10px;

--ppn-shadow-opacity: 35%;

// Button Styles

--ppn-font-size: 1.2;

// Inactive Styles

--ppn-button-color: ~'hsla(var(--white-hsl), 1)';

// Active Styles

--ppn-indicator-background: ~'hsla(var(--white-hsl), 1)';

--ppn-indicator-border-style: solid;

--ppn-indicator-border-width: 0px;

--ppn-active-button-color: ~'hsla(var(--black-hsl), 1)';

// Scroll Indicator Arrows

--ppn-scroll-indicator-background: transparent;

--ppn-scroll-indicator-background-blur: 10px;

--ppn-scroll-indicator-color: ~'hsla(var(--black-hsl), 0.5)';

--ppn-scroll-indicator-size: 30px;

--ppn-scroll-indicator-border-width: 1px;

}

/* Container Styles */

div.wm-pinned-page-navbar{

--ppn-border-radius: 4px;

--ppn-background: hsla(0, 0, 0%, 0.5);

--ppn-background-blur: 10px;

--ppn-border-style: solid;

--ppn-border-width: 0px;

--ppn-border-color: currentColor;

--ppn-shadow-opacity: 15%;

}

/* Default Button Styles */

div.wm-pinned-page-navbar{

--ppn-font-size: 1.2;

--ppn-button-color: black;

--ppn-button-font-family: var(--primary-button-font-font-family);

}

/* Active Button & Indicator Styles */

div.wm-pinned-page-navbar{

--ppn-indicator-background: red;

--ppn-indicator-border-style: solid;

--ppn-indicator-border-width: 2px;

--ppn-indicator-border-color: white;

--ppn-active-button-color: white;

}

/* Container Styles */

div.wm-pinned-page-navbar{

--ppn-border-radius: 4px;

--ppn-background: hsla(0, 0, 0%, 0.5);

--ppn-background-blur: 10px;

--ppn-border-style: solid;

--ppn-border-width: 0px;

--ppn-border-color: currentColor;

--ppn-shadow-opacity: 15%;

}

Will Meyers Popup

Add the following before an HTML Link

#wm-popup=/contact

(/contact) is the link

Will Meyers Vertical Accordion

Enter in a CODE BLOCK

<div data-wm-plugin="vertical-accordions"

data-source="/your-collection-url"> </div>

Add to HTML in Code BLock

<div data-wm-plugin="vertical-accordions"

data-source="/your-collection-url"

data-count="5"

data-open="2">

</div>

Add to Custom CSS

div[data-wm-plugin="vertical-accordions"] {

--va-panel-1-background: #ead3c3;

--va-panel-2-background: #e0cbbd;

--va-panel-3-background: #c8b2a6;

--va-panel-4-background: #b59c7a;

--va-panel-5-background: #ead3c3;

}

div[data-wm-plugin="vertical-accordions"] {

--va-max-panel-height: 60vh;

}

#siteWrapper [data-wm-plugin="vertical-accordions"] .accordion-content > *, div[data-wm-plugin="vertical-accordions"] .accordion-title {

max-height: var(--va-tallest-panel-height);

}

[data-wm-plugin="vertical-accordions"] .accordion-title .text{

--va-accordion-title-font-family: inherit;

--va-accordion-title-size: 1.2em;

--va-accordion-title-text-transform: uppercase;

--va-accordion-title-letter-spacing: 0.2em;

--va-accordion-title-color: blue;

}

div[data-wm-plugin="vertical-accordions"] {

--va-border-color: black;

--va-border-width: 4px;

--va-border-radius: 20px;

}