Liquid Gold Vault-3

Sales Features

SWITCH TO DESKTOP FOR THE BEST VIEWING EXPERIENCE
View Code
CSS
                        

                            
                    
.lg-countdown-announcement-bar {
    text-align: center;
    padding: 10px 0;
}

.lg-countdown-wrapper {
    font-size: 16px;
    line-height: 19.7px;
    letter-spacing: -0.01em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.countdown-text-1 {
    font-weight:700;
}
.lg-countdown-inner-container {
        display: flex;
        flex-direction: column;
}

.lg-countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.lg-countdown-unit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    width: 3rem;
    height: 3rem;
    margin: 0 2px;
    padding: 3px;
    font-size: 12px;
    line-height: 20px;
}

.lg-countdown-number {
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.lg-countdown-label {
    font-size: 1rem;
    line-height: 1;
    text-transform: uppercase;
}

.lg-countdown-separator {
    padding: 0 0.15rem;
    font-weight: 800;
}
.lg-countdown-link {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:5px;
}



@media (max-width: 740px) {
    .lg-countdown-wrapper {
        font-size: 16px;
        padding: 0px 0;
        gap: 7px;
    }
.lg-countdown-number {
    font-size: 15px!important;
    font-weight: 900;
    line-height: 1;
}
.lg-countdown-label {
    font-size: 7px!important;
    line-height: 1;
    text-transform: uppercase;
}
    .lg-countdown-timer {
        flex-wrap: wrap;
    }

    .lg-countdown-unit {
        width: 3rem;
        height: 3rem;
    }

    .lg-countdown-number {
        font-size: 0.8rem;
    }

    .lg-countdown-label {
        font-size: 0.45rem;
    }
}

@media (max-width: 379px) {
    
    .lg-countdown-wrapper {
        font-size: 12px;
        gap: 5px;
    }
.lg-countdown-text.countdown-text-1 {
    font-size:14px;
    }
    .lg-countdown-unit {
        width: 3rem;
        height: 3rem;
    }

    .lg-countdown-separator {
        padding: 0 0.1rem;
    }
}
HTML
                        

                            
                    

{% unless section.settings.sale-collection-link == blank %}
<a style="text-decoration:none;" href="{{section.settings.sale-collection-link}}">
{% endunless %}
<div style="color:{{section.settings.text-color}};background:{{section.settings.bg-color}} " class='ss-code lg-countdown-announcement-bar'>
 <div class='lg-container'>
  <div class='lg-countdown-wrapper'>
  <div class="lg-countdown-inner-container">
   <span class='lg-countdown-text countdown-text-1'>{{section.settings.first_text}}</span>
   <span class='lg-countdown-text'>{{section.settings.second_text}}</span>
</div>
   <div data-timer="{{section.settings.date}}" class='lg-countdown-timer' id='js-clock'>
    <div style="color:{{section.settings.countdown-text}};background:{{section.settings.countdown-bg}}" class='lg-countdown-unit'>
     <div class='lg-countdown-number' id='js-clock-days'>00</div>
     <div class='lg-countdown-label'>Days</div>
    </div>
    <div style="color:{{section.settings.text-color}}" class='lg-countdown-separator'>:</div>
    <div style="color:{{section.settings.countdown-text}};background:{{section.settings.countdown-bg}}" class='lg-countdown-unit'>
     <div class='lg-countdown-number' id='js-clock-hours'>00</div>
     <div class='lg-countdown-label'>Hrs</div>
    </div>
    <div style="color:{{section.settings.text-color}}"  class='lg-countdown-separator'>:</div>
    <div style="color:{{section.settings.countdown-text}};background:{{section.settings.countdown-bg}}" class='lg-countdown-unit'>
     <div class='lg-countdown-number' id='js-clock-minutes'>00</div>
     <div class='lg-countdown-label'>Min</div>
    </div>
    <div style="color:{{section.settings.text-color}}"  class='lg-countdown-separator'>:</div>
    <div style="color:{{section.settings.countdown-text}};background:{{section.settings.countdown-bg}}" class='lg-countdown-unit'>
     <div class='lg-countdown-number' id='js-clock-seconds'>00</div>
     <div class='lg-countdown-label'>Sec</div>
    </div>
    {% unless section.settings.sale-collection-link == blank %}
    <div class="lg-countdown-link">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="{{section.settings.text-color}}" height="15px">
  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
</svg>
    </div>
    {% endunless %}
   </div>
  </div>
 </div>
</div>
{% unless section.settings.sale-collection-link == blank %}
</a>   
{% endunless %}
JavaScript
                        

                            
                    
/* This can be loaded directly onto the page inside of a script tag eg.
<script>
JS code here
</script>
However, this will have an impact on the theme loading speed as JavaScript is a render blocking resource. This isn't advisable. Instead, create a new file under assets folder called liquid-gold.js. Paste this sections JavaScript into it.

(assets>liquid-gold.js)
Then go to your theme.liquid and search for .js files at the top of the HTML document. You should see tags with a similiar format as the script below. Paste the following script there:
 <script src="{{ 'liquid-gold.js' | asset_url }}" defer="async"></script>

This will load your JavaScript in the background but won't execute it until the entire document has been rendered. 

If you prefer video instructions format, please check the video installation.

*/ 
// Countdown Timer Script
(function() {
    let endDate = document.querySelector('#js-clock').getAttribute('data-timer')
    let endTime = new Date(endDate).getTime();

    function updateTimer() {
        const now = new Date().getTime();
        const timeLeft = endTime - now;

        if (timeLeft < 0) {
            document.getElementById('js-clock').innerHTML = '<span>Sale Ended</span>';
            return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

        document.getElementById('js-clock-days').textContent = String(days).padStart(2, '0');
        document.getElementById('js-clock-hours').textContent = String(hours).padStart(2, '0');
        document.getElementById('js-clock-minutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('js-clock-seconds').textContent = String(seconds).padStart(2, '0');
    }

    setInterval(updateTimer, 1000);
    updateTimer(); // Initial call to avoid delay
})();
Shopify Schema
                        

                            
                    

{% schema %}
    {
        "name": "LG - Sales Timer",
        "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "url",
                "id": "sale-collection-link",
                "label": "Sale Collection",
                "info": "Leave Blank if you don't want the link"
            },
            {
                "type": "paragraph",
                "content": "Style"
            },
            {
                "type": "color",
                "id": "text-color",
                "label": "Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "bg-color",
                "label": "Background Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "countdown-text",
                "label": "Countdown Text",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "countdown-bg",
                "label": "Countdown Background",
                "default": "#fff"
            },
            {
                "type": "paragraph",
                "content": "Text"
            },
            {
                "type": "text",
                "id": "first_text",
                "label": "First Text",
                "default": "🎁Early BFCM Sale",
                "info": "Text for the first line"
            },
            {
                "type": "text",
                "id": "second_text",
                "label": "Second Text",
                "default": "Up to 20% in Holiday Savings",
                "info": "Text for the second line"
            },
            {
                "type": "paragraph",
                "content": "Countdown"
            },
            {
                "type": "text",
                "id": "date",
                "label": "Date",
                "default": "March 25, 2029 00:00:00",
                "info": "This is the end date of the sale. Format should be: March 25, 2029 00:00:00"
            }

        ],
        "presets": [
            {
                "name": "LG - Sales Timer"
            }
        ],
        "enabled_on": {
            "groups": ["header"]
        }
        
    }
{% endschema %}
View Code
CSS
                        

                            
                    
 .lg-sales-banner-outer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
}

.lg-sales-banner-text {
    display: flex;
    gap: 0.5rem;
}
.lg-sales-banner-upsell-text {
    text-decoration: underline;
    text-underline-offset: 3px; 
    text-decoration-thickness: 1px; 
}
.lg-sales-banner-cta a {
    text-decoration: underline;
    text-underline-offset: 3px; 
    text-decoration-thickness: 1px; 
  
}
HTML
                        

                            
                    

<div style="background:{{section.settings.bg-color}};" class="lg-sales-banner-outer-container">
    <div class="lg-sales-banner-text">
        <span style="color:{{section.settings.text-color}}">{{section.settings.first_text}}</span>
        <span style="color:{{section.settings.upsell-text}};" class="lg-sales-banner-upsell-text">{{section.settings.second_text}}</span>
    </div>
    <div style=" display:block;height:15px;width:1px;background:{{section.settings.text-color}};" class="lg-sales-banner-divider"></div>
    <div class="lg-sales-banner-cta">
        <a style="color:{{section.settings.text-color}}" href="{{section.settings.sale-collection-link}}">{{section.settings.cta-text}}</a>
    </div>
</div>
Shopify Schema
                        

                            
                    

{% schema %}
    {
        "name": "LG - Sales Banner",
        "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "url",
                "id": "sale-collection-link",
                "label": "Sale Collection"
            },
            {
                "type": "paragraph",
                "content": "Style"
            },
            {
                "type": "color",
                "id": "text-color",
                "label": "Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "bg-color",
                "label": "Background Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "upsell-text",
                "label": "Upsell Text Color",
                "default": "#FFD700"
            },
            {
                "type": "paragraph",
                "content": "Text"
            },
            {
                "type": "text",
                "id": "first_text",
                "label": "Main Text",
                "default": "Early BFCM Sale",
                "info": "Text for the first line"
            },
            {
                "type": "text",
                "id": "second_text",
                "label": "Upsell Text",
                "default": "Up to 20% off",
                "info": "Text for the second line"
            },
            {
                "type": "text",
                "id": "cta-text",
                "label": "CTA Text",
                "default": "Shop now"
            }

        ],
        "presets": [
            {
                "name": "LG - Sales Banner"
            }
        ],
        "enabled_on": {
            "groups": ["header"]
        }
        
    }
{% endschema %}
View Code
CSS
                        

                            
                    
.lg-sales-banner-outer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
}

.lg-sales-banner-text {
    display: flex;
    gap: 0.5rem;
}
.lg-sales-banner-upsell-text {
    text-decoration: underline;
    text-underline-offset: 3px; 
    text-decoration-thickness: 1px; 
}
.lg-sales-banner-info {
    display:flex;
    justify-content:center;
    align-items:center;
  
}
HTML
                        

                            
                    

<a href="{{section.settings.sale-collection-link}}" style="text-decoration:none;">
<div style="background:{{section.settings.bg-color}};" class="lg-sales-banner-outer-container">
    <div class="lg-sales-banner-text">
        <span style="font-weight:700;color:{{section.settings.text-color}}">{{section.settings.first_text}}</span>
        <span style="color:{{section.settings.upsell-text}};" class="lg-sales-banner-upsell-text">{{section.settings.second_text}}</span>
    </div>
    
    <div style="opacity:0.6;" class="lg-sales-banner-info">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="{{section.settings.text-color}}" height="20px">
        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
        </svg>

    </div>
</div>
</a>
Shopify Schema
                        

                            
                    

{
        "name": "LG - Sales Banner V2",
        "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "url",
                "id": "sale-collection-link",
                "label": "Sale Collection"
            },
            {
                "type": "paragraph",
                "content": "Style"
            },
            {
                "type": "color",
                "id": "text-color",
                "label": "Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "bg-color",
                "label": "Background Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "upsell-text",
                "label": "Upsell Text Color",
                "default": "#fff"
            },
            {
                "type": "paragraph",
                "content": "Text"
            },
            {
                "type": "text",
                "id": "first_text",
                "label": "Main Text",
                "default": "Early BFCM",
                "info": "Text for the first line"
            },
            {
                "type": "text",
                "id": "second_text",
                "label": "Upsell Text",
                "default": "Up to 20% off",
                "info": "Text for the second line"
            }

        ],
        "presets": [
            {
                "name": "LG - Sales Banner V2"
            }
        ],
        "enabled_on": {
            "groups": ["header"]
        }
        
    }
View Code
CSS
                        

                            
                    
.lg-sales-banner-outer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    margin:150px;
}

.lg-sales-banner-text {
    display: flex;
    gap: 0.5rem;
}
.lg-sales-banner-upsell-text {
    text-decoration: underline;
    text-underline-offset: 3px; 
    text-decoration-thickness: 1px; 
}
.lg-sales-banner-info {
    display:flex;
    justify-content:center;
    align-items:center;
  
}
HTML
                        

                            
                    

<a href="{{section.settings.sale-collection-link}}" style="text-decoration:none;">
    <div  id="js-clock" data-timer="{{section.settings.date}}" style="background:{{section.settings.bg-color}};" class="lg-sales-banner-outer-container">
        <div class="lg-sales-banner-text">
            <span style="font-weight:700;color:{{section.settings.text-color}}" id="js-sale-text">
                <span id="js-sale-days">0</span> <span id="custom-text-sale">days left</span> 
            </span>
        </div>
        <div style="display:block;height:15px;width:1px;background:{{section.settings.text-color}};" class="lg-sales-banner-divider"></div>
        <div class="lg-sales-banner-text">
            <span style="color:{{section.settings.upsell-text}};" class="lg-sales-banner-upsell-text">{{section.settings.second_text}}</span>
        </div>
    </div>
</a>
JavaScript
                        

                            
                    
/* This can be loaded directly onto the page inside of a script tag eg.
<script>
JS code here
</script>
However, this will have an impact on the theme loading speed as JavaScript is a render blocking resource. This isn't advisable. Instead, create a new file under assets folder called liquid-gold.js. Paste this sections JavaScript into it.

(assets>liquid-gold.js)
Then go to your theme.liquid and search for .js files at the top of the HTML document. You should see tags with a similiar format as the script below. Paste the follwing script there:
 <script src="{{ 'liquid-gold.js' | asset_url }}" defer="async"></script>

This will load your JavaScript in the background but won't execute it until the entire document has been rendered. 

If you prefer video instructions format, please check the video installation.

*/ 
(function() {
    let endDate = document.querySelector('#js-clock').getAttribute('data-timer');
    let endTime = new Date(endDate).getTime();
    let saleTextContainer = document.getElementById('js-sale-text');
    let saleDaysSpan = document.getElementById('js-sale-days');
    let saleTextSpan = document.getElementById('custom-text-sale');
    function updateTimer() {
        const now = new Date().getTime();
        const timeLeft = endTime - now;

        if (timeLeft < 0) {
            saleTextContainer.innerText = 'Expired';
            return;
        }

        const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));

        if (days >= 1) {
            saleDaysSpan.textContent = days;
            if(days === 1){
                saleTextSpan.innerText = 'day left'
            }
        } else {
            saleTextContainer.innerText = 'Less than a day left';
        }
    }

    setInterval(updateTimer, 1000);
    updateTimer(); // Initial call to avoid delay
})();
Shopify Schema
                        

                            
                    

{% schema %}
    {
        "name": "LG - Sales Banner V3",
        "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "url",
                "id": "sale-collection-link",
                "label": "Sale Collection"
            },
            {
                "type": "paragraph",
                "content": "Style"
            },
            {
                "type": "color",
                "id": "text-color",
                "label": "Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "bg-color",
                "label": "Background Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "upsell-text",
                "label": "Second Text Color",
                "default": "#fff"
            },
            {
                "type": "paragraph",
                "content": "Text"
            },
            {
                "type": "text",
                "id": "date",
                "label": "Date",
                "default": "March 25, 2029 00:00:00",
                "info": "This is the end date of the sale. Format should be: March 25, 2029 00:00:00"
            },
            
            {
                "type": "text",
                "id": "second_text",
                "label": "Second Text",
                "default": "Order in time for Christmas",
                "info": "Text for the second line"
            }

        ],
        "presets": [
            {
                "name": "LG - Sales Banner V3"
            }
        ],
        "enabled_on": {
            "groups": ["header"]
        }
        
    }
{% endschema %}
View Code
CSS
                        

                            
                    
.lg-sales-banner-outer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    margin:150px;
}

.lg-sales-banner-text {
    display: flex;
    gap: 0.5rem;
}
.lg-sales-banner-upsell-text {
    text-decoration: underline;
    text-underline-offset: 3px; 
    text-decoration-thickness: 1px; 
}
.lg-sales-banner-info {
    display:flex;
    justify-content:center;
    align-items:center;
  
}
@media (max-width: 740px) {
    .lg-sales-banner-outer-container {
        font-size:14px;
    }
}
HTML
                        

                            
                    

   <div style="background:{{section.settings.bg-color}};" class="lg-sales-banner-outer-container">
        <div class="lg-sales-banner-text">
           <span style="color:{{section.settings.text-color}};"> {{section.settings.first_text}}</span>
        </div>
         <div class="lg-sales-banner-text">
           <span style="font-size:12px; font-weight:700;padding: 2px 5px;border-radius: 10px;background:{{section.settings.coupon-code-bg}};color:{{section.settings.upsell-text}};"> {{section.settings.coupon-code}}</span>
        </div>
        <div style="display:block;height:15px;width:1px;background:{{section.settings.text-color}};" class="lg-sales-banner-divider"></div>
        <div class="lg-sales-banner-text">
        <a href="{{section.settings.sale-collection-link}}" style="text-decoration:none;">
            <span style="color:{{section.settings.cta-color}};" class="lg-sales-banner-upsell-text">{{section.settings.second_text}}</span>
            </a>
        </div>
    </div>
Shopify Schema
                        

                            
                    

{% schema %}
    {
        "name": "LG - Sales Banner V4",
        "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "url",
                "id": "sale-collection-link",
                "label": "Sale Collection"
            },
            {
                "type": "paragraph",
                "content": "Style"
            },
            {
                "type": "color",
                "id": "text-color",
                "label": "Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "bg-color",
                "label": "Background Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "upsell-text",
                "label": "Coupon Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "coupon-code-bg",
                "label": "Coupon Background",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "cta-color",
                "label": "CTA color",
                "default": "#fff"
            },
            {
                "type": "paragraph",
                "content": "Text"
            },
            {
                "type": "text",
                "id": "first_text",
                "label": "First Text",
                "default": "Up to 20% off with code",
                "info": "Text before the coupon code"
            },
            {
                "type": "text",
                "id": "coupon-code",
                "label": "Coupon Code ",
                "default": "BFCM20"
            },
            {
                "type": "text",
                "id": "second_text",
                "label": "CTA Text",
                "default": "Shop now",
                "info": "Text for the CTA"
            }

        ],
        "presets": [
            {
                "name": "LG - Sales Banner V4"
            }
        ],
        "enabled_on": {
            "groups": ["header"]
        }
        
    }
{% endschema %}
View Code
CSS
                        

                            
                    
.lg-sales-banner-outer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    margin:150px;
}

.lg-sales-banner-text {
    display: flex;
    gap: 0.5rem;
}
.lg-sales-banner-cta a {
    padding:5px 10px;
    border-radius:4px;
}
@media (max-width: 740px) {
    .lg-sales-banner-outer-container {
        font-size:12px;
    }
}
HTML
                        

                            
                    

<div style="background:{{section.settings.bg-color}};" class="lg-sales-banner-outer-container">
    <div class="lg-sales-banner-text">
        <span style="font-weight:bold;color:{{section.settings.text-color}}">{{section.settings.first_text}}</span>
        <span style="color:{{section.settings.upsell-text}};" class="lg-sales-banner-upsell-text">{{section.settings.second_text}}</span>
    </div>
   
    <div class="lg-sales-banner-cta">
        <a style="background:{{section.settings.cta-bg-color}};text-decoration:none;color:{{section.settings.cta-text-color}}" href="{{section.settings.sale-collection-link}}">{{section.settings.cta-text}}</a>
    </div>
</div>
Shopify Schema
                        

                            
                    

{% schema %}
    {
        "name": "LG - Sales Banner V5",
        "settings": [
              {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "url",
                "id": "sale-collection-link",
                "label": "Sale Collection"
            },
            {
                "type": "paragraph",
                "content": "Style"
            },
            {
                "type": "color",
                "id": "text-color",
                "label": "Text Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "cta-text-color",
                "label": "CTA Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "cta-bg-color",
                "label": "CTA Background Color",
                "default": "#fff"
            },
            {
                "type": "color",
                "id": "bg-color",
                "label": "Background Color",
                "default": "#000"
            },
            {
                "type": "color",
                "id": "upsell-text",
                "label": "Upsell Text Color",
                "default": "#FFD700"
            },
            {
                "type": "paragraph",
                "content": "Text"
            },
            {
                "type": "text",
                "id": "first_text",
                "label": "Main Text",
                "default": "Early BFCM Sale",
                "info": "Text for the first line"
            },
            {
                "type": "text",
                "id": "second_text",
                "label": "Upsell Text",
                "default": "Up to 20% off",
                "info": "Text for the second line"
            },
            {
                "type": "text",
                "id": "cta-text",
                "label": "CTA Text",
                "default": "Shop now"
            }
        ],
        "presets": [
            {
                "name": "LG - Sales Banner V5"
            }
        ],
        "enabled_on": {
            "groups": ["header"]
        }
        
    }
{% endschema %}

Request a feature