Liquid Gold Vault-2
Sliders & Showcase
.lg-scrolling-benefits-bar {
width: 100%;
padding: 15px 0;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.lg-benefits-heading {
text-align: center;
font-weight: 600;
margin-bottom: 10px;
font-size: 16px;
}
.lg-benefits-track {
display: flex;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.lg-benefits-items {
display: flex;
animation: lg-scroll-left 20s linear infinite;
min-width: 100%;
}
/* Smooth infinite scrolling */
@keyframes lg-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.lg-benefit,
.lg-separator {
font-size: 18px;
font-weight: bold;
letter-spacing: -0.5px;
margin-right: 20px;
}
@media (max-width: 768px) {
.lg-benefits-items {
animation-duration: 16s;
}
.lg-benefit {
font-size: 16px;
}
.lg-benefits-heading {
font-size: 14px;
}
}
<div style="margin-left:0;margin-right:0" class="code-ss shopify-{{section.id}}">
<div style="border-top: 1px solid {{section.settings.border_color}};border-bottom: 1px solid {{section.settings.border_color}};background-color: {{section.settings.track_bg_color}};color: {{section.settings.heading_color}};" class="lg-scrolling-benefits-bar">
<span class="lg-benefits-heading">{{section.settings.title}}</span>
<div class="lg-benefits-track">
<div class="lg-benefits-items">
{% for block in section.blocks %}
<span style="color:{{section.settings.item_color}};" class="lg-benefit">{{block.settings.benefit_text}}</span>
<span style="color:{{section.settings.item_color}};" class="lg-separator"> - </span>
{% endfor %}
{% for block in section.blocks %}
<span style="color:{{section.settings.item_color}};" class="lg-benefit">{{block.settings.benefit_text}}</span>
{% unless forloop.last %}
<span style="color:{{section.settings.item_color}};" class="lg-separator"> - </span>
{% endunless %}
{% endfor %}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "LG - Scroll Benefit",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "NO MORE"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Color",
"default": "#2e2f3c"
},
{
"type": "color",
"id": "item_color",
"label": "Item Color",
"default": "#2e2f3c"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#2e2f3c"
},
{
"type": "color",
"id": "track_bg_color",
"label": "Track Background Color",
"default": "#f9f9f9"
}
],
"blocks": [
{
"type": "benefit_item",
"name": "LG - Benefit Item",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "paragraph",
"content": "Items will load twice so that the scroll seems infinite"
},
{
"type": "text",
"id": "benefit_text",
"label": "Benefit Text",
"default": "BENEFIT TEXT"
}
]
}
],
"presets": [
{
"name": "LG - Scroll Benefit"
}
]
}
{% endschema %}
.b-a-main-outer-container {
display: flex;
place-items: center;
flex-wrap: wrap;
gap: 30px;
padding:5px;
max-width: 1200px;
width: 100%;
margin: 50px auto;
}
.container-ba-inner-container {
display: grid;
position: relative;
overflow: hidden;
--position: 50%;
width: 100%;
margin: 0 auto;
}
.image-container {
max-width: 1200px;
}
.b-a-badge {
display:block;
background: #000;
padding: 0 5px;
border-radius: 2px;
color: #fff;
}
.before-badge {
z-index: 99 !important;
position: absolute;
bottom: 15px;
left: 15px;
}
.after-badge {
z-index: 99 !important;
position: absolute;
bottom: 15px;
right: 15px;
}
.slider-image {
display: block;
max-width: 100%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
max-height: 500px;
}
.image-before {
position: absolute;
inset: 0;
width: var(--position);
}
.ba-slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
}
.ba-slider:focus-visible ~ .slider-button {
outline: 5px solid black;
outline-offset: 3px;
}
.b-a-slider-line {
position: absolute;
inset: 0;
width: .2rem;
height: 100%;
background-color: #fff;
left: var(--position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
border:1px solid white!important;
position: absolute;
background-color: #000 !important;
color: black;
height: 24px!important;
width:24px!important;
padding: .5rem;
display: grid;
place-items: center;
top: 50%;
left: var(--position);
transform: translate(-50%, -50%) rotate(45deg);
pointer-events: none;
box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
width: 10px;
height: 40px;
}
@media only screen and (max-width: 768px) {
.container-ba-inner-container {
width: 100%;
}
.b-a-main-outer-container {
padding: 0 20px;
}
}
<div class="b-a-main-outer-container">
<div class="container-ba-inner-container squared-corners">
<div class="image-container">
<div class="before_img">
<img loading="lazy"
class="image-before slider-image"
src="{{section.settings.image_1| image_url | width:500}}"
alt="Before Image">
<span class="before-badge b-a-badge">
BEFORE
</span>
</div>
<div class="after_img">
<img loading="lazy"
class="image-after slider-image"
src="{{section.settings.image_2| image_url | width:500}}"
alt="black and white">
<span class="after-badge b-a-badge" >
AFTER
</span>
</div>
</div>
<input
type="range"
min="0"
max="100"
value="50"
aria-label="Percentage of before photo shown"
class="ba-slider">
<div style="display:block;" class="b-a-slider-line" aria-hidden="true"></div>
<div class="slider-button" aria-hidden="true">
</div>
</div>
</div>
/* 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.
*/
document.addEventListener("DOMContentLoaded", function () {
const container_ba = document.querySelector(".container-ba-inner-container");
const slider_el = document.querySelector(".ba-slider");
slider_el.addEventListener("input", (e) => {
container_ba.style.setProperty("--position", `${e.target.value}%`);
});
});
{% schema %}
{
"name": "LG - Before & After Slider",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
}
]
}
{% endschema %}
.how-to-section {
padding-top: 50px;
padding-bottom: 50px;
}
.how-to-wrapper {
padding: 0 80px;
max-width: 1360px;
margin: auto;
}
.how-to-title {
color: #000;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
max-width: 100%;
margin-left: 16px;
margin-bottom: 48px;
text-align: left;
}
.how-to-items {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 32px;
}
.how-to-item {
min-width: 1px;
width: 100%;
}
.how-to-item-image {
padding-top: 500px;
position: relative;
}
.how-to-item-text {
color: #000;
font-size: 18px;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.5;
max-width: 100%;
overflow-wrap: break-word;
padding: 5px;
}
.how-to-item-image img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 1024px) {
.how-to-items {
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.how-to-wrapper {
padding: 0 24px;
}
.how-to-title {
margin-left: 0;
margin-bottom: 30px;
}
.how-to-item-image {
padding-top: 111.8%;
max-height: 400px;
}
.how-to-item-text {
font-size: 18px;
}
}
<div class="shopify-{{section.id}}">
<div class="how-to-section">
<div class="how-to-wrapper">
<div class="how-to-title">
<h3 style="font-size:{{section.settings.font_size}}px">{{section.settings.how_to_use_title}}</h3>
</div>
<div class="how-to-items">
{% for block in section.blocks %}
<div class="how-to-item" >
<div class="how-to-item-image">
{% unless block.settings.step_image == blank %}
<img loading="lazy" src="{{block.settings.step_image|image_url: width:400}}" alt="Step {{forloop.index}}">
{% endunless %}
</div>
<div class="how-to-item-text">
<p>{{forloop.index}}. {{block.settings.step_text}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "LG - How to Image Section",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "text",
"id": "how_to_use_title",
"label": "Title",
"default": "How to Use"
},
{
"type": "number",
"id": "font_size",
"label": "Font Size",
"default": 40
}
],
"blocks": [
{
"type": "step",
"name": "LG - Step",
"settings":[
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "image_picker",
"id": "step_image",
"label": "Image"
},
{
"type": "text",
"id": "step_text",
"label": "Text",
"default": "Step Instructions"
}
]
}
],
"presets": [
{
"name": "LG - How to Image Section"
}
]
}
{% endschema %}
.swiper {
width: 100%;
padding-top: 0;
padding-bottom: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.swiper-slide img {
display: block;
width: 100%;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
{% for block in section.blocks %}
<div class="swiper-slide squared-corners">
{% unless block.settings.model_image == blank %}
<img loading="lazy" src="{{block.settings.model_image | image_url | width:400}}"/>
{% endunless %}
</div>
{% endfor %}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
/* 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.
*/
var swiper = new Swiper(".mySwiper", {
effect: "coverflow",
loop:true,
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
});
{% schema %}
{
"name": "LG - Image Slider",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
}
],
"blocks": [
{
"type": "slide",
"name": "LG - slide",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "image_picker",
"id": "model_image",
"label": "Image"
}
]
},
],
"presets":[
{
"name": "Image Slider"
}
]
}
{% endschema %}
.lg-two-way-review-bar {
width: 100%;
padding: 3px 0;
overflow: hidden;
white-space: nowrap;
position: relative;
margin-top: 10px;
margin-bottom: 10px;
max-width: 1500px;
margin-right: auto;
margin-left: auto;
}
.lg-two-way-review-wrapper {
display: flex;
}
.lg-two-way-review-wrapper {
animation: lg-scroll-text 20s linear infinite;
}
.lg-two-way-review-wrapper.reverse {
animation: lg-scroll-text-reverse 20s linear infinite;
}
.lg-two-way-review-text {
word-wrap: break-word; /* Break lines if necessary */
white-space: pre-wrap; /* Wrap long lines */
font-size: 12px;
font-weight: 500;
margin-right: 15px;
padding: 10px 30px;
border-radius: 5px;
display: flex;
flex-direction: row;
gap: 18px;
align-items: center;
justify-content: center;
max-width: 300px;
line-height: 15px;
}
.lg-profile-pictures {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
@keyframes lg-scroll-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes lg-scroll-text-reverse {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
<div style="background-color:{{section.settings.review_bg_color}};" class="lg-two-way-review-bar">
<div style="margin-top:10px;margin-bottom:10px;" class="lg-two-way-review-wrapper">
{% for block in section.blocks %}
<div style="background-color:{{section.settings.review_it_bg_color}};border: 2px solid {{section.settings.review_border_color}};color:{{section.settings.review_text_color}};" class="lg-two-way-review-text">
<img src="{% unless block.settings.customer_pp_left != blank %}https://randomuser.me/api/portraits/women/1.jpg {% else %}{{block.settings.customer_pp_left | image_url:width: 80}}{% endunless %}" alt="User Profile Picture" class="lg-profile-pictures">
<span>{{block.settings.review_text_left}}</span>
</div>
{% endfor %}
</div>
<div style="margin-bottom:10px;" class="lg-two-way-review-wrapper reverse">
{% for block in section.blocks %}
<div style="background-color:{{section.settings.review_it_bg_color}};border: 2px solid {{section.settings.review_border_color}};color:{{section.settings.review_text_color}};" class="lg-two-way-review-text">
<img src="{% unless block.settings.customer_pp_right != blank %}https://randomuser.me/api/portraits/women/1.jpg {% else %}{{block.settings.customer_pp_right | image_url:width: 80}}{% endunless %}" alt="User Profile Picture" class="lg-profile-pictures">
<span>{{block.settings.review_text_right}}</span>
</div>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "Two Way Review Slider",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "color",
"id": "review_bg_color",
"label": "Track Background Color",
"default": "#fff"
},
{
"type": "color",
"id": "review_text_color",
"label": "Text Color",
"default": "#000"
},
{
"type": "color",
"id": "review_border_color",
"label": "Border Color",
"default": "#f2f2f2"
},
{
"type": "color",
"id": "review_it_bg_color",
"label": "Item Background Color",
"default": "#fff"
}
],
"blocks": [
{
"type": "two_way_review",
"name": "LG - 2 Way Review",
"settings": [
{
"type": "header",
"content": "LIQUID GOLD SNIPPET - by Wildlangosta"
},
{
"type": "paragraph",
"content": "Review Item that moves left ⬅️"
},
{
"type": "image_picker",
"id": "customer_pp_left",
"label": "Customer Image",
"info": "Image should be maximum of 100 x 100"
},
{
"type": "text",
"id": "review_text_left",
"label": "Review Text",
"default": "Great Product!",
"info": "maximum of 20 characters"
},
{
"type": "paragraph",
"content": "Review Item that moves right ➡️"
},
{
"type": "image_picker",
"id": "customer_pp_right",
"label": "Customer Image",
"info": "Image should be maximum of 100 x 100"
},
{
"type": "text",
"id": "review_text_right",
"label": "Review Text",
"default": "Absolutely love it!",
"info": "maximum of 20 characters"
}
]
}
],
"presets": [
{
"name": "Two Way Review Slider"
}
]
}
{% endschema %}
Request a feature
- Choosing a selection results in a full page refresh.
- Opens in a new window.