Scribd
Upload
35 views4 pages

Liquid Programming

The document provides syntax and examples for using Liquid template language, including variable assignment, output display, comments, conditional statements, and loops. It also explains how to add custom CSS and JavaScript files to a project. Additionally, it includes CSS styles for creating a tabbed interface with collapsible content.

Uploaded by

zainfayyaz498
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
35 views4 pages

Liquid Programming

The document provides syntax and examples for using Liquid template language, including variable assignment, output display, comments, conditional statements, and loops. It also explains how to add custom CSS and JavaScript files to a project. Additionally, it includes CSS styles for creating a tabbed interface with collapsible content.

Uploaded by

zainfayyaz498
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd

· To apply any condition w use this syntax: -> {% %}

· To initialize a variable: ( % assign myVar= 6 % }

· To Show output we use: {{ myVar }}

· comment: {% comment %}

this is a comment

{% endcomment %}

<div class="container">

{% comment %}

{% assign myVar= 6 %}

{{ myVar }}

-------------------------------------------------------------------

How to add two numbers

{% assign Num1 = 6 %}

{% assign Num2 = 8 %}

{{ Num1 |plus: Num2 }}

-------------------------------------------------------------------------------------------------------

{% endcomment %}

{% comment %}}

How to use if else statement.

How to Use if else statement


{% assign Num1 = 6 %}

{% assign Num2 = 8 %}

{% if Num2 > Num1 %}

Greater number is {{ Num2 }}

{% else %}

Greater Number is {{ Num1 }}

{% endif %}

-----------------------------------------------------------------------------------------------------------

Loops:

{% for i in (1..10)%}

Number is {{ i }} <br>

{% endfor %}

{% endcomment %}

{% for product in [Link] %}

{{ [Link] }}<br>

{% endfor %}

</div>

------------------------------------------------------------------------------------------------------------------

Adding a custom css file:

Create a css file in assets and then to import that file:

{{ '[Link]' | asset_url | stylesheet_tag }}

{{ '[Link]' | asset_url | script_tag }}

([Link] is the name of the file)

-------------------------------------------------------------------------------------------------------------
.faq-checkbox{

position: absolute;

opacity:0;

z-index:-1;

.tabs{

border-radius: 10px;

overflow: hidden;

.tab{

width:100%;

color: white;

overflow:hidden;

.tab-lable{

display: flex !important;

justify-content: space-between;

padding: 1em;

font-weight: bold;

cursor: pointer;

color: white;

.tab-lable::after{

content:"+";
width: 1em;

height:1em;

text-align:center;

transition: all 0.5s;

tab-content:{

max-height:0;

padding: 0 1em;

background-color: white;

transition: all 0.5s;

faq-checkbox::checked + tab-lable::after{

content:"-";

.faq-checkbox:checked ~ .tabcontent {

max-height:100vh;

padding:1em;

}s

You might also like