Liquid Gold Vault

Badges & Banners

SWITCH TO DESKTOP FOR THE BEST VIEWING EXPERIENCE
View Code
CSS
                        

                            
                    
.lg-alert-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-radius: 6px;
    width: fit-content;
    margin: 10px auto;
    padding: 4px 15px;
    font-weight: 600;
}
HTML
                        

                            
                    

{% when 'limited_offer' %}
{% if block.settings.color_scheme == 'warning' %}
    {% assign color = '#d9534f' %}
    {% assign bg_color = '#f8d7da' %}
{% else %}
    {% assign color = '#d9822b' %}
    {% assign bg_color = '#fde6d1' %}
{% endif %}
<div style="background-color:{{bg_color}};color:{{color}};border;1px solid {{color}};" class="code-ss lg-alert-banner">
    {% if block.settings.color_scheme == 'warning' %} 
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#d9534f" width="20px">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
    {% else %}
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#d9822b" width="20px">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
        </svg>
    {% endif %}
   {{block.settings.text}}
</div>
Shopify Schema
                        

                            
                    

ATTENTION: You need to install this into your theme as a block item. Please see the installation videos on how to do this.
    "name": "Your Schema Name",
    "settings": [],
    "blocks": [
        INSTALL FROM HERE
             {
                "name": "LG - Limited Offer",
                "type": "limited_offer",
                "limit": 1,
                "settings":[
                    {
                        "type": "select",
                        "id": "color_scheme",
                        "label": "Color Scheme",
                        "options": [
                            {
                                "type": "header",
                                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
                            },
                            {
                            "value": "alert",
                            "label": "Alert"
                            },
                            {
                            "value": "warning",
                            "label": "Warning"
                            }
                        ],
                        "default": "alert"
                    },
                    {
                        "type": "text",
                        "id": "text",
                        "label": "Text",
                        "default": "Limited time offer - 25% off!"
                    }

                ]
             }
            
        ]
        END INSTALL FROM HERE
View Code
CSS
                        

                            
                    
 .lg-viewing-message {
  font-size: 13px;
  text-align: center;
  border-radius: 5px;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  padding: 1px 8px;
  line-height: 22px;
  width:100%;
}

.lg-viewing-number {
  font-size: 14px;
  font-weight: 800;
}
HTML
                        

                            
                    
{% when 'users_viewing' %}
<div style="background-color:{{block.settings.background_color}}; color:{{block.settings.text_color}}; border:1px solid {{block.settings.border_color}}" class=" code-ss lg-viewing-message">
    <span data-num-start="{{block.settings.starting_number}}" data-num-min="{{block.settings.min_number}}" data-num-max="{{block.settings.max_number}}" data-num-int="{% if block.settings.int_number < 10 %}10000 {% else %}{{block.settings.int_number | times: 1000}}{% endif %}" class="lg-viewing-number">{{block.settings.starting_number}}</span> {{block.settings.main_text}}
</div>
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.

*/ 
let interval = Number(document.querySelector('.lg-viewing-number').getAttribute("data-num-int"));
let currentCount = Number(document.querySelector('.lg-viewing-number').getAttribute("data-num-start"));
const minCount = Number(document.querySelector('.lg-viewing-number').getAttribute("data-num-min"));
const maxCount = Number(document.querySelector('.lg-viewing-number').getAttribute("data-num-max")); // Set max limit if needed

// Function to update the viewing message with random values
function updateViewingMessage() {
    const changeFactor = Math.random() < 0.5 ? -1 : 1;
    const changeValue = Math.floor(Math.random() * 2) + 1;

    currentCount += changeFactor * changeValue;

    // Ensure current count stays within the defined range
    if (currentCount < minCount) {
        currentCount = minCount;
    } else if (currentCount > maxCount) {
        currentCount = maxCount;
    }

    // Update the message without using innerHTML for security
    const messageElement = document.querySelector('.lg-viewing-message');
    const numberElement = messageElement.querySelector('.lg-viewing-number');
    numberElement.textContent = currentCount;
}

// Update every 10 seconds
setInterval(updateViewingMessage, interval);
Shopify Schema
                        

                            
                    
{% schema %}
    {
ATTENTION: You need to install this into your theme as a block item. Please see the installation videos on how to do this.
        "name": "Your Schema Name",
        "settings": [],
        "blocks": [
                 INSTALL FROM HERE
                {
                    "type": "users_viewing",
                    "name": "LG - User Viewing",
                    "settings": [
                        {
                            "type": "header",
                            "content": "LIQUID GOLD SNIPPET - Users Viewing"
                        },
                        {
                            "type": "color",
                            "id": "background_color",
                            "label": "Background Color",
                            "default": "#dff7f4"
                        },
                        {
                            "type": "color",
                            "id": "text_color",
                            "label": "Text Color",
                            "default": "#218d8b"
                        },
                        {
                            "type": "color",
                            "id": "border_color",
                            "label": "Border Color",
                            "default": "#7EBDBB"
                        },
                        {
                            "type": "number",
                            "id": "starting_number",
                            "label": "Starting Number",
                            "default": 5,
                            "info": "Starting Number that appears on first load"
                        },
                        {
                            "type": "number",
                            "id": "min_number",
                            "label": "Min Number",
                            "default": 1,
                            "info": "Min Amount Viewing"
                        },
                        {
                            "type": "number",
                            "id": "max_number",
                            "label": "Max Number",
                            "default": 10,
                            "info": "Max Amount Viewing"
                        },
                        {
                            "type": "number",
                            "id": "int_number",
                            "label": "Interval Number",
                            "default": 10,
                            "info": "Interval to reload number.This is in seconds. Keep this to minimum of 10."
                        },
                        {
                            "type": "text",
                            "id": "main_text",
                            "label": "Main Text",
                            "default": "people are viewing this right now"
                        }
                    ]
                }
                END INSTALL FROM HERE       
         ],
        "presets": [
            {
                "name": "Code Builds Examples"
            }
        ]
        
    }
{% endschema %}
View Code
CSS
                        

                            
                    
.LG-customer-badge {
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 5px 15px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.LG-customer-avatars {
  display: flex;
  margin-right: 10px;
  margin-left: 10px;
}

.LG-avatar-image {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -7px; 
  object-fit: cover;
}

.LG-customer-text {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
HTML
                        

                            
                    
{% when 'lg-happy_customer' %}

    <div style="background-image: linear-gradient({{ block.settings.gradient_angle | times: 3.6 }}deg, {{ block.settings.gradient_color_1 }}, {{ block.settings.gradient_color_2 }} {{block.settings.gradient_stop}}%);" class="LG-customer-badge">
  <div class="LG-customer-avatars">
  {% for i in (1..3) %}
  {% capture cycle_type %}
    {% case block.settings.customer_base %}
        {% when 'male' %}
           men
        {% when 'female' %}
            women
        {% when 'mixed' %}
            {% cycle "gender": "women", "men" %}
    {% endcase %}
  {% endcapture %}
  <img src='https://randomuser.me/api/portraits/{{cycle_type | strip}}/{{ i }}.jpg' class="LG-avatar-image" alt="User {{ i }}">
{% endfor %}
  </div>
  <span class="LG-customer-text">{{block.settings.lg-customer-review-text}}</span>
</div>
Shopify Schema
                        

                            
                    
{% schema %}

{
"name": "Your Schema name",
"settings": [
ATTENTION: You need to install this into your theme as a block item. Please see the installation videos on how to do this.
],
"blocks": [
    INSTALL FROM HERE
    {
        "type": "lg-happy_customer",
        "name": "LG - Happy Customer",
        "limit": 1,
        "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
            {
                "type": "text",
                "id": "lg-customer-review-text",
                "label": "Happy Customers Text",
                "default": "1,000+ HAPPY CUSTOMERS"
            },
            {
                "type": "select",
                "id": "customer_base",
                "label": "Customer Base Gender Primarily are:",
                "options": [
                        {
                            "value": "female",
                            "label": "Female"
                        },
                        {
                            "value": "male",
                            "label": "Male"
                        },
                        {
                            "value": "mixed",
                            "label": "Mixed"
                        }
                ],
                    "default": "mixed",
                    "info": "This option will control where the images display male, female or mixed pictures."
                },
                {
                    "type": "color",
                    "label": "First Gradient Color",
                    "id": "gradient_color_1",
                    "default": "#1cbcc3"
                },
                {
                    "type": "color",
                    "label": "Second Gradient Color",
                    "id": "gradient_color_2",
                    "default": "#4abf8f"
                },
                {
                    "type": "range",
                    "label": "Gradient Angle",
                    "id": "gradient_angle",
                    "default": 45,
                    "min": 0,
                    "max": 100
                },
                {
                    "type": "range",
                    "label": "Second Gradient Color Stop",
                    "id": "gradient_stop",
                    "default": 80,
                    "min": 0,
                    "max": 100
                }
                END INSTALL FROM HERE
            ]
        }
    ]
}
{% endschema %}
View Code
CSS
                        

                            
                    
.lg-status-alert {
    padding: 5px 18px;
    font-size: 13px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
}

.lg-status-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}
HTML
                        

                            
                    

<div class="lg-status-wrapper">
    <div style=" border: 2px solid {{block.settings.border_color}};color: {{block.settings.text_color}};background-color:{{block.settings.background_color}};" class="lg-status-alert">{{block.settings.text_left}} | {{block.settings.text_right}}</div>
</div>
Shopify Schema
                        

                            
                    

{
    ATTENTION: You need to install this into your theme as a block item. Please see the installation videos on how to do this.
    "name": "Your Schema Name",
    "settings": [],
    "blocks": [
        INSTALL FROM HERE
            {
                "type": "status_badge",
                "name": "LG - Status Badge",
                "settings": [
                    {
                        "type": "header",
                        "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
                    },
                    {
                        "type": "text",
                        "id": "text_left",
                        "label": "Text Left",
                        "default": "SELLING FAST"
                    },
                    {
                        "type": "text",
                        "id": "text_right",
                        "label": "Text Right",
                        "default": "LIMITED STOCK"
                    },
                    {
                        "type": "color",
                        "id": "background_color",
                        "label": "Background Color",
                        "default": "#fff"
                    },
                    {
                        "type": "color",
                        "id": "border_color",
                        "label": "Border Color",
                        "default": "#1b3a57"
                    },
                    {
                        "type": "color",
                        "id": "text_color",
                        "label": "Text Color",
                        "default": "#1b3a57"
                    }
                    
                ]
            }
            END INSTALL FROM HERE
        ]
    }
{% endschema %}
View Code
CSS
                        

                            
                    
 .lg-customer-testimonials {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 5px 15px;
  font-size: 12px;
  color: #000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: fit-content;
}

.lg-customer-avatars {
  display: flex;
  margin-right: 10px;
}

.lg-customer-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -7px;
  object-fit: cover;
}

.lg-customer-text {
  font-weight: normal;
  font-size: 12px;
  color: #000;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.lg-customer-text strong {
  font-weight: 800;
  font-family: Roboto, sans-serif;
}

.lg-customer-verified {
  vertical-align: middle;
  height: 13px;
  width: 13px;
  margin-bottom: 3px;
}

.lg-customer-verified-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
HTML
                        

                            
                    



{% when 'lg-testimonial-block' %}
    <div style="background-color:{{block.settings.background_color}};border:0.5px solid {{block.settings.border_color}}" class="code-ss lg-customer-testimonials">
        <div class="lg-customer-avatars">
            {% for i in (5..7) %}
    {% capture cycle_type %}
        {% case block.settings.customer_base %}
            {% when 'male' %}
            men
            {% when 'female' %}
                women
            {% when 'mixed' %}
                {% cycle "gender": "women", "men" %}
        {% endcase %}
    {% endcapture %}
    <img src='https://randomuser.me/api/portraits/{{cycle_type | strip}}/{{ i }}.jpg' class="lg-customer-avatar" alt="User {{ i }}">
    {% endfor %}
        </div>
        <span class="lg-customer-text">
            <span style="font-weight: 900;color:{{block.settings.text_color}}">{{ block.settings.customer_name }} </span> 
            {% if block.settings.show_verified_badge %}
            <span class="lg-customer-verified">
                <img
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Twitter_Verified_Badge.svg/800px-Twitter_Verified_Badge.svg.png"
                    alt="verified badge"
                    class="lg-customer-verified-badge">
            </span>
            {% endif %}
            <span style="color:{{block.settings.text_color}}">and <strong>{{ block.settings.purchase_count }}</strong></span>
            <span style="color:{{block.settings.text_color}}"> people purchased</span>
        </span>
    </div>
Shopify Schema
                        

                            
                    
{% schema %}
{
ATTENTION: You need to install this into your theme as a block item. Please see the installation videos on how to do this.
"name": "Your Schema name",
"settings": [

],
"blocks": [
   INSTALL FROM HERE
   {
    "type": "lg-testimonial-block",
    "name": "LG - Testimonial Block",
    "limit": 1,
    "settings": [
        {
            "type": "header",
            "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
        },
        {
            "type": "color",
            "id": "background_color",
            "label": "Background Color",
            "default": "#fff"
        },
        {
            "type": "color",
            "id": "text_color",
            "label": "Text Color",
            "default": "#000"
        },
        {
            "type": "color",
            "id": "border_color",
            "label": "Border Color",
            "default": "#f1eee6"
        },
        {
            "type": "text",
            "id": "customer_name",
            "label": "Customer Name",
            "default": "Sarah",
            "info": "The name of the customer for the testimonial."
        },
        {
            "type": "select",
            "id": "customer_base",
            "label": "Customer Base Gender Primarily Are:",
            "options": [
                {
                    "value": "male",
                    "label": "Male"
                },
                {
                    "value": "female",
                    "label": "Female"
                },
                {
                    "value": "mixed",
                    "label": "Mixed"
                }
            ],
            "default": "mixed",
            "info": "Choose the gender of the customers featured (Male, Female, or Mixed)."
        },
        {
            "type": "checkbox",
            "id": "show_verified_badge",
            "label": "Show Verified Badge",
            "default": true
        },
        {
            "type": "number",
            "id": "purchase_count",
            "label": "Number of People Who Purchased",
            "default": 758,
            "info": "Enter the number of people who purchased (this will appear next to the customer's name)."
        }
    ]
}
END INSTALL FROM HERE
]
}
{% endschema %}
View Code
CSS
                        

                            
                    
.lg-money-back-guarantee-container {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 10px 20px;
    max-width: 400px;
    width: fit-content;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.lg-money-back-guarantee-dot {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 10px #fff;
    border-radius: 50%;
    margin-right: 15px;
    animation: pulse_effect 1.5s infinite; 
}
.lg-money-back-guarantee-text {
    font-size: 12px;
    line-height: 0px;
}
HTML
                        

                            
                    
{% when 'lg-money-back' %}
<style>
/* This style element has to be here in order for the pulse effect to be dynamic*/
@keyframes pulse_effect {
0% {
    box-shadow: 0 0 10px {{block.settings.pulse_color}};
    transform: scale(1);
}
50% {
    box-shadow: 0 0 20px {{block.settings.pulse_color}};
    transform: scale(1);
}
100% {
    box-shadow: 0 0 10px {{block.settings.pulse_color}};
    transform: scale(1);
}
}
</style>
<div style="background-color:{{block.settings.background_color}};border: 1px solid {{block.settings.border_color}};" class="code-ss lg-money-back-guarantee-container">
  <div style="background-color:{{block.settings.dot_background_color}}" class="lg-money-back-guarantee-dot"><span style="visibility: hidden;">.</span></div>
  <div style="color:{{block.settings.money_back_color}}" class="lg-money-back-guarantee-text">{{block.settings.money_back_text}}</div>
</div>
Shopify Schema
                        

                            
                    
{% schema %}
{
ATTENTION: You need to install this into your theme as a block item. Please see the installation videos on how to do this.
"name": "Your Schema name",
"settings": [

],
"blocks": [
   INSTALL FROM HERE
{
    "type": "money_back",
    "name": "LG - Money Back Guarantee",
    "limit": 1,
    "settings": [
            {
                "type": "header",
                "content": "LIQUID GOLD SNIPPET - by Wildlangosta"
            },
        {
            "type": "color",
            "id": "background_color",
            "label": "Background Color",
            "default": "#F0F2F9"
        },
        {
            "type": "color",
            "id": "border_color",
            "label": "Border Color",
            "default": "#E6EBFC"
        },
        {
            "type": "color",
            "id": "dot_background_color",
            "label": "Dot Background Color",
            "default": "#847DFF"
        },
        {
            "type": "color",
            "id": "pulse_color",
            "label": "Dot Pulse Color",
            "default": "#5853A8"
        },
        {
            "type": "color",
            "id": "money_back_color",
            "label": "Text Color",
            "default": "#5C78E0"
        },
        {
            "type": "text",
            "id": "money_back_text",
            "label": "Money Back Text",
            "default": "30-day money back guarantee"
        }
    ]
}

   END INSTALL FROM HERE
]
}
{% endschema %}

Request a feature