Created
August 23, 2026 21:30
-
-
Save dpw1/8663f739014c71877ec031f2bffa7822 to your computer and use it in GitHub Desktop.
Shopify tabs with popup section. Copy and paste into any theme. No app. EZFY Code.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% comment %} | |
| [[code_version:1.0.5]] | |
| {% endcomment %} | |
| <style> | |
| [id*="{{ section.id }}"] { | |
| font-family: {{ section.settings.font_family.family }}, {{ section.settings.font_family.fallback_families }}; | |
| font-weight: {{ section.settings.font_family.weight }}; | |
| font-style: {{ section.settings.font_family.style }} | |
| } | |
| .sj-twp-1__html { | |
| line-height: 1.15; | |
| -webkit-text-size-adjust: 100% | |
| } | |
| .sj-twp-1__body p { | |
| margin: 0 | |
| } | |
| .sj-twp-1__main,g.sj-twp-1__g-78 { | |
| display:block | |
| } | |
| ::-webkit-file-upload-button { | |
| -webkit-appearance:button; | |
| font:inherit | |
| } | |
| .sj-twp-1__html { | |
| box-sizing:border-box | |
| } | |
| .sj-twp-1__body,html { | |
| -webkit-overflow-scrolling:touch; | |
| color: #4b4c4d; | |
| font-size: 16px; | |
| margin: 0; | |
| min-height: 100%; | |
| overflow-x:hidden; | |
| padding: 0; | |
| width: 100% | |
| } | |
| .sj-twp-1__c-7 { | |
| position:relative | |
| } | |
| .sj-twp-1__c-10 { | |
| margin-left:auto; | |
| margin-right:auto; | |
| max-width: 100%; | |
| width: 100%; | |
| padding: 3rem 1.5rem 4rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-10 { | |
| padding: 2rem 3rem 1.5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-10 { | |
| max-width: 90rem; | |
| padding: 4rem 3rem 2rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-10 { | |
| padding: 4rem 3rem 5rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1__c-10 { | |
| padding: 4rem 3rem 6rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-10 { | |
| padding: 4rem 3rem 8rem | |
| } | |
| } | |
| .sj-twp-1__c-3 { | |
| -moz-osx-font-smoothing:grayscale; | |
| -webkit-font-smoothing:antialiased; | |
| -webkit-overflow-scrolling:touch; | |
| text-rendering:optimizeLegibility; | |
| font-size: 1.5rem; | |
| line-height: 1.2em; | |
| letter-spacing:-.03em; | |
| font-weight: 700; | |
| text-align:center; | |
| color: #2d2c2b; | |
| margin-bottom: 2rem | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-3 { | |
| font-size: 2rem; | |
| margin-bottom: 2.5rem | |
| } | |
| } | |
| .sj-twp-1__c-5 { | |
| display:grid; | |
| width: 100%; | |
| grid-template-columns:repeat(1,1fr); | |
| grid-template-rows:repeat(1,1fr); | |
| gap: .75rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-5 { | |
| grid-template-columns:repeat(2,1fr); | |
| grid-template-rows:repeat(3,1fr); | |
| gap: .75rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1__c-5 { | |
| grid-template-columns:repeat(3,1fr); | |
| grid-template-rows:repeat(2,1fr); | |
| gap: 1.25rem | |
| } | |
| } | |
| .sj-twp-1__c-9 { | |
| cursor:pointer; | |
| display:-webkit-box; | |
| display:-webkit-flex; | |
| display:-ms-flexbox; | |
| display:flex; | |
| -webkit-box-pack:justify; | |
| -webkit-justify-content:space-between; | |
| justify-content:space-between; | |
| -webkit-align-items:center; | |
| -webkit-box-align:center; | |
| -ms-flex-align:center; | |
| align-items:center; | |
| -webkit-transition:border .3s ease; | |
| transition:border .3s ease; | |
| background-color: #fff; | |
| border: .125rem solid #e2ded9; | |
| border-radius: .5rem; | |
| padding: 1rem .5rem 1rem 1.5rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-9 { | |
| padding: 1rem .5rem 1rem 1.5rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1__c-9 { | |
| padding: 1rem .5rem 1rem 1rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-9 { | |
| padding: .5rem 1rem .5rem 1.5rem | |
| } | |
| } | |
| .sj-twp-1__c-9:hover { | |
| border: .125rem solid #c6c1b9 | |
| } | |
| .sj-twp-1__c-1 { | |
| -moz-osx-font-smoothing:grayscale; | |
| -webkit-font-smoothing:antialiased; | |
| -webkit-overflow-scrolling:touch; | |
| text-rendering:optimizeLegibility; | |
| font-weight: 400; | |
| letter-spacing:-.03em; | |
| line-height: 1.2em; | |
| font-size: 1.25rem; | |
| color: #2d2c2b | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-1 { | |
| font-size: 1.25rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1__c-1 { | |
| font-size: 1.5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-1 { | |
| font-size: 1.5rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-1 { | |
| font-size: 1.25rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1__c-1 { | |
| font-size: 1.25rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-1 { | |
| font-size: 1.5rem | |
| } | |
| } | |
| .sj-twp-1__c-6 { | |
| display:-webkit-box; | |
| display:-webkit-flex; | |
| display:-ms-flexbox; | |
| display:flex; | |
| -webkit-align-items:center; | |
| -webkit-box-align:center; | |
| -ms-flex-align:center; | |
| align-items:center | |
| } | |
| .sj-twp-1__c-8 { | |
| max-width: {{ section.settings.tab_icon_width }}px; | |
| width: 100%; | |
| height: {{ section.settings.tab_icon_width }}px; | |
| margin-right: .5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1__c-8 { | |
| max-width: {{ section.settings.tab_icon_width }}px; | |
| width: 100%; | |
| height: {{ section.settings.tab_icon_width }}px | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1__c-8 { | |
| max-width: {{ section.settings.tab_icon_width }}px; | |
| width: 100%; | |
| height: {{ section.settings.tab_icon_width }}px | |
| } | |
| } | |
| .sj-twp-1__tab-icon { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: contain; | |
| } | |
| .sj-twp-1__c-2 { | |
| display:-webkit-inline-box; | |
| display:-webkit-inline-flex; | |
| display:-ms-inline-flexbox; | |
| display:inline-flex; | |
| font-size: 1.5rem; | |
| color: #44423f | |
| } | |
| #onetrust-pc-sdk [type=checkbox]:not(:checked) { | |
| pointer-events:initial | |
| } | |
| .category-vendors-list-handler+a:focus-visible { | |
| outline: 2px solid #000 | |
| } | |
| .sj-twp-1__html { | |
| overflow:hidden | |
| } | |
| svg.sj-twp-1__svg-12 { | |
| width: 100%; | |
| height: 100%; | |
| transform:translate3d(0,0,0); | |
| content-visibility:visible | |
| } | |
| .sj-twp-1__c-2 { | |
| transform:none | |
| } | |
| .sj-twp-1-popup__html { | |
| line-height: 1.15; | |
| -webkit-text-size-adjust: 100%; | |
| opacity: 0; | |
| visibility:hidden; | |
| pointer-events:none; | |
| transition:opacity .3s ease-in-out,visibility .3s ease-in-out; | |
| position:fixed; | |
| z-index: 10 | |
| } | |
| .sj-twp-1-popup__html--visible { | |
| opacity: 1; | |
| visibility:visible; | |
| pointer-events:auto | |
| } | |
| /* Typography Controls */ | |
| .sj-twp-1-popup__modal-title { | |
| font-size: {{ section.settings.modal_title_font_size_desktop }}px !important; | |
| } | |
| .sj-twp-1-popup__modal-description { | |
| font-size: {{ section.settings.modal_description_font_size_desktop }}px !important; | |
| } | |
| .sj-twp-1-popup__feature-title { | |
| font-size: {{ section.settings.feature_title_font_size_desktop }}px !important; | |
| } | |
| .sj-twp-1-popup__feature-description { | |
| font-size: {{ section.settings.feature_description_font_size_desktop }}px !important; | |
| } | |
| .sj-twp-1-popup__button { | |
| font-size: {{ section.settings.button_font_size_desktop }}px !important; | |
| } | |
| /* Mobile Typography */ | |
| @media (max-width: 768px) { | |
| .sj-twp-1-popup__modal-title { | |
| font-size: {{ section.settings.modal_title_font_size_mobile }}px !important; | |
| } | |
| .sj-twp-1-popup__modal-description { | |
| font-size: {{ section.settings.modal_description_font_size_mobile }}px !important; | |
| } | |
| .sj-twp-1-popup__feature-title { | |
| font-size: {{ section.settings.feature_title_font_size_mobile }}px !important; | |
| } | |
| .sj-twp-1-popup__feature-description { | |
| font-size: {{ section.settings.feature_description_font_size_mobile }}px !important; | |
| } | |
| .sj-twp-1-popup__button { | |
| font-size: {{ section.settings.button_font_size_mobile }}px !important; | |
| } | |
| } | |
| /* Tab Styling */ | |
| .sj-twp-1__tab { | |
| background-color: {{ section.settings.tab_background_color }} !important; | |
| border: 1px solid {{ section.settings.tab_border_color }} !important; | |
| border-radius: 8px !important; | |
| transition: all 0.3s ease !important; | |
| } | |
| .sj-twp-1__tab:hover { | |
| opacity: 0.8 !important; | |
| transform: translateY(-2px) !important; | |
| } | |
| .sj-twp-1__tab-text { | |
| color: {{ section.settings.tab_text_color }} !important; | |
| font-size: {{ section.settings.tab_font_size_desktop }}px !important; | |
| font-weight: 500 !important; | |
| margin: 0 !important; | |
| } | |
| /* Mobile Tab Styling */ | |
| @media (max-width: 768px) { | |
| .sj-twp-1__tab-text { | |
| font-size: {{ section.settings.tab_font_size_mobile }}px !important; | |
| } | |
| } | |
| .sj-twp-1-popup__main { | |
| display:block | |
| } | |
| .sj-twp-1-popup a { | |
| background-color:transparent | |
| } | |
| .sj-twp-1-popup img { | |
| border-style:none | |
| } | |
| .sj-twp-1-popup button { | |
| font-family:inherit; | |
| font-size: 100%; | |
| line-height: 1.15; | |
| overflow:visible; | |
| text-transform:none | |
| } | |
| .sj-twp-1-popup [type=button],.sj-twp-1-popup button { | |
| -webkit-appearance:button | |
| } | |
| .sj-twp-1-popup [type=button]::-moz-focus-inner,button::-moz-focus-inner { | |
| border-style:none; | |
| padding: 0 | |
| } | |
| .sj-twp-1-popup [type=button]:-moz-focusring,button:-moz-focusring { | |
| outline: 1px dotted ButtonText | |
| } | |
| .sj-twp-1-popup__body { | |
| -webkit-overflow-scrolling:touch; | |
| color: #4b4c4d; | |
| font-size: 16px; | |
| margin: 0; | |
| min-height: 100%; | |
| overflow-x:hidden; | |
| padding: 0; | |
| width: 100% | |
| } | |
| .sj-twp-1-popup button,.sj-twp-1-popup p { | |
| margin: 0 | |
| } | |
| .sj-twp-1-popup__css-79elbk { | |
| position:relative | |
| } | |
| .sj-twp-1-popup__css-9 { | |
| -webkit-align-items:center; | |
| -webkit-box-align:center; | |
| -ms-flex-align:center; | |
| align-items:center; | |
| display:-webkit-box; | |
| display:-webkit-flex; | |
| display:-ms-flexbox; | |
| display:flex; | |
| -webkit-box-flex-wrap:nowrap; | |
| -webkit-flex-wrap:nowrap; | |
| -ms-flex-wrap:nowrap; | |
| flex-wrap:nowrap; | |
| -webkit-box-pack:center; | |
| -ms-flex-pack:center; | |
| -webkit-justify-content:center; | |
| justify-content:center | |
| } | |
| .sj-twp-1-popup__css-1ss1hc4 { | |
| text-align:center; | |
| vertical-align:text-top | |
| } | |
| .sj-twp-1-popup__css-wc2mcx { | |
| margin-left:auto; | |
| margin-right:auto; | |
| max-width: 100%; | |
| width: 100%; | |
| padding: 3rem 1.5rem 4rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-wc2mcx { | |
| padding: 2rem 3rem 1.5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-wc2mcx { | |
| max-width: 90rem; | |
| padding: 4rem 3rem 2rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-wc2mcx { | |
| padding: 4rem 3rem 5rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-wc2mcx { | |
| padding: 4rem 3rem 6rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-wc2mcx { | |
| padding: 4rem 3rem 8rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-5iuxxk { | |
| display:grid; | |
| width: 100%; | |
| grid-template-columns:repeat(1,1fr); | |
| grid-template-rows:repeat(1,1fr); | |
| gap: .75rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-5iuxxk { | |
| grid-template-columns:repeat(2,1fr); | |
| grid-template-rows:repeat(3,1fr); | |
| gap: .75rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-5iuxxk { | |
| grid-template-columns:repeat(3,1fr); | |
| grid-template-rows:repeat(2,1fr); | |
| gap: 1.25rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-10 { | |
| width: 100%; | |
| display:inline-block; | |
| overflow:hidden; | |
| position:relative; | |
| vertical-align:top; | |
| pointer-events: none; | |
| } | |
| .sj-twp-1-popup__css-10 img { | |
| height: 100%; | |
| width: 100% | |
| } | |
| .sj-twp-1-popup__css-10>img,.sj-twp-1-popup__css-7sxv8o { | |
| left: 0; | |
| position:absolute; | |
| top: 0 | |
| } | |
| .sj-twp-1-popup__css-10>img { | |
| bottom: 0; | |
| margin: 0; | |
| object-fit:cover; | |
| padding: 0; | |
| right: 0 | |
| } | |
| .sj-twp-1-popup__css-7sxv8o { | |
| background-color: #cbcbcc; | |
| opacity: .3; | |
| -webkit-box-flex: 1; | |
| flex-grow: 1; | |
| height: 100%; | |
| width: 100%; | |
| z-index:-1 | |
| } | |
| .sj-twp-1-popup__css-1 { | |
| background: {{ section.settings.modal_background_color }}; | |
| border-radius: .5rem; | |
| color: {{ section.settings.modal_text_color }}; | |
| padding: 1.5rem; | |
| box-shadow:rgba(65,61,69,.2)0 .125rem 0; | |
| max-height: 100%; | |
| min-width: 18rem; | |
| overflow:hidden; | |
| position:relative | |
| } | |
| .sj-twp-1-popup__css-1>* { | |
| margin-bottom: 1.5rem | |
| } | |
| .sj-twp-1-popup__css-1>:last-child { | |
| margin-bottom: 0 | |
| } | |
| .sj-twp-1-popup__css-b9gkq6 { | |
| border: .125rem solid #e5e7ec; | |
| cursor:pointer; | |
| font-weight: 700; | |
| line-height: 1.1em; | |
| overflow:hidden; | |
| text-overflow:ellipsis; | |
| transition:color 150ms cubic-bezier(.32,.94,.6,1),background-color 150ms cubic-bezier(.32,.94,.6,1),border-color 150ms cubic-bezier(.32,.94,.6,1),box-shadow 150ms cubic-bezier(.32,.94,.6,1),transform 150ms cubic-bezier(.32,.94,.6,1); | |
| user-select:none; | |
| white-space:nowrap; | |
| background: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 }}; | |
| color: {{ section.settings.close_button_color }}; | |
| opacity: 1; | |
| border-radius: 50%; | |
| max-width: 3rem; | |
| width: 100%; | |
| font-size: 1.5rem; | |
| padding:calc(-.5em + 1.375rem); | |
| position:absolute; | |
| right: 1rem; | |
| top: 1rem | |
| } | |
| .sj-twp-1-popup__css-b9gkq6:focus { | |
| outline: #0040ea solid .125rem; | |
| background: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | plus: 0.2 }}; | |
| border-color: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | plus: 0.2 }}; | |
| border-radius: 2rem; | |
| color: {{ section.settings.close_button_color }}; | |
| opacity: 1 | |
| } | |
| .sj-twp-1-popup__css-b9gkq6:not([disabled]):hover { | |
| background: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | plus: 0.2 }}; | |
| border-color: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | plus: 0.2 }}; | |
| border-radius: 2rem; | |
| color: {{ section.settings.close_button_color }}; | |
| opacity: 1 | |
| } | |
| .sj-twp-1-popup__css-b9gkq6.sj-twp-1-popup__css-b9gkq6:not([disabled]):active { | |
| background: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | plus: 0.3 }}; | |
| border-color: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | plus: 0.3 }}; | |
| border-radius: 2rem; | |
| color: {{ section.settings.close_button_color }}; | |
| opacity: 1 | |
| } | |
| .sj-twp-1-popup__css-b9gkq6.sj-twp-1-popup__css-b9gkq6.sj-twp-1-popup__css-b9gkq6:disabled { | |
| background: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 | minus: 0.1 }}; | |
| border-color: #e5e7ec; | |
| border-radius: 2rem; | |
| color: {{ section.settings.close_button_color }}; | |
| opacity: 0.5; | |
| cursor:not-allowed | |
| } | |
| /* Close button SVG color */ | |
| .sj-twp-1-popup__css-b9gkq6 svg, | |
| .sj-twp-1-popup__css-b9gkq6 svg path { | |
| fill: {{ section.settings.close_button_color }} !important; | |
| color: {{ section.settings.close_button_color }} !important; | |
| } | |
| .sj-twp-1-popup__css-5 { | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizelegibility; | |
| font-size: 1rem; | |
| font-weight: 400; | |
| line-height: 1.5em | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-5 { | |
| font-size: 1.125rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-13 { | |
| display:flex; | |
| flex-direction:column; | |
| -webkit-box-align:center; | |
| align-items:center; | |
| width: 20.4rem; | |
| padding: 3.5rem 1.8rem 0 | |
| } | |
| /* Ensure all direct children have full width */ | |
| @media (max-width: 749px){ | |
| .sj-twp-1-popup__css-13 > * { | |
| max-width: 100% !important; | |
| width: 100% !important; | |
| } | |
| .sj-twp-1-popup__css-13 { | |
| padding: 0 20px !important; | |
| } | |
| /* Add mobile padding to direct children */ | |
| .sj-twp-1-popup__css-13 > *:not([data-modal-style]) { | |
| padding: 0 20px; | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-13 { | |
| width: 40.5rem; | |
| padding: 1.3rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-13 { | |
| width: 57rem; | |
| padding: 1.8rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-13 { | |
| width: 57rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-2 { | |
| transform:translate3d(0,0,0); | |
| overflow:hidden; | |
| position:initial; | |
| height: 8.25rem; | |
| max-width: {{ section.settings.modal_image_width_mobile }}px; | |
| width: 100%; | |
| display:flex; | |
| -webkit-box-pack:center; | |
| justify-content:center; | |
| -webkit-box-align:center; | |
| align-items:center | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-2 { | |
| position:absolute; | |
| height: 7.5rem; | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| width: 100%; | |
| top:-2.18rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-2 { | |
| height: 9.75rem; | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| width: 100%; | |
| top:-3.5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-2 { | |
| height: 9.75rem; | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| width: 100%; | |
| top:-3.5rem | |
| } | |
| } | |
| /* Modal Image Style: Inside Modal - Desktop Only (750px+) */ | |
| @media (min-width: 750px) { | |
| .sj-twp-1-popup__css-2[data-modal-style="inside_modal"] { | |
| position: relative !important; | |
| top: 0 !important; | |
| margin: 0 auto 1rem auto; | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| height: auto; | |
| min-height: 200px; | |
| width: 100%; | |
| } | |
| } | |
| @media (max-width: 749px){ | |
| .sj-twp-1-popup__css-14 { | |
| margin-bottom: 40px; | |
| } | |
| /* Force inside_modal behavior on mobile regardless of setting */ | |
| .sj-twp-1-popup__css-2 { | |
| position: relative !important; | |
| top: 0 !important; | |
| margin: 0 auto 1rem auto; | |
| max-width: {{ section.settings.modal_image_width_mobile }}px; | |
| height: auto; | |
| min-height: 200px; | |
| width: 100%; | |
| max-height: 350px; | |
| margin-top: 40px; | |
| } | |
| .sj-twp-1-popup__css-1 { | |
| max-height: none !important; | |
| } | |
| .sj-twp-1-popup__css-lsapbq { | |
| margin-top: 0 !important; | |
| } | |
| } | |
| @media (min-width: 750px) and (min-width: 48rem) { | |
| .sj-twp-1-popup__css-2[data-modal-style="inside_modal"] { | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| width: 100%; | |
| min-height: 250px; | |
| } | |
| } | |
| @media (min-width: 750px) and (min-width: 64rem) { | |
| .sj-twp-1-popup__css-2[data-modal-style="inside_modal"] { | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| width: 100%; | |
| min-height: unset; | |
| } | |
| } | |
| @media (min-width: 750px) and (min-width: 90rem) { | |
| .sj-twp-1-popup__css-2[data-modal-style="inside_modal"] { | |
| max-width: {{ section.settings.modal_image_width_desktop }}px; | |
| width: 100%; | |
| min-height: unset; | |
| } | |
| } | |
| /* Remove max-height from parent when inside modal style is used - Desktop Only (750px+) */ | |
| @media (min-width: 750px) { | |
| .sj-twp-1-popup__css-1[data-modal-style="inside_modal"] { | |
| max-height: none !important; | |
| } | |
| /* Remove margin-top from h4 when inside modal style is used */ | |
| .sj-twp-1-popup__css-lsapbq[data-modal-style="inside_modal"] { | |
| margin-top: 0 !important; | |
| } | |
| } | |
| @media (min-width: 750px) and (min-width: 64rem) { | |
| .sj-twp-1-popup__css-lsapbq[data-modal-style="inside_modal"] { | |
| margin-top: 0 !important; | |
| margin-bottom: .75rem; | |
| } | |
| } | |
| .sj-twp-1-popup__css-2>div:first-of-type { | |
| position:initial | |
| } | |
| .sj-twp-1-popup__css-2 img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit:contain!important | |
| } | |
| .sj-twp-1-popup__css-flrva9 { | |
| max-width: 398px | |
| } | |
| .sj-twp-1-popup__css-lsapbq { | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizelegibility; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| line-height: 1.2em; | |
| letter-spacing:-.03em; | |
| max-width: 14rem; | |
| text-align:center; | |
| margin-top: 2.5rem; | |
| margin-bottom: 1rem; | |
| color: {{ section.settings.modal_text_color }} | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-lsapbq { | |
| font-size: 2rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-lsapbq { | |
| max-width: 100%; | |
| margin-top: 5.5rem; | |
| margin-bottom: .75rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-lsapbq { | |
| margin-top: 6.5rem; | |
| margin-bottom: .75rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-lsapbq { | |
| margin-top: 6.5rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-jegghi { | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizelegibility; | |
| font-size: .875rem; | |
| font-weight: 400; | |
| letter-spacing: 0; | |
| line-height: 1.5em; | |
| text-align:center; | |
| max-width: 27rem; | |
| color: {{ section.settings.modal_text_color }} | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-jegghi { | |
| font-size: .875rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-jegghi { | |
| font-size: 1rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-jegghi { | |
| font-size: 1rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-jegghi { | |
| line-height: 1.5em; | |
| max-width: 25.75rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-jegghi { | |
| max-width: 25.75rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-jegghi { | |
| max-width: 27rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-14 { | |
| display:flex; | |
| flex-flow:column wrap; | |
| -webkit-box-pack:justify; | |
| justify-content:space-between; | |
| gap: 1rem; | |
| margin-top: 2rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-14 { | |
| flex-direction:row; | |
| max-width: 34rem; | |
| gap: 1rem; | |
| margin-top: 1.25rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-14 { | |
| max-width: 45.5rem; | |
| gap: 1.5rem; | |
| margin-top: 2rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-14 { | |
| max-width: 45.5rem; | |
| gap: 1.5rem; | |
| margin-top: 2rem | |
| } | |
| } | |
| /* Dynamic layout for different numbers of features */ | |
| .sj-twp-1-popup__css-14[data-feature-count="1"] { | |
| justify-content: center; | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="2"] { | |
| justify-content: center; | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="3"] { | |
| justify-content: center; | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="4"] { | |
| justify-content: space-between; | |
| } | |
| /* Adjust feature item width based on count */ | |
| .sj-twp-1-popup__css-14[data-feature-count="1"] .sj-twp-1-popup__css-3 { | |
| width: 100%; | |
| max-width: 25rem; | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="2"] .sj-twp-1-popup__css-3 { | |
| width: calc(50% - 0.5rem); | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="3"] .sj-twp-1-popup__css-3 { | |
| width: calc(33.333% - 0.67rem); | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="4"] .sj-twp-1-popup__css-3 { | |
| width: calc(50% - 0.75rem); | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-14[data-feature-count="1"] .sj-twp-1-popup__css-3 { | |
| width: 100%; | |
| max-width: 30rem; | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="2"] .sj-twp-1-popup__css-3 { | |
| width: calc(50% - 0.5rem); | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="3"] .sj-twp-1-popup__css-3 { | |
| width: calc(33.333% - 0.67rem); | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="4"] .sj-twp-1-popup__css-3 { | |
| width: calc(50% - 0.5rem); | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-14[data-feature-count="1"] .sj-twp-1-popup__css-3 { | |
| width: 100%; | |
| max-width: 35rem; | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="2"] .sj-twp-1-popup__css-3 { | |
| width: calc(50% - 0.75rem); | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="3"] .sj-twp-1-popup__css-3 { | |
| width: calc(33.333% - 1rem); | |
| } | |
| .sj-twp-1-popup__css-14[data-feature-count="4"] .sj-twp-1-popup__css-3 { | |
| width: calc(50% - 0.75rem); | |
| } | |
| } | |
| .sj-twp-1-popup__css-3 { | |
| -webkit-box-align:baseline; | |
| align-items:baseline; | |
| display:flex; | |
| width: 17.8rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-3 { | |
| width: 16.25rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-3 { | |
| width: 21.75rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-3 { | |
| width: 21.75rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-11 { | |
| -webkit-box-pack:center; | |
| justify-content:center; | |
| overflow:hidden; | |
| position:relative; | |
| transform:translate3d(0,0,0); | |
| max-width: {{ section.settings.feature_image_width_mobile }}px; | |
| width: 100%; | |
| height: {{ section.settings.feature_image_width_mobile }}px; | |
| min-width: 36px; | |
| flex-shrink: 0; | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-11 { | |
| max-width: {{ section.settings.feature_image_width_desktop }}px; | |
| width: 100%; | |
| height: {{ section.settings.feature_image_width_desktop }}px; | |
| min-width: 36px; | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-11 { | |
| max-width: {{ section.settings.feature_image_width_desktop }}px; | |
| width: 100%; | |
| height: {{ section.settings.feature_image_width_desktop }}px; | |
| min-width: 60px; | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-11 { | |
| max-width: {{ section.settings.feature_image_width_desktop }}px; | |
| width: 100%; | |
| height: {{ section.settings.feature_image_width_desktop }}px; | |
| min-width: 60px; | |
| } | |
| } | |
| .sj-twp-1-popup__css-12 { | |
| max-width: 95px | |
| } | |
| .sj-twp-1-popup__css-4 { | |
| max-width: 14.5rem; | |
| margin-left: .8rem | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-4 { | |
| max-width: 12.75rem; | |
| margin-left: 1.25rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-4 { | |
| max-width: 16.5rem; | |
| margin-left: 1.5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-4 { | |
| max-width: 16.5rem; | |
| margin-left: 1.5rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-6 { | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizelegibility; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| letter-spacing:-.03em; | |
| line-height: 1.2em; | |
| margin-bottom: .375rem; | |
| color: {{ section.settings.modal_text_color }} | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-6 { | |
| font-size: 1.125rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-6 { | |
| margin-bottom: .375rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-6 { | |
| margin-bottom: .5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-6 { | |
| margin-bottom: .5rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-z2syc0 { | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizelegibility; | |
| font-size: .875rem; | |
| font-weight: 400; | |
| letter-spacing: 0; | |
| line-height: 1.5em; | |
| color: {{ section.settings.modal_text_color }} | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-z2syc0 { | |
| font-size: .875rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-z2syc0 { | |
| font-size: 1rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-z2syc0 { | |
| font-size: 1rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-z2syc0 { | |
| line-height: 1.5em | |
| } | |
| } | |
| .sj-twp-1-popup__css-kezrx0 { | |
| max-width: 60px | |
| } | |
| .sj-twp-1-popup__css-immhfv { | |
| max-width: 121px | |
| } | |
| .sj-twp-1-popup__css-hs4zay { | |
| display:inline-block; | |
| text-decoration:none; | |
| border: .125rem solid transparent; | |
| cursor:pointer; | |
| max-width: 20.4375rem; | |
| overflow:hidden; | |
| padding:calc(-.55em + 1.375rem) 1.5rem; | |
| position:relative; | |
| text-overflow:ellipsis; | |
| transition:color 150ms cubic-bezier(.32,.94,.6,1),background-color 150ms cubic-bezier(.32,.94,.6,1),border-color 150ms cubic-bezier(.32,.94,.6,1),box-shadow 150ms cubic-bezier(.32,.94,.6,1),transform 150ms cubic-bezier(.32,.94,.6,1); | |
| user-select:none; | |
| white-space:nowrap; | |
| background: {{ section.settings.button_background_color }}; | |
| border-radius: 2rem; | |
| opacity: 1; | |
| -webkit-font-smoothing:antialiased; | |
| text-rendering:optimizelegibility; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| letter-spacing:-.03em; | |
| line-height: 1.2em; | |
| width:-webkit-fill-available; | |
| color: {{ section.settings.button_text_color }}; | |
| margin: 2rem 1rem 1rem | |
| } | |
| .sj-twp-1-popup__css-hs4zay:focus { | |
| outline: #0040ea solid .125rem; | |
| background: {{ section.settings.button_background_color }}; | |
| border-color:transparent; | |
| border-radius: 2rem; | |
| color: {{ section.settings.button_text_color }}; | |
| opacity: 0.8 | |
| } | |
| .sj-twp-1-popup__css-hs4zay:not([disabled]):hover { | |
| background: {{ section.settings.button_background_color }}; | |
| border-color:transparent; | |
| border-radius: 2rem; | |
| color: {{ section.settings.button_text_color }}; | |
| opacity: 0.8 | |
| } | |
| .sj-twp-1-popup__css-hs4zay.sj-twp-1-popup__css-hs4zay:not([disabled]):active { | |
| background: {{ section.settings.button_background_color }}; | |
| border-color:transparent; | |
| border-radius: 2rem; | |
| color: {{ section.settings.button_text_color }}; | |
| opacity: 0.6 | |
| } | |
| .sj-twp-1-popup__css-hs4zay.sj-twp-1-popup__css-hs4zay.sj-twp-1-popup__css-hs4zay:disabled { | |
| background: {{ section.settings.button_background_color }}; | |
| border-color:transparent; | |
| border-radius: 2rem; | |
| color: {{ section.settings.button_text_color }}; | |
| opacity: .5; | |
| cursor:not-allowed | |
| } | |
| /* Disabled button state when no URL is provided */ | |
| .sj-twp-1-popup__css-hs4zay.sj-twp-1-popup__button--disabled { | |
| opacity: 0.5 !important; | |
| cursor: not-allowed !important; | |
| pointer-events: none !important; | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-hs4zay { | |
| font-size: 1.125rem | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-hs4zay { | |
| width:fit-content; | |
| margin: 1.5rem 1rem 1rem | |
| } | |
| } | |
| @media (min-width: 64rem) { | |
| .sj-twp-1-popup__css-hs4zay { | |
| margin: 2rem 1rem .5rem | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-hs4zay { | |
| margin: 2rem 1rem .5rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-7 { | |
| -webkit-box-align:center; | |
| align-items:center; | |
| display:flex; | |
| flex-direction:column; | |
| height: 100%; | |
| -webkit-box-pack:center; | |
| justify-content:center; | |
| left: 0; | |
| overflow:hidden scroll; | |
| top: 0; | |
| width: 100%; | |
| z-index: 10; | |
| position:fixed | |
| } | |
| @media (max-width: 749px){ | |
| .sj-twp-1-popup__css-7 { | |
| z-index: 1; | |
| position: fixed; | |
| right: 0; | |
| width: 100%; | |
| max-width: 100%; | |
| overflow-y: scroll; | |
| top: 0; | |
| bottom: 0; | |
| } | |
| } | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalCard { | |
| overflow:visible; | |
| border-radius: 1.5rem; | |
| padding: 0; | |
| margin-bottom: 1rem | |
| } | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalCard button { | |
| background-color: {{ section.settings.close_button_color | color_modify: 'alpha', section.settings.close_button_opacity | times: 0.01 }}; | |
| border: 0; | |
| height: 1.875rem; | |
| width: 1.875rem; | |
| font-size: 1.125rem; | |
| padding: .375rem; | |
| top: 1rem; | |
| right: 1rem; | |
| outline: 0; | |
| display: FLEX; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalCard button { | |
| height: 1.5rem; | |
| width: 1.5rem; | |
| font-size: .85rem; | |
| padding: .313rem; | |
| top: 1rem; | |
| right: 1rem; | |
| text-align: center; | |
| display: flex | |
| ; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| } | |
| @media (min-width: 90rem) { | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalCard button { | |
| height: 2.5rem; | |
| width: 2.5rem; | |
| font-size: 1.5rem; | |
| padding: .5rem; | |
| top: 2rem; | |
| right: 2rem | |
| } | |
| } | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalBackground { | |
| background-color: #141313; | |
| position:fixed; | |
| opacity: .6 | |
| } | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalCard { | |
| background-color: {{ section.settings.modal_background_color }}; | |
| box-shadow:none | |
| } | |
| .sj-twp-1-popup__css-7 .sj-twp-1-popup__needStateModalCard button { | |
| color: {{ section.settings.close_button_color }} | |
| } | |
| .sj-twp-1-popup__css-7 [role=dialog] { | |
| margin-top: 19rem; | |
| margin-bottom: 3rem; | |
| } | |
| @media (max-width: 749px){ | |
| .sj-twp-1-popup__css-7 [role=dialog] { | |
| margin-top: 0; | |
| margin-bottom:3rem; | |
| max-height: 80vh; | |
| } | |
| } | |
| @media (min-width: 48rem) { | |
| .sj-twp-1-popup__css-7 [role=dialog] { | |
| margin-top: 0; | |
| margin-bottom: 0 | |
| } | |
| } | |
| .sj-twp-1-popup__button-container { | |
| display: flex | |
| ; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @media (max-width: 749px){ | |
| [data-testid="need-state-modal-content-item"]{ | |
| max-width: 100% !important; | |
| width: 100% !important; | |
| } | |
| /* Sticky button container on mobile */ | |
| .sj-twp-1-popup__button-container { | |
| position: sticky !important; | |
| bottom: 0 !important; | |
| background: {{ section.settings.modal_background_color }} !important; | |
| padding: 1rem !important; | |
| z-index: 1000 !important; | |
| box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important; | |
| min-height: 100px !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| } | |
| .sj-twp-1-popup__button-container .sj-twp-1-popup__button { | |
| margin: 0 !important; | |
| width: 100% !important; | |
| max-width: none !important; | |
| } | |
| } | |
| [data-testid="need-state-modal-close-button"]{ | |
| z-index: 2;} | |
| </style> | |
| {% assign is_design_mode = false %} | |
| {% if shopify.design_mode or request.design_mode %} | |
| {% assign is_design_mode = true %} | |
| {% endif %} | |
| <div | |
| data-design-mode="{{ is_design_mode }}"> | |
| </div> | |
| <div class="sj-twp-1__html" > | |
| <div class="sj-twp-1__body"> | |
| <div class="sj-twp-1____next"> | |
| <div class="sj-twp-1__main"> | |
| <div class="sj-twp-1__c-7"> | |
| <div> | |
| <div class="sj-twp-1__c-10"> | |
| <h2 class="sj-twp-1__c-3"> | |
| {{ section.settings.section_title }} | |
| </h2> | |
| <div class="sj-twp-1__c-5"> | |
| {% comment %}start loop here{% endcomment %} | |
| {% for block in section.blocks %} | |
| {% if block.type == 'tab' %} | |
| <div class="sj-twp-1__item" {{ block.shopify_attributes }}> | |
| <div role="button" tabindex="0" class="sj-twp-1__c-9 sj-twp-1__tab" data-block-id="{{ block.id }}"> | |
| <p class="sj-twp-1__c-1 sj-twp-1__tab-text"> | |
| {{ block.settings.tab_title }} | |
| </p> | |
| <div class="sj-twp-1__c-6"> | |
| <div class="sj-twp-1__c-8"> | |
| {% if block.settings.tab_image %} | |
| <img src="{{ block.settings.tab_image | img_url: '80x80' }}" alt="Tab Icon" class="sj-twp-1__tab-icon"> | |
| {% elsif section.settings.tab_icon %} | |
| <img src="{{ section.settings.tab_icon | img_url: '80x80' }}" alt="Tab Icon" class="sj-twp-1__tab-icon"> | |
| {% else %} | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58 58" width="58" height="58" preserveAspectRatio="xMidYMin slice" class="svg sj-twp-1__svg-12"> | |
| <defs> | |
| <clipPath class="sj-twp-1____lottie_element_7"> | |
| <rect width="58" height="58" x="0" y="0"> | |
| </rect> | |
| </clipPath> | |
| </defs> | |
| <g clip-path="url(#__lottie_element_7)"> | |
| <g transform="matrix(1,0,0,1,-2.2709999084472656,8.11600112915039)" opacity="1" class="sj-twp-1__grade sj-twp-1__g-78"> | |
| <g opacity="1" transform="matrix(1,0,0,1,31.832000732421875,21.378999710083008)"> | |
| <path stroke-linecap="round" stroke-linejoin="round" fill-opacity="0" stroke="rgb(255,206,0)" stroke-opacity="1" stroke-width="9" d=" M-22.832000732421875,10.90999984741211 C-22.832000732421875,10.90999984741211 -3.6740000247955322,-12.380000114440918 -3.6740000247955322,-12.380000114440918 C-3.6740000247955322,-12.380000114440918 -9.173999786376953,12.064000129699707 -9.173999786376953,12.064000129699707 C-9.173999786376953,12.064000129699707 13.519000053405762,-12.281000137329102 13.519000053405762,-12.281000137329102 C13.519000053405762,-12.281000137329102 4.685999870300293,12.380000114440918 4.685999870300293,12.380000114440918 C4.685999870300293,12.380000114440918 18.72800064086914,-2.930000066757202 22.832000732421875,-3.5899999141693115"> | |
| </path> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| {% endif %} | |
| </div> | |
| <div class="sj-twp-1__c-2"> | |
| <svg width="1em" height="1em" viewBox="0 0 24 24"> | |
| <path fill="currentColor" fill-rule="evenodd" d="M9.56 19.71l-1.41-1.42L14.44 12 8.15 5.71l1.41-1.42 7 7a1 1 0 010 1.41l-7 7.01z" clip-rule="evenodd"> | |
| </path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% endfor %} | |
| {% comment %}end loop here{% endcomment %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function isDesignMode() { | |
| const designModeElement = document.querySelector('[data-design-mode="true"]'); | |
| return designModeElement !== null; | |
| } | |
| function createBlockData(blockId, blockSettings) { | |
| const allFeatures = [ | |
| { | |
| title: blockSettings.feature_1_title, | |
| description: blockSettings.feature_1_description, | |
| image: blockSettings.feature_1_image ? `${blockSettings.feature_1_image}?width=256&height=256` : '' | |
| }, | |
| { | |
| title: blockSettings.feature_2_title, | |
| description: blockSettings.feature_2_description, | |
| image: blockSettings.feature_2_image ? `${blockSettings.feature_2_image}?width=256&height=256` : '' | |
| }, | |
| { | |
| title: blockSettings.feature_3_title, | |
| description: blockSettings.feature_3_description, | |
| image: blockSettings.feature_3_image ? `${blockSettings.feature_3_image}?width=256&height=256` : '' | |
| }, | |
| { | |
| title: blockSettings.feature_4_title, | |
| description: blockSettings.feature_4_description, | |
| image: blockSettings.feature_4_image ? `${blockSettings.feature_4_image}?width=256&height=256` : '' | |
| } | |
| ]; | |
| const visibleFeatures = allFeatures.filter(feature => { | |
| const hasTitle = feature.title && feature.title.trim() !== ''; | |
| const hasDescription = feature.description && feature.description.trim() !== ''; | |
| return hasTitle || hasDescription; | |
| }); | |
| window[`block-${blockId}`] = { | |
| name: blockSettings.tab_title, | |
| modalTitle: blockSettings.modal_title, | |
| modalDescription: blockSettings.modal_description, | |
| modalImage: blockSettings.modal_image ? `${blockSettings.modal_image}?width=800&height=600` : '', | |
| features: visibleFeatures, | |
| buttonText: blockSettings.button_text, | |
| buttonLink: blockSettings.button_url || "#" | |
| }; | |
| } | |
| {% for block in section.blocks %} | |
| {% if block.type == 'tab' %} | |
| createBlockData('{{ block.id }}', { | |
| tab_title: `{{ block.settings.tab_title }}`, | |
| tab_image: `{{ block.settings.tab_image | img_url: '80x80' }}`, | |
| modal_title: `{{ block.settings.modal_title }}`, | |
| modal_description: `{{ block.settings.modal_description }}`, | |
| modal_image: `{{ block.settings.modal_image | img_url: '800x600' }}`, | |
| feature_1_title: `{{ block.settings.feature_1_title }}`, | |
| feature_1_description: `{{ block.settings.feature_1_description }}`, | |
| feature_1_image: `{{ block.settings.feature_1_image | img_url: '256x256' }}`, | |
| feature_2_title: `{{ block.settings.feature_2_title }}`, | |
| feature_2_description: `{{ block.settings.feature_2_description }}`, | |
| feature_2_image: `{{ block.settings.feature_2_image | img_url: '256x256' }}`, | |
| feature_3_title: `{{ block.settings.feature_3_title }}`, | |
| feature_3_description: `{{ block.settings.feature_3_description }}`, | |
| feature_3_image: `{{ block.settings.feature_3_image | img_url: '256x256' }}`, | |
| feature_4_title: `{{ block.settings.feature_4_title }}`, | |
| feature_4_description: `{{ block.settings.feature_4_description }}`, | |
| feature_4_image: `{{ block.settings.feature_4_image | img_url: '256x256' }}`, | |
| button_text: `{{ block.settings.button_text }}`, | |
| button_url: `{{ block.settings.button_url }}` | |
| }); | |
| {% endif %} | |
| {% endfor %} | |
| var sectionID = `{{ section.id }}` | |
| window[sectionID] = window[sectionID] || {}; | |
| window[sectionID] = (function() { | |
| var sectionID = `{{ section.id }}` | |
| function isMobile() { | |
| return window.matchMedia("(max-width: 749px)").matches; | |
| } | |
| function _waitForElement(selector, delay = 50, tries = 100) { | |
| const element = document.querySelector(selector); | |
| if (!window[`__${selector}`]) { | |
| window[`__${selector}`] = 0; | |
| window[`__${selector}__delay`] = delay; | |
| window[`__${selector}__tries`] = tries; | |
| } | |
| function _search() { | |
| return new Promise((resolve) => { | |
| window[`__${selector}`]++; | |
| setTimeout(resolve, window[`__${selector}__delay`]); | |
| }); | |
| } | |
| if (element === null) { | |
| if (window[`__${selector}`] >= window[`__${selector}__tries`]) { | |
| window[`__${selector}`] = 0; | |
| return Promise.resolve(null); | |
| } | |
| return _search().then(() => _waitForElement(selector)); | |
| } else { | |
| return Promise.resolve(element); | |
| } | |
| } | |
| function createModal(modalData) { | |
| const { | |
| title = "Sports Car Performance", | |
| description = "Experience the thrill of high-performance driving with our premium sports car collection.", | |
| modalImage = "https://images.ctfassets.net/v3n26e09qg2r/4zkkZu1X3qcJcgt64WaHwy/0259fa51ddf02ee9b0c018f6a8d79f17/Frame__2_main_.svg?w=828&q=75", | |
| features = [ | |
| { | |
| title: "Racing Performance", | |
| description: "Track-ready sports cars for every driving enthusiast", | |
| image: "https://images.ctfassets.net/v3n26e09qg2r/1nWuwpGOgnLWCtSHKNck3t/983b0a313777b56135c7f0a510e6fb90/guided-meditations.svg?w=256&q=75" | |
| }, | |
| { | |
| title: "Turbo Engine", | |
| description: "High-performance turbocharged engines for maximum power", | |
| image: "https://images.ctfassets.net/v3n26e09qg2r/4yMPCXt6hGwp7s8b6gbZWv/9d4ff20796bd349766b9cbc48b4e1875/Frame__2.1_.svg?w=128&q=75" | |
| }, | |
| { | |
| title: "Aerodynamic Design", | |
| description: "Sleek, wind-tunnel tested designs for optimal performance", | |
| image: "https://images.ctfassets.net/v3n26e09qg2r/78pe0VKW0gh1TPLqsTrkkH/5eff17a0720d690d9260f315c2b5d0e8/stress-management.svg?w=256&q=75" | |
| }, | |
| { | |
| title: "Professional Training", | |
| description: "Learn advanced driving techniques from professional instructors", | |
| image: "https://images.ctfassets.net/v3n26e09qg2r/4OqqAeAbqxZwqOaGaNRcBw/7929cc5987ea2f9e03cf7729ce08ab3f/Frame.webp?fm=webp&w=256&q=75" | |
| } | |
| ], | |
| buttonText = "Test Drive Today", | |
| buttonLink = "#" | |
| } = modalData; | |
| const featuresHTML = features.map(feature => ` | |
| <div data-testid="need-state-modal-content-item" class="sj-twp-1-popup__css-3"> | |
| <div class="sj-twp-1-popup__css-11" data-testid="need-state-modal-content-item-image-container"> | |
| <div class="sj-twp-1-popup__css-10" data-testid="image"> | |
| <div class="sj-twp-1-popup__css-12"> | |
| <img aria-hidden="true" alt="" loading="lazy" width="95" height="95" decoding="async" data-nimg="1" srcset="${feature.image} 1x, ${feature.image} 2x" src="${feature.image}" style="color: transparent; display: block; opacity: 0; position: static;"> | |
| </div> | |
| <img alt="${feature.title}" loading="lazy" width="95" height="95" decoding="async" data-nimg="1" srcset="${feature.image} 1x, ${feature.image} 2x" src="${feature.image}" style="color: transparent;"> | |
| </div> | |
| </div> | |
| <div class="sj-twp-1-popup__css-4"> | |
| <h3 data-testid="need-state-modal-content-item-title" class="sj-twp-1-popup__css-6 sj-twp-1-popup__feature-title"> | |
| ${feature.title} | |
| </h3> | |
| <div data-testid="need-state-modal-content-item-description" class="sj-twp-1-popup__css-z2syc0 sj-twp-1-popup__feature-description"> | |
| ${feature.description} | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| const isButtonDisabled = !buttonLink || buttonLink === "#" || buttonLink.trim() === ""; | |
| const buttonClass = isButtonDisabled ? "sj-twp-1-popup__css-hs4zay sj-twp-1-popup__button sj-twp-1-popup__button--disabled" : "sj-twp-1-popup__css-hs4zay sj-twp-1-popup__button"; | |
| const buttonHref = isButtonDisabled ? "javascript:void(0)" : buttonLink; | |
| return ` | |
| <div class="sj-twp-1-popup__html"> | |
| <div class="sj-twp-1-popup__body"> | |
| <div class="sj-twp-1-popup__next"> | |
| <div class="sj-twp-1-popup__main" data-testid="root-layout"> | |
| <div data-testid="module-renderer" class="sj-twp-1-popup__css-79elbk"> | |
| <div> | |
| <div data-testid="need-state-container-container" class="sj-twp-1-popup__css-wc2mcx"> | |
| <div class="sj-twp-1-popup__css-5iuxxk"> | |
| <div data-testid="need-state-container-need-state-item"> | |
| <div class="sj-twp-1-popup__css-7"> | |
| <div class="sj-twp-1-popup__needStateModalBackground sj-twp-1-popup__css-7sxv8o" data-testid="need-state-modal-background"> | |
| </div> | |
| <div role="dialog" aria-modal="true" data-testid="modal-wrapper"> | |
| <div class="sj-twp-1-popup__needStateModalCard sj-twp-1-popup__css-1" data-testid="need-state-modal-card" data-modal-style="{{ section.settings.modal_image_style }}"> | |
| <button class="sj-twp-1-popup__css-b9gkq6" data-testid="need-state-modal-close-button" type="button"> | |
| <span class="sj-twp-1-popup__css-1ss1hc4"> | |
| <svg width="1em" height="1em" fill="none" viewBox="0 0 24 24"> | |
| <path fill="currentColor" fill-rule="evenodd" d="M18.011 4.576l-6.01 6.011-6.01-6.01a.5.5 0 00-.708 0l-.707.707a.5.5 0 000 .707l6.011 6.01-6.01 6.01a.5.5 0 000 .707l.706.708a.5.5 0 00.707 0l6.011-6.01 6.01 6.01a.5.5 0 00.707 0l.708-.708a.5.5 0 000-.707l-6.01-6.01 6.01-6.01a.5.5 0 000-.707l-.708-.708a.5.5 0 00-.707 0z" clip-rule="evenodd"> | |
| </path> | |
| </svg> | |
| </span> | |
| </button> | |
| <div class="sj-twp-1-popup__css-5" data-testid="need-state-modal-card-body"> | |
| <div style="opacity: 1;"> | |
| <div data-testid="need-state-modal-content" class="sj-twp-1-popup__css-13"> | |
| <div class="sj-twp-1-popup__css-2" data-testid="need-state-modal-content-image-container" data-modal-style="{{ section.settings.modal_image_style }}"> | |
| <div class="sj-twp-1-popup__css-10" data-testid="image"> | |
| <div class="sj-twp-1-popup__css-flrva9"> | |
| <img aria-hidden="true" alt="" loading="lazy" width="{{ section.settings.modal_image_width_desktop }}" height="259" decoding="async" data-nimg="1" srcset="${modalImage} 1x, ${modalImage} 2x" src="${modalImage}" style="color: transparent; display: block; opacity: 0; position: static;"> | |
| </div> | |
| <img alt="${title}" loading="lazy" width="{{ section.settings.modal_image_width_desktop }}" height="259" decoding="async" data-nimg="1" srcset="${modalImage} 1x, ${modalImage} 2x" src="${modalImage}" style="color: transparent;"> | |
| </div> | |
| </div> | |
| <h4 data-testid="need-state-modal-content-title" class="sj-twp-1-popup__css-lsapbq sj-twp-1-popup__modal-title" data-modal-style="{{ section.settings.modal_image_style }}"> | |
| ${title} | |
| </h4> | |
| <div data-testid="need-state-modal-content-description" class="sj-twp-1-popup__css-jegghi sj-twp-1-popup__modal-description"> | |
| ${description} | |
| </div> | |
| <div class="sj-twp-1-popup__css-14" data-feature-count="${features.length}"> | |
| ${featuresHTML} | |
| </div> | |
| </div> | |
| <div class="sj-twp-1-popup__button-container"> | |
| <a class="${buttonClass}" href="${buttonHref}" target="_self" rel="" data-testid="need-state-modal-content-button-link"> | |
| <span class="sj-twp-1-popup__css-9"> | |
| ${buttonText} | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div>`; | |
| } | |
| function injectModalIntoBody(modalData) { | |
| const existingModal = document.querySelector('.sj-twp-1-popup__html'); | |
| if (existingModal) { | |
| return existingModal; | |
| } | |
| const modalHTML = createModal(modalData); | |
| if (modalHTML) { | |
| document.querySelector('body').insertAdjacentHTML('beforeend', modalHTML); | |
| const injectedModal = document.querySelector('.sj-twp-1-popup__html'); | |
| if (injectedModal) { | |
| const closeButton = injectedModal.querySelector('.sj-twp-1-popup__css-b9gkq6'); | |
| if (closeButton) { | |
| closeButton.addEventListener('click', handleCloseModal); | |
| } | |
| const modalBackground = injectedModal.querySelector('.sj-twp-1-popup__needStateModalBackground'); | |
| if (modalBackground) { | |
| modalBackground.addEventListener('click', handleCloseModal); | |
| } | |
| if ({{ section.settings.freeze_scroll | json }}) { | |
| document.documentElement.style.overflow = 'hidden'; | |
| } | |
| setTimeout(() => { | |
| injectedModal.classList.add('sj-twp-1-popup__html--visible'); | |
| }, 10); | |
| } | |
| return injectedModal; | |
| } | |
| return null; | |
| } | |
| function handleTabClick(event) { | |
| const tabElement = event.target.closest('.sj-twp-1__c-9'); | |
| const blockId = tabElement.getAttribute('data-block-id'); | |
| window.currentOpenBlockId = blockId; | |
| const blockData = window[`block-${blockId}`]; | |
| if (blockData) { | |
| const modalData = { | |
| title: blockData.modalTitle, | |
| description: blockData.modalDescription, | |
| modalImage: blockData.modalImage, | |
| features: blockData.features, | |
| buttonText: blockData.buttonText, | |
| buttonLink: blockData.buttonLink | |
| }; | |
| injectModalIntoBody(modalData); | |
| } | |
| } | |
| function handleCloseModal() { | |
| const modalInBody = document.querySelector('.sj-twp-1-popup__html'); | |
| if (modalInBody) { | |
| window.currentOpenBlockId = null; | |
| modalInBody.classList.remove('sj-twp-1-popup__html--visible'); | |
| setTimeout(() => { | |
| modalInBody.remove(); | |
| if ({{ section.settings.freeze_scroll | json }}) { | |
| document.documentElement.style.overflow = ''; | |
| } | |
| }, 300); | |
| } | |
| } | |
| function updateOpenPopupContent(blockId) { | |
| const openModal = document.querySelector('.sj-twp-1-popup__html'); | |
| if (!openModal) return; | |
| const blockData = window[`block-${blockId}`]; | |
| if (!blockData) return; | |
| var modalTitle = openModal.querySelector('.sj-twp-1-popup__modal-title'); | |
| if (modalTitle) { | |
| modalTitle.textContent = blockData.modalTitle; | |
| } | |
| const modalDescription = openModal.querySelector('.sj-twp-1-popup__modal-description'); | |
| if (modalDescription) { | |
| modalDescription.textContent = blockData.modalDescription; | |
| } | |
| const modalImageContainer = openModal.querySelector('.sj-twp-1-popup__css-2'); | |
| if (modalImageContainer) { | |
| modalImageContainer.setAttribute('data-modal-style', '{{ section.settings.modal_image_style }}'); | |
| } | |
| const modalCard = openModal.querySelector('.sj-twp-1-popup__css-1'); | |
| if (modalCard) { | |
| modalCard.setAttribute('data-modal-style', '{{ section.settings.modal_image_style }}'); | |
| } | |
| var modalTitle = openModal.querySelector('.sj-twp-1-popup__css-lsapbq'); | |
| if (modalTitle) { | |
| modalTitle.setAttribute('data-modal-style', '{{ section.settings.modal_image_style }}'); | |
| } | |
| const modalImages = openModal.querySelectorAll('[data-testid="image"] img'); | |
| modalImages.forEach(img => { | |
| if (img.src && (img.src.includes('800x600') || img.closest('.sj-twp-1-popup__css-flrva9'))) { | |
| img.src = blockData.modalImage; | |
| img.srcset = `${blockData.modalImage} 1x, ${blockData.modalImage} 2x`; | |
| } | |
| }); | |
| const featureContainer = openModal.querySelector('.sj-twp-1-popup__css-14'); | |
| if (featureContainer) { | |
| featureContainer.setAttribute('data-feature-count', blockData.features.length); | |
| featureContainer.innerHTML = ''; | |
| const featuresHTML = blockData.features.map(feature => ` | |
| <div data-testid="need-state-modal-content-item" class="sj-twp-1-popup__css-3"> | |
| <div class="sj-twp-1-popup__css-11" data-testid="need-state-modal-content-item-image-container"> | |
| <div class="sj-twp-1-popup__css-10" data-testid="image"> | |
| <div class="sj-twp-1-popup__css-12"> | |
| <img aria-hidden="true" alt="" loading="lazy" width="95" height="95" decoding="async" data-nimg="1" srcset="${feature.image} 1x, ${feature.image} 2x" src="${feature.image}" style="color: transparent; display: block; opacity: 0; position: static;"> | |
| </div> | |
| <img alt="${feature.title}" loading="lazy" width="95" height="95" decoding="async" data-nimg="1" srcset="${feature.image} 1x, ${feature.image} 2x" src="${feature.image}" style="color: transparent;"> | |
| </div> | |
| </div> | |
| <div class="sj-twp-1-popup__css-4"> | |
| <h3 data-testid="need-state-modal-content-item-title" class="sj-twp-1-popup__css-6 sj-twp-1-popup__feature-title"> | |
| ${feature.title} | |
| </h3> | |
| <div data-testid="need-state-modal-content-item-description" class="sj-twp-1-popup__css-z2syc0 sj-twp-1-popup__feature-description"> | |
| ${feature.description} | |
| </div> | |
| </div> | |
| </div> | |
| `).join(''); | |
| featureContainer.insertAdjacentHTML('beforeend', featuresHTML); | |
| } | |
| const button = openModal.querySelector('.sj-twp-1-popup__button'); | |
| if (button) { | |
| const buttonSpan = button.querySelector('span'); | |
| if (buttonSpan) { | |
| buttonSpan.textContent = blockData.buttonText; | |
| } | |
| // Update button disabled state | |
| const isButtonDisabled = !blockData.buttonLink || blockData.buttonLink === "#" || blockData.buttonLink.trim() === ""; | |
| if (isButtonDisabled) { | |
| button.classList.add('sj-twp-1-popup__button--disabled'); | |
| button.href = "javascript:void(0)"; | |
| } else { | |
| button.classList.remove('sj-twp-1-popup__button--disabled'); | |
| button.href = blockData.buttonLink; | |
| } | |
| } | |
| } | |
| function updateTabImages() { | |
| const tabElements = document.querySelectorAll(`[id*='${sectionID}'] .sj-twp-1__c-9`); | |
| tabElements.forEach(tab => { | |
| const blockId = tab.getAttribute('data-block-id'); | |
| const blockData = window[`block-${blockId}`]; | |
| if (blockData && blockData.tab_image) { | |
| const tabIconContainer = tab.querySelector('.sj-twp-1__c-8'); | |
| if (tabIconContainer) { | |
| const existingImg = tabIconContainer.querySelector('.sj-twp-1__tab-icon'); | |
| if (existingImg) { | |
| existingImg.src = blockData.tab_image; | |
| } else { | |
| const newImg = document.createElement('img'); | |
| newImg.src = blockData.tab_image; | |
| newImg.alt = 'Tab Icon'; | |
| newImg.className = 'sj-twp-1__tab-icon'; | |
| tabIconContainer.innerHTML = ''; | |
| tabIconContainer.appendChild(newImg); | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function initTabClickListeners() { | |
| const tabElements = document.querySelectorAll(`[id*='${sectionID}'] .sj-twp-1__c-9`); | |
| tabElements.forEach(tab => { | |
| tab.addEventListener('click', handleTabClick); | |
| }); | |
| } | |
| return { | |
| init: async function() { | |
| document.addEventListener("DOMContentLoaded", function() { | |
| initTabClickListeners(); | |
| }); | |
| document.addEventListener("shopify:section:load", async function(e) { | |
| if (isDesignMode()) { | |
| const openModal = document.querySelector('.sj-twp-1-popup__html'); | |
| const openBlockId = window.currentOpenBlockId; | |
| {% for block in section.blocks %} | |
| {% if block.type == 'tab' %} | |
| createBlockData('{{ block.id }}', { | |
| tab_title: `{{ block.settings.tab_title }}`, | |
| tab_image: `{{ block.settings.tab_image | img_url: '80x80' }}`, | |
| modal_title: `{{ block.settings.modal_title }}`, | |
| modal_description: `{{ block.settings.modal_description }}`, | |
| modal_image: `{{ block.settings.modal_image | img_url: '800x600' }}`, | |
| feature_1_title: `{{ block.settings.feature_1_title }}`, | |
| feature_1_description: `{{ block.settings.feature_1_description }}`, | |
| feature_1_image: `{{ block.settings.feature_1_image | img_url: '256x256' }}`, | |
| feature_2_title: `{{ block.settings.feature_2_title }}`, | |
| feature_2_description: `{{ block.settings.feature_2_description }}`, | |
| feature_2_image: `{{ block.settings.feature_2_image | img_url: '256x256' }}`, | |
| feature_3_title: `{{ block.settings.feature_3_title }}`, | |
| feature_3_description: `{{ block.settings.feature_3_description }}`, | |
| feature_3_image: `{{ block.settings.feature_3_image | img_url: '256x256' }}`, | |
| feature_4_title: `{{ block.settings.feature_4_title }}`, | |
| feature_4_description: `{{ block.settings.feature_4_description }}`, | |
| feature_4_image: `{{ block.settings.feature_4_image | img_url: '256x256' }}`, | |
| button_text: `{{ block.settings.button_text }}`, | |
| button_url: `{{ block.settings.button_url }}` | |
| }); | |
| {% endif %} | |
| {% endfor %} | |
| if (openModal && openBlockId) { | |
| updateOpenPopupContent(openBlockId); | |
| } | |
| updateTabImages(); | |
| initTabClickListeners(); | |
| } | |
| }); | |
| document.addEventListener("shopify:section:unload", async function(e) { | |
| }); | |
| document.addEventListener("shopify:section:reorder", async function() { | |
| }); | |
| document.addEventListener("shopify:section:select", async function(e) { | |
| }); | |
| document.addEventListener("shopify:section:deselect", async function(e) { | |
| }); | |
| }, | |
| }; | |
| })(); | |
| window[sectionID].init(); | |
| </script> | |
| {% schema %} | |
| { | |
| "name": "SJ Tabs With Popup", | |
| "settings": [ | |
| { | |
| "type": "text", | |
| "id": "section_title", | |
| "label": "Section Title", | |
| "default": "What type of car are you looking for?" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "use_custom_font", | |
| "label": "Use custom font?", | |
| "info": "If unchecked, the section will use the website's current font. Enable this and pick a font below if you want a custom font.", | |
| "default": false | |
| }, | |
| { | |
| "type": "font_picker", | |
| "id": "font_family", | |
| "label": "Font family", | |
| "default": "helvetica_n4" | |
| }, | |
| { | |
| "type": "checkbox", | |
| "id": "freeze_scroll", | |
| "label": "Freeze scroll when popup is open (recommended)", | |
| "info": "Prevents background page scrolling when the modal is open for better user experience.", | |
| "default": true | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Typography Settings" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "modal_title_font_size_desktop", | |
| "label": "Modal Title Font Size (Desktop)", | |
| "min": 12, | |
| "max": 72, | |
| "step": 2, | |
| "unit": "px", | |
| "default": 32 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "modal_title_font_size_mobile", | |
| "label": "Modal Title Font Size (Mobile)", | |
| "min": 12, | |
| "max": 48, | |
| "step": 2, | |
| "unit": "px", | |
| "default": 24 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "modal_description_font_size_desktop", | |
| "label": "Modal Description Font Size (Desktop)", | |
| "min": 10, | |
| "max": 24, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "modal_description_font_size_mobile", | |
| "label": "Modal Description Font Size (Mobile)", | |
| "min": 10, | |
| "max": 20, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 14 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "feature_title_font_size_desktop", | |
| "label": "Feature Title Font Size (Desktop)", | |
| "min": 10, | |
| "max": 32, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 18 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "feature_title_font_size_mobile", | |
| "label": "Feature Title Font Size (Mobile)", | |
| "min": 10, | |
| "max": 24, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "feature_description_font_size_desktop", | |
| "label": "Feature Description Font Size (Desktop)", | |
| "min": 10, | |
| "max": 20, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 14 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "feature_description_font_size_mobile", | |
| "label": "Feature Description Font Size (Mobile)", | |
| "min": 10, | |
| "max": 18, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 12 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_font_size_desktop", | |
| "label": "Button Font Size (Desktop)", | |
| "min": 10, | |
| "max": 24, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "button_font_size_mobile", | |
| "label": "Button Font Size (Mobile)", | |
| "min": 10, | |
| "max": 20, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 14 | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Tab Styling" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "tab_font_size_desktop", | |
| "label": "Tab Font Size (Desktop)", | |
| "min": 10, | |
| "max": 32, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 16 | |
| }, | |
| { | |
| "type": "range", | |
| "id": "tab_font_size_mobile", | |
| "label": "Tab Font Size (Mobile)", | |
| "min": 10, | |
| "max": 24, | |
| "step": 1, | |
| "unit": "px", | |
| "default": 14 | |
| }, | |
| { | |
| "type": "color", | |
| "id": "tab_text_color", | |
| "label": "Tab Text Color", | |
| "default": "#000000" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "tab_background_color", | |
| "label": "Tab Background Color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "tab_border_color", | |
| "label": "Tab Border Color", | |
| "default": "#e0e0e0" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Feature Image Settings" | |
| }, | |
| { | |
| "type": "number", | |
| "id": "feature_image_width_desktop", | |
| "label": "Feature Image Width (Desktop)", | |
| "default": 60, | |
| "info": "Width in pixels for feature images on desktop. Default is 60px." | |
| }, | |
| { | |
| "type": "number", | |
| "id": "feature_image_width_mobile", | |
| "label": "Feature Image Width (Mobile)", | |
| "default": 36, | |
| "info": "Width in pixels for feature images on mobile. Default is 36px." | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Tab Icon Settings" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "tab_icon", | |
| "label": "Tab Icon" | |
| }, | |
| { | |
| "type": "number", | |
| "id": "tab_icon_width", | |
| "label": "Tab Icon Width", | |
| "default": 40, | |
| "info": "Width in pixels for the tab icon. Default is 40px." | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Modal Color Settings" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "modal_background_color", | |
| "label": "Modal Background Color", | |
| "default": "#ffb700" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "modal_text_color", | |
| "label": "Modal Text Color", | |
| "default": "#2d2c2b" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "button_background_color", | |
| "label": "Button Background Color", | |
| "default": "#ffffff" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "button_text_color", | |
| "label": "Button Text Color", | |
| "default": "#2d2c2b" | |
| }, | |
| { | |
| "type": "color", | |
| "id": "close_button_color", | |
| "label": "Close Button X Color", | |
| "default": "#44423f" | |
| }, | |
| { | |
| "type": "range", | |
| "id": "close_button_opacity", | |
| "label": "Close Button Background Opacity", | |
| "min": 0, | |
| "max": 100, | |
| "step": 5, | |
| "unit": "%", | |
| "default": 20, | |
| "info": "Opacity percentage for the close button background circle" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Modal Image Settings" | |
| }, | |
| { | |
| "type": "select", | |
| "id": "modal_image_style", | |
| "label": "Modal Image Style", | |
| "options": [ | |
| { | |
| "value": "partially_off", | |
| "label": "Partially off modal" | |
| }, | |
| { | |
| "value": "inside_modal", | |
| "label": "Inside modal" | |
| } | |
| ], | |
| "default": "partially_off", | |
| "info": "Choose how the modal main image is positioned relative to the modal. Desktop only." | |
| }, | |
| { | |
| "type": "number", | |
| "id": "modal_image_width_desktop", | |
| "label": "Modal Image Width (Desktop)", | |
| "default": 398, | |
| "info": "Width in pixels for the modal main image on desktop. Default is 398px." | |
| }, | |
| { | |
| "type": "number", | |
| "id": "modal_image_width_mobile", | |
| "label": "Modal Image Width (Mobile)", | |
| "default": 300, | |
| "info": "Width in pixels for the modal main image on mobile. Default is 300px." | |
| } | |
| ], | |
| "blocks": [ | |
| { | |
| "type": "tab", | |
| "name": "Tab", | |
| "limit": 6, | |
| "settings": [ | |
| { | |
| "type": "text", | |
| "id": "tab_title", | |
| "label": "Tab Title", | |
| "default": "Tab Title" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "tab_image", | |
| "label": "Tab Image", | |
| "info": "Optional custom image for this tab. If not provided, the default icon will be used." | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Modal Content" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "modal_title", | |
| "label": "Modal Title", | |
| "default": "Modal Title" | |
| }, | |
| { | |
| "type": "textarea", | |
| "id": "modal_description", | |
| "label": "Modal Description", | |
| "default": "Modal description text" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "modal_image", | |
| "label": "Modal Main Image" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Feature 1" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "feature_1_title", | |
| "label": "Feature 1 Title", | |
| "default": "Feature 1" | |
| }, | |
| { | |
| "type": "textarea", | |
| "id": "feature_1_description", | |
| "label": "Feature 1 Description", | |
| "default": "Feature 1 description" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "feature_1_image", | |
| "label": "Feature 1 Image" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Feature 2" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "feature_2_title", | |
| "label": "Feature 2 Title", | |
| "default": "Feature 2" | |
| }, | |
| { | |
| "type": "textarea", | |
| "id": "feature_2_description", | |
| "label": "Feature 2 Description", | |
| "default": "Feature 2 description" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "feature_2_image", | |
| "label": "Feature 2 Image" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Feature 3" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "feature_3_title", | |
| "label": "Feature 3 Title", | |
| "default": "Feature 3" | |
| }, | |
| { | |
| "type": "textarea", | |
| "id": "feature_3_description", | |
| "label": "Feature 3 Description", | |
| "default": "Feature 3 description" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "feature_3_image", | |
| "label": "Feature 3 Image" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Feature 4" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "feature_4_title", | |
| "label": "Feature 4 Title", | |
| "default": "Feature 4" | |
| }, | |
| { | |
| "type": "textarea", | |
| "id": "feature_4_description", | |
| "label": "Feature 4 Description", | |
| "default": "Feature 4 description" | |
| }, | |
| { | |
| "type": "image_picker", | |
| "id": "feature_4_image", | |
| "label": "Feature 4 Image" | |
| }, | |
| { | |
| "type": "header", | |
| "content": "Button" | |
| }, | |
| { | |
| "type": "text", | |
| "id": "button_text", | |
| "label": "Button Text", | |
| "default": "Learn More" | |
| }, | |
| { | |
| "type": "url", | |
| "id": "button_url", | |
| "label": "Button URL", | |
| "info": "Optional URL for the button. If not provided, the button will be disabled." | |
| } | |
| ] | |
| } | |
| ], | |
| "presets": [ | |
| { | |
| "name": "SJ Tabs With Popup", | |
| "settings": { | |
| "section_title": "What type of car are you looking for?" | |
| }, | |
| "blocks": [ | |
| { | |
| "type": "tab", | |
| "settings": { | |
| "tab_title": "Sports Car", | |
| "modal_title": "Sports Car Performance", | |
| "modal_description": "Experience the thrill of high-performance driving with our premium sports car collection.", | |
| "feature_1_title": "Racing Performance", | |
| "feature_1_description": "Track-ready sports cars for every driving enthusiast", | |
| "feature_2_title": "Turbo Engine", | |
| "feature_2_description": "High-performance turbocharged engines for maximum power", | |
| "feature_3_title": "Aerodynamic Design", | |
| "feature_3_description": "Sleek, wind-tunnel tested designs for optimal performance", | |
| "feature_4_title": "Professional Training", | |
| "feature_4_description": "Learn advanced driving techniques from professional instructors", | |
| "button_text": "Test Drive Today" | |
| } | |
| }, | |
| { | |
| "type": "tab", | |
| "settings": { | |
| "tab_title": "Family SUV", | |
| "modal_title": "Family SUV Comfort", | |
| "modal_description": "Perfect for families who need space, safety, and reliability for all their adventures.", | |
| "feature_1_title": "Spacious Interior", | |
| "feature_1_description": "Ample room for passengers and cargo", | |
| "feature_2_title": "Safety Features", | |
| "feature_2_description": "Advanced safety technology to protect your family", | |
| "feature_3_title": "All-Wheel Drive", | |
| "feature_3_description": "Confident driving in all weather conditions", | |
| "feature_4_title": "Fuel Efficiency", | |
| "feature_4_description": "Economical driving without compromising performance", | |
| "button_text": "Schedule Test Drive" | |
| } | |
| }, | |
| { | |
| "type": "tab", | |
| "settings": { | |
| "tab_title": "Electric Vehicle", | |
| "modal_title": "Electric Vehicle Innovation", | |
| "modal_description": "Join the future of driving with our cutting-edge electric vehicle technology.", | |
| "feature_1_title": "Zero Emissions", | |
| "feature_1_description": "Environmentally friendly driving with zero tailpipe emissions", | |
| "feature_2_title": "Long Range", | |
| "feature_2_description": "Extended driving range on a single charge", | |
| "feature_3_title": "Fast Charging", | |
| "feature_3_description": "Quick charging capabilities for convenience", | |
| "feature_4_title": "Smart Technology", | |
| "feature_4_description": "Advanced infotainment and connectivity features", | |
| "button_text": "Explore EV Options" | |
| } | |
| }, | |
| { | |
| "type": "tab", | |
| "settings": { | |
| "tab_title": "Luxury Sedan", | |
| "modal_title": "Luxury Sedan Excellence", | |
| "modal_description": "Experience the pinnacle of automotive luxury and sophistication.", | |
| "feature_1_title": "Premium Materials", | |
| "feature_1_description": "Handcrafted interiors with the finest materials", | |
| "feature_2_title": "Advanced Comfort", | |
| "feature_2_description": "State-of-the-art comfort and convenience features", | |
| "feature_3_title": "Quiet Cabin", | |
| "feature_3_description": "Whisper-quiet interior for a serene driving experience", | |
| "feature_4_title": "Personal Service", | |
| "feature_4_description": "Dedicated concierge service for luxury car owners", | |
| "button_text": "Experience Luxury" | |
| } | |
| }, | |
| { | |
| "type": "tab", | |
| "settings": { | |
| "tab_title": "Compact Car", | |
| "modal_title": "Compact Car Efficiency", | |
| "modal_description": "Perfect for city driving with excellent fuel economy and easy parking.", | |
| "feature_1_title": "City Friendly", | |
| "feature_1_description": "Easy to maneuver and park in tight spaces", | |
| "feature_2_title": "Fuel Efficient", | |
| "feature_2_description": "Excellent gas mileage for cost-effective driving", | |
| "feature_3_title": "Reliable Performance", | |
| "feature_3_description": "Dependable transportation for daily commutes", | |
| "feature_4_title": "Affordable Maintenance", | |
| "feature_4_description": "Low maintenance costs and easy service", | |
| "button_text": "View Compact Cars" | |
| } | |
| }, | |
| { | |
| "type": "tab", | |
| "settings": { | |
| "tab_title": "Pickup Truck", | |
| "modal_title": "Pickup Truck Power", | |
| "modal_description": "Built tough for work and play with unmatched capability and durability.", | |
| "feature_1_title": "Heavy Duty", | |
| "feature_1_description": "Built to handle the toughest jobs and terrain", | |
| "feature_2_title": "Towing Capacity", | |
| "feature_2_description": "Impressive towing and hauling capabilities", | |
| "feature_3_title": "Off-Road Ready", | |
| "feature_3_description": "Designed for adventure and off-road exploration", | |
| "feature_4_title": "Work Ready", | |
| "feature_4_description": "Professional-grade features for commercial use", | |
| "button_text": "Build Your Truck" | |
| } | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| {% endschema %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment