Step 1: Create a new custom section
Add the following code in the newly created “pie-chart” custom section
{%- comment -%} Assign: Preview section js fix {%- endcomment -%}
{%- assign section_id = section.id | replace: '+', '' -%}
{%- comment -%} Color: check if color is set to transparent {%- endcomment -%}
{%- assign background_alpha = section.settings.background_color | color_extract: 'alpha' -%}
{%- comment -%} Layout: has user entered measurement value into max-width field? {%- endcomment -%}
{%- if section.settings.max_width contains 'px' or section.settings.max_width contains '%' -%}
{%- assign max_width = section.settings.max_width -%}
{%- else -%}
{%- assign max_width = section.settings.max_width | append: 'px' -%}
{%- endif -%}
{%- comment -%} Text: custom font_picker values {%- endcomment -%}
{%- capture font_settings_list -%}
{{ section.settings.main_font | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }}~
{{ section.settings.main_font | font_modify: 'style', 'italic' | font_modify: 'weight', 'bolder' | font_face: font_display: 'swap' }}
{%- endcapture -%}
{%- assign font_array = font_settings_list | split: '~' -%}
{%- comment -%} CSS {%- endcomment -%}
<style>
{%- if section.settings.override_theme_font != blank -%}
{%- for font in font_array -%}
{%- unless font contains 'error' -%}{{ font }}{%- endunless -%}
{%- endfor -%}
#WP--{{ section_id }} {
--main-font: {{ section.settings.main_font.family }}, {{ section.settings.main_font.fallback_families }};
--main-font-weight: {{ section.settings.main_font.weight }};
--main-font-style: {{ section.settings.main_font.style }};
}
{%- endif -%}
#WP--{{ section_id }} {
font-family: var(--main-font);
color: {{ section.settings.text_color }};
background: {%- if background_alpha != 0 -%}{{ section.settings.background_color }}{%- endif -%};
}
#WP--{{ section_id }} .wp-pack__pie-chart__heading {
color: {{ section.settings.text_color }};
font-size: clamp(16px, {{ section.settings.text_size | times: 0.015 }}em, 2em);
margin-bottom: 40px;
}
#WP--{{ section_id }} .wp-pack__pie-chart__info-heading {
padding-bottom: 1em;
margin: 1em 0;
font-size: {{ section.settings.text_size | times: 0.012 }}em;
}
#WP--{{ section_id }} .wp-pack__pie-chart__info-text p {
line-height: 1.4;
font-family: var(--main-font);
color: {{ section.settings.text_color }};
font-size: {{ section.settings.text_size | times: 0.01 }}em;
}
#WP--{{ section_id }} .wp-pack__pie-chart__chart {
text-align: center;
}
#WP--{{ section_id }} .wp-pack__pie-chart__arc_path {
transition: 0.3s;
cursor: pointer;
}
#WP--{{ section_id }} .wp-pack__pie-chart__arc_path:hover {
opacity: 0.6;
}
#WP--{{ section_id }} .wp-pack__grid {
grid-template-columns: 2fr 1fr;
grid-gap: 40px;
}
#WP--{{ section_id }} .wp-pack__pie-chart__inner-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
}
#WP--{{ section_id }} .wp-pack__pie-chart__legend-text {
margin: 1em 0;
font-size: {{ section.settings.text_size | times: 0.01 }}em;
}
#WP--{{ section_id }} .wp-pack__pie-chart__legend-item {
display: flex;
margin-bottom: 1em;
cursor: pointer;
align-items: center;
font-size: {{ section.settings.text_size | times: 0.008 }}em;
font-family: var(--main-font);
color: {{ section.settings.text_color }};
}
#WP--{{ section_id }} .wp-pack__pie-chart__legend-list {
padding-left: 0;
}
#WP--{{ section_id }} .wp-pack__pie-chart__legend-square {
width: {{ section.settings.text_size | times: 0.2 }}px;
height: {{ section.settings.text_size | times: 0.2 }}px;
margin-right: 10px;
display: block;
}
#WP--{{ section_id }} {
margin-top: {{ section.settings.outer_margin }}px;
margin-bottom: {{ section.settings.outer_margin }}px;
}
#WP--{{ section_id }} .wp-pack__sizer {
padding-top: {{ section.settings.inner_padding }}px;
padding-bottom: {{ section.settings.inner_padding }}px;
width: {{ section.settings.base_width }}%;
max-width: {{ max_width }};
}
{%- if section.settings.custom_css != blank -%}
{%- assign custom_section_declarations = section.settings.custom_css | split: '}' -%}
{%- for declaration in custom_section_declarations -%}
{%- if declaration contains '{' -%}
#WP--{{ section_id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
#WP--{{ section_id }} .wp-pack__grid {
grid-template-columns: 1fr 1fr;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
#WP--{{ section_id }} .wp-pack__grid {
grid-template-columns: 1fr;
grid-gap: 20px;
}
#WP--{{ section_id }} .wp-pack__pie-chart__chart {
text-align: center;
}
#WP--{{ section_id }} .wp-pack__pie-chart__inner-grid {
grid-template-columns: 1fr;
}
#WP--{{ section_id }} .wp-pack__pie-chart__legend-list {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0 10px;
}
#WP--{{ section_id }} .wp-pack__pie-chart__legend-square {
width: 20px;
height: 20px;
margin-right: 12px;
}
#WP--{{ section_id }} {
margin-top: {{ section.settings.outer_margin | divided_by: 2 }}px;
margin-bottom: {{ section.settings.outer_margin | divided_by: 2 }}px;
}
#WP--{{ section_id }} .wp-pack__sizer {
min-width: 70%;
padding-top: {{ section.settings.inner_padding | divided_by: 2 }}px;
padding-bottom: {{ section.settings.inner_padding | divided_by: 2 }}px;
}
{%- if section.settings.mobile_custom_css != blank -%}
{%- assign mobile_custom_declarations = section.settings.mobile_custom_css | split: '}' -%}
{%- for declaration in mobile_custom_declarations -%}
{%- if declaration contains '{' -%}
#WP--{{ section_id }} {{ declaration }} }
{%- endif -%}
{%- endfor -%}
{%- endif -%}
}
</style>
{%- comment -%} HTML {%- endcomment -%}
<section id="WP--{{ section_id }}" class="WP--{{ section_id }} wp-pack__pie-chart wp-pack__section">
{%- if section.settings.anchor_id != blank -%}
<div id="{{ section.settings.anchor_id | remove: '#' | handleize }}" class="wp-pack__anchor-id" style="height: 0; overflow: hidden;"></div>
{%- endif -%}
<div class="wp-pack__sizer
wp-pack__sizer--pie-chart">
<h2 class="wp-pack__pie-chart__heading">{{ section.settings.title }}</h2>
<div class="wp-pack__grid">
<div class="wp-pack__pie-chart__inner-grid">
<div class="wp-pack__pie-chart__chart">
</div>
<div class="wp-pack__pie-chart__legend">
<h3 class="wp-pack__pie-chart__legend-text">{{ section.settings.legend }}</h3>
<ul class="wp-pack__pie-chart__legend-list">
</ul>
</div>
</div>
<div class="wp-pack__pie-chart__info wp-pack__rte">
<h3 class="wp-pack__pie-chart__info-heading">{{ section.settings.instructions }}</h3>
<div class="wp-pack__pie-chart__info-text"></div>
</div>
</div>
</div>
</section>
{% schema %}
{
"name": "Pie chart",
"class": "WP__pie-chart",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Favorite Sports Percentage"
},
{
"type": "text",
"id": "legend",
"label": "Legend",
"default": "Legend"
},
{
"type": "text",
"id": "instructions",
"label": "Instructions",
"default": "Click on a slice to learn more"
},
{
"type": "range",
"id": "chart_gutter",
"label": "Chart gutter",
"min": 0,
"max": 12,
"step": 6,
"default": 6,
"unit": "px"
},
{
"type": "header",
"content": "Text appearance"
},
{
"type": "range",
"id": "text_size",
"label": "Text size",
"min": 80,
"max": 150,
"step": 5,
"default": 100,
"unit": "%"
},
{
"type": "checkbox",
"id": "override_theme_font",
"label": "Override default theme font",
"default": true
},
{
"type": "font_picker",
"id": "main_font",
"label": "Headings and text",
"default": "sans-serif"
},
{
"type": "header",
"content": "Design"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "#4B4949"
},
{
"type": "color_background",
"id": "background_color",
"label": "Background"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "base_width",
"label": "Size",
"min": 60,
"max": 100,
"step": 5,
"default": 95,
"unit": "%"
},
{
"type": "text",
"id": "max_width",
"label": "Maximum width",
"placeholder": "eg. 1200px",
"info": "Sets width constraint for content."
},
{
"type": "range",
"id": "inner_padding",
"label": "Inner padding",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 40,
"step": 5,
"unit": "px"
},
{
"type": "range",
"id": "outer_margin",
"label": "Outer margin",
"info": "Only applies to top and bottom.",
"min": 0,
"max": 100,
"default": 40,
"step": 5,
"unit": "px"
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "liquid",
"id": "custom_css",
"label": "CSS"
},
{
"type": "liquid",
"id": "mobile_custom_css",
"label": "Mobile CSS",
"info": "Applied on screens less than 480px."
},
{
"type": "text",
"id": "anchor_id",
"label": "Link anchor id",
"placeholder": "#wpd-pack-section",
"info": "Enter a unique value to jump to this section from same page using a link or button. Eg. #wpd-pack-section"
}
],
"blocks": [
{
"type": "slice",
"name": "Slice",
"settings": [
{
"type": "text",
"id": "number_value",
"label": "Number",
"default": "20"
},
{
"type": "color",
"id": "color",
"label": "Color",
"default": "#59a3a1"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "New slice"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Add more information about what you are measuring. You can add links to other pages for more details.</p>"
}
]
}
],
"presets": [
{
"name": "Pie chart",
"blocks": [
{
"type": "slice",
"settings": {
"title": "Footbal",
"number_value": "45",
"color": "#D04646",
"text": "<p>Most played game is Football <a href='https://en.wikipedia.org/wiki/football'>Wikipedia</a></p>"
}
},
{
"type": "slice",
"settings": {
"title": "Basketball",
"number_value": "45",
"color": "#FFA80A",
"text": "<p>My favorite game is basketball <a href='https://en.wikipedia.org/wiki/'>Wikipedia</a></p>"
}
},
{
"type": "slice",
"settings": {
"title": "Badminton",
"number_value": "10",
"color": "#F9DB5F",
"text": "<p>Just another game <a href='https://en.wikipedia.org/wiki/'>Wikipedia</a></p>"
}
}
]
}
]
}
{% endschema %}
<script>
// Save the original console.log function
const originalConsoleLog = console.log;
// Override console.log to suppress specific messages
console.log = function(message) {
if (message.includes("Using theme sections")) return;
originalConsoleLog.apply(console, arguments);
};
</script>
{%- comment -%} JSON Settings {%- endcomment -%}
<script type="application/json" data-wp-pack="{{ section_id }}">
{
"id": {{ section_id | json }},
"backgroundColor": {{ section.settings.background_color | json }},
"chartGutter": {{ section.settings.chart_gutter | json }},
"blocks": [
{%- for block in section.blocks -%}
{
"title": {{ block.settings.title | json }},
"value": {{ block.settings.number_value }},
"info": {{ block.settings.text | json }},
"color": {{ block.settings.color | json }}
}{%- if forloop.last == false -%}
,
{%- endif -%}
{%- endfor -%}
]
}
</script>
{%- comment -%} External scripts {%- endcomment -%}
<script data-wp-pack-external-js="{{ section_id }}" src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js" defer></script>
{%- comment -%} JavaScript {%- endcomment -%}
<script data-wp-pack-js="{{ section_id }}" type="module" defer>
(function(){
const wpDesign = {
settings: {},
load: function(section){
//------------------------------------------------------------------------------
// **** THE DATA ****
const data = this.settings.blocks;
const colors = data.map((d) => d.color);
//------------------------------------------------------------------------------
// **** THE SETUP ****
let width
let height
if(window.innerWidth > 500){
width = window.innerWidth / 4;
height = window.innerWidth / 4;
} else {
width = window.innerWidth / 2;
height = window.innerWidth / 2;
}
const radius = Math.min(width, height) / 2;
const color = d3.scaleOrdinal(colors);
const pie = d3.pie()
.value(d => d.value)
.sort(null)
const arc = d3.arc()
.innerRadius(0)
.outerRadius(radius);
//------------------------------------------------------------------------------
// **** PUT IT ON THE PAGE ****
this.svg = d3.select("#WP--{{ section_id }} .wp-pack__pie-chart__chart")
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${width / 2}, ${height / 2})`);
const path = this.svg.selectAll("path")
.data(pie(data));
// Enter new arcs
path.enter().append("path")
.attr("fill", (d, i) => color(i))
.attr("d", arc)
.attr('class', 'wp-pack__pie-chart__arc_path')
.attr("stroke", this.settings.backgroundColor)
.attr("stroke-width", `${this.settings.chartGutter}px`)
.on("click", function(e, d) {
//console.log('click', d)
d3.select('#WP--{{ section_id }} .wp-pack__pie-chart__info-text')
.html(d.data.info)
d3.select('#WP--{{ section_id }} .wp-pack__pie-chart__info-heading')
.text(d.data.title)
.style("border-bottom", `3px solid ${color(d.index)}`)
})
// --> The Legend
const legend_values = data.map((datum, i) => {
return `<li class="wp-pack__pie-chart__legend-item" data-index=${i}><div class="wp-pack__pie-chart__legend-square" style="background-color: ${color(i)}"></div> ${datum.title}</li>`
}).join(' ')
section.querySelector('.wp-pack__pie-chart__legend-list').innerHTML = legend_values
section.querySelector('.wp-pack__pie-chart__info-text').innerHTML = data[0].info
const info_title = section.querySelector('.wp-pack__pie-chart__info-heading')
info_title.innerHTML = data[0].title
info_title.style.borderBottom = `3px solid ${color(0)}`
const legendItems = section.querySelectorAll('.wp-pack__pie-chart__legend-item')
for(i = 0; i < legendItems.length; i++){
legendItems[i].addEventListener('click', function(){
//console.log('this',this.dataset)
this_index = this.dataset.index
section.querySelector('.wp-pack__pie-chart__info-text').innerHTML = data[this_index].info
const info_title = section.querySelector('.wp-pack__pie-chart__info-heading')
info_title.innerHTML = data[this_index].title
info_title.style.borderBottom = `3px solid ${color(this_index)}`
}
)}
},
unload: function(section) {
this.svg.selectAll("*").remove();
}
}
window.addEventListener('shopify:section:unload', function (e) {
const settings = document.querySelector(`[data-wp-pack="${e.detail.sectionId}"]`);
const sectionId = e.detail.sectionId;
const section = document.querySelector(`#WP--${e.detail.sectionId}`);
if (sectionId == wpDesign.settings.id){
wpDesign.unload(section);
}
});
wpDesign.settings = JSON.parse(document.querySelector('[data-wp-pack="{{ section_id }}"]').innerHTML);
const sectionId = {{ section_id | json }};
const section = document.querySelector(`#WP--${sectionId}`);
if (sectionId == wpDesign.settings.id){
wpDesign.load(section);
}
})()
</script>Step 2: Add the styles
Add the following css styles in the start of the “pie-chart” custom section
<style>
/*** Global styles ***/
[id^="WP--"] {
margin-left: auto;
margin-right: auto;
position: relative;
text-transform: unset;
letter-spacing: unset;
margin: unset;
padding: unset;
z-index: 1;
}
.wp-pack__section * {
box-sizing: border-box !important;
}
.wp-pack__section img {
max-width: 100%;
}
[class^="wp_design_-_fixed"] {
display: none;
}
.wp-pack__section h1,
.wp-pack__section h2,
.wp-pack__section h3,
.wp-pack__section h4,
.wp-pack__section h5,
.wp-pack__section h6 {
color: inherit;
text-transform: none;
letter-spacing: 0;
margin: 0;
padding: 0;
}
.wp-pack__rte,
.wp-pack__rte p,
.wp-pack__rte a,
.wp-pack__rte a:hover,
.wp-pack__rte a:visited,
.wp-pack__rte a:focus {
color: inherit;
text-transform: none;
letter-spacing: 0;
margin: 0;
padding: 0;
}
.wp-pack__rte a {
text-decoration: underline;
}
.wp-pack__rte p {
margin-bottom: 0.8em;
}
.wp-pack__rte p:last-of-type {
margin-bottom: 0;
}
.wp-pack__rte ul {
margin: 1em 0;
padding-left: 40px;
}
.wp-pack__rte li {
list-style: unset;
}
.wp-pack__absolute-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 2;
}
.wp-pack__relative {
position: relative;
}
h1.wp-pack__heading,
h2.wp-pack__heading,
h3.wp-pack__heading,
h4.wp-pack__heading,
h5.wp-pack__heading,
h6.wp-pack__heading {
margin-bottom: 1.2rem;
}
.wp-pack__text {
margin: 0;
color: inherit;
}
.wp-pack__button {
font-family: inherit;
cursor: pointer;
text-transform: unset;
-webkit-appearance: none;
}
.wp-pack__button::after {
display: none;
}
.wp-pack__section button,
.wp-pack__section input[type="text"],
.wp-pack__section input[type="email"] {
-webkit-appearance: none;
}
.wp-pack__sizer {
margin-left: auto;
margin-right: auto;
}
.wp-pack__height-sizer {
display: table;
}
.wp-pack__height--x-small {
height: 125px;
}
.wp-pack__height--small {
height: 300px;
}
.wp-pack__height--medium {
height: 475px;
}
.wp-pack__height--large {
height: 650px;
}
.wp-pack__height--x-large {
height: 775px;
}
@media only screen and (max-width: 767px) {
.wp-pack__height--x-small {
height: 94px;
}
.wp-pack__height--small {
height: 225px;
}
.wp-pack__height--medium {
height: 357px;
}
.wp-pack__height--large {
height: 488px;
}
.wp-pack__height--x-large {
height: 582px;
}
}
/*** Videos ***/
.wp-pack__video__wrapper video[loading=lazy],
.wp-pack__background-video[loading=lazy] {
opacity: 1;
}
/*** Images ***/
.wp-pack__image__wrapper {
display: grid;
position: relative;
margin: 0;
}
.wp-pack__image__wrapper svg {
display: block;
}
.wp-pack__image__wrapper:not(.wp-pack__image__wrapper--contain) svg {
width: inherit;
height: inherit;
}
.wp-pack__image__wrapper > * {
grid-area: 1 / 1 / 2 / 2;
}
.wp-pack__image__wrapper img,
.wp-pack__image__wrapper .wp-pack__placeholder {
object-fit: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.wp-pack__image__wrapper--contain img {
object-fit: contain;
}
.wpdp_pck__image-link {
display: block;
overflow: hidden;
}
/*** Widths ***/
div.WP__widths {
display: inline-block !important;
vertical-align: top;
font-size: 0;
margin-left: auto;
margin-right: auto;
}
div.WP__widths * {
font-size: initial;
}
@media (max-width: 767px) {
div.WP__widths {
width: 100% !important;
}
}
/*** Flex ***/
.wp-pack__flex {
display: flex;
}
.wp-pack__flex-wrap {
flex-wrap: wrap;
}
.wp-pack__flex--1-per-row .wp-pack__flex-item {
flex-basis: 100%;
}
.wp-pack__flex--2-per-row .wp-pack__flex-item {
flex-basis: 50%;
}
.wp-pack__flex--3-per-row .wp-pack__flex-item {
flex-basis: 33.3333%;
}
.wp-pack__flex--4-per-row .wp-pack__flex-item {
flex-basis: 25%;
}
.wp-pack__flex--5-per-row .wp-pack__flex-item {
flex-basis: 20%;
}
.wp-pack__flex--6-per-row .wp-pack__flex-item {
flex-basis: 16.6666%;
}
.wp-pack__flex--7-per-row .wp-pack__flex-item {
flex-basis: 14.3%;
}
.wp-pack__flex--8-per-row .wp-pack__flex-item {
flex-basis: 12.5%;
}
.wp-pack__flex-row-reverse {
flex-direction: row-reverse;
}
.wp-pack__grid-row-reverse {
direction: rtl;
}
.wp-pack__grid-row-reverse * {
direction: ltr;
}
.wp-pack__justify-left {
justify-content: flex-start;
text-align: left;
}
.wp-pack__justify-center {
justify-content: center;
text-align: center;
}
.wp-pack__justify-right {
justify-content: flex-end;
text-align: right;
}
.wp-pack__justify-justify {
justify-content: space-between;
text-align: justify;
}
.wp-pack__align-top {
align-items: flex-start;
}
.wp-pack__align-center {
align-items: center;
}
.wp-pack__align-bottom {
align-items: flex-end;
}
/** Text alignment **/
.wp-pack__text-alignment-left {
text-align: left;
}
.wp-pack__text-alignment-center {
text-align: center;
}
.wp-pack__text-alignment-right {
text-align: right;
}
.wp-pack__text-alignment-justify {
text-align: justify;
}
/*** Grid ***/
.wp-pack__grid {
display: grid;
}
.wp-pack__grid--1-per-row {
grid-template-columns: 1fr;
}
.wp-pack__grid--2-per-row {
grid-template-columns: 1fr 1fr;
}
.wp-pack__grid--3-per-row {
grid-template-columns: 1fr 1fr 1fr;
}
.wp-pack__grid--4-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.wp-pack__grid--5-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.wp-pack__grid--6-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wp-pack__grid--7-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wp-pack__grid--8-per-row {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.wp-pack__grid-reverse {
direction: rtl;
}
.wp-pack__grid-reverse * {
direction: ltr;
}
/*** Helpers ***/
.wp-pack__unset {
font-family: unset;
font-size: unset;
letter-spacing: unset;
line-height: unset;
margin: unset;
padding: unset;
list-style: none;
}
.wp-pack__force-full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.wp-pack__visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.wp-pack__recaptcha-message {
margin-top: 0.8em;
font-size: 0.8em;
}
.wp-pack__recaptcha-message a,
.wp-pack__recaptcha-message a:hover,
.wp-pack__recaptcha-message a:focus {
font-style: italic;
color: inherit;
font-size: inherit;
}
/** Pages **/
.wp-pack__page-intro {
width: 100%;
}
/** Theme editor warnings **/
.wp-pack__no-app-warning {
position: relative;
overflow: hidden;
padding: 1em;
}
.wp-pack__no-app-warning-text {
position: relative;
background: #ff0;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
max-width: 50%;
margin: 0 auto;
}
.wp-pack__no-app-warning-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 130%;
background: repeating-linear-gradient(-45deg, #ff0, #ff0 20px, #000 20px, #000 40px);
animation: wp-pack__warning-background 1s linear infinite;
}
@keyframes wp-pack__warning-background {
to {
transform: translateX(-56px);
}
}
/** Animations **/
[style*="--wp-pack-animate"] {
will-change: transform;
transform: translateZ(0);
opacity: 0;
}
.wp-pack__animation-applied {
overflow: hidden;
}
.wp-pack__animation-applied [style*="--wp-pack-animate"] {
--wp-pack-animation-multiplier: 0.3s;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: calc(var(--wp-pack-animation-multiplier) * var(--wp-pack-animate));
}
@keyframes wp-pack__animation--fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes wp-pack__animation--fade-in-left {
0% {
opacity: 0;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wp-pack__animation--fade-in-right {
0% {
opacity: 0;
transform: translateX(-10%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes wp-pack__animation--fade-in-down {
0% {
opacity: 0;
transform: translateY(-10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes wp-pack__animation--fade-in-up {
0% {
opacity: 0;
transform: translateY(10%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/** Parallax **/
.wp-pack__parallax {
position: relative;
z-index: 1;
}
.wp-pack__parallax > .wp-pack__parallax-img {
position: absolute;
object-fit: cover;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/** Responsive helpers **/
.wp-pack__desktop--visible {
display: inherit;
}
.wp-pack__desktop--hidden {
display: none !important;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
.wp-pack__tablet--visible {
display: block !important;
}
.wp-pack__tablet--hidden {
display: none !important;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.wp-pack__mobile--visible {
display: block !important;
}
.wp-pack__mobile--hidden {
display: none !important;
}
}
/** Theme specific **/
/* Dawn */
[class*="wp-pack"]:empty {
display: inherit;
}
/* Debut - offset margin from the header */
/* .main-content[id="MainContent"] .shopify-section[class*="WP__"]:first-child,
.main-content[id="MainContent"] [id*="WP__"] {
margin-top: -35px;
}
@media only screen and (min-width: 750px) {
.main-content[id="MainContent"] .shopify-section[class*="WP__"]:first-child,
.main-content[id="MainContent"] .WP__widths.WP__width--half:first-child,
.main-content[id="MainContent"] .WP__widths.WP__width--half:first-child + .WP__widths.WP__width--half,
.main-content[id="MainContent"] [id*="WP__"] {
margin-top: -55px;
}
} */
/* Brooklyn - prevent default margins (but leave them on theme sections) */
.index-sections [class*="WP__"] {
margin-top: 0;
}
.index-sections [class*="WP__"].shopify-section:first-child:not(.shopify-section--full-width) {
margin-top: 0;
}
/* Impulse - prevent default margins (but leave them on theme sections) */
.main-content [class*="WP__"] {
margin-top: 0;
margin-bottom: 0;
}
/* Cornerstone - override overflow: hidden */
[class*="WP__"].shopify-section {
overflow: unset;
}
</style>