LayoutHub
  • What is LayoutHub?
  • User guides
    • Support
    • Installation
    • Uninstallation
    • Upgrade/Downgrade
    • FAQs
      • How to remove instagram section from Layouthub
      • What is "Pages limit"?
      • When can I "Edit code"?
      • What about "Save section"?
      • What is " Auto save draft"?
      • What is "Integration Services"?
      • How to set the same font between Shopify and LayoutHub?
      • How to custom font and color on LayoutHub?
      • How to set "Page handle or human url"?
      • Connective Button
      • How to save page without publish it
      • How to change the meta SEO for LayoutHub's page
    • Common Issues
    • Layout Management
      • Create Layouts
      • Design Blocks
      • Export & Import
      • Edit Section Code
      • Edit a Layout
      • Assign a Layout
      • Duplicate a Layout
      • Delete a Layout
    • Section builder
    • LayoutHub pages/templates
      • Home Page
        • Create additional Home Page
        • Make an existing page as home page
        • Restore to default Home Page
        • Customize Shopify Home Page
      • Sub-page
        • Contact Form
      • Product Template
        • Product Detail
        • Related Product
      • Collection Template
      • Blog Templates
      • Article Templates
      • Insert section
    • Pricing Plans
    • Settings
      • General
      • Theme Settings
      • Quickview Settings
      • Swatch color settings
      • Third party Apps
        • Product Review
        • Product Wishlist
    • Trash
    • Sale Tools
    • Referrals
    • Integration
      • Add/Edit Profile
      • Add New Contact
      • Export Contact
      • Mailchimp
      • Hubspot
      • ActiveCampaign
      • GetResponse
      • SendGrid
      • Gmail SMTP
      • Google Sheets
      • Omnisend
      • Klaviyo
      • ConvertKit
    • Tracking & Analytics
    • Layouthub & Shopify
    • Translate Apps
    • Recommend apps
      • Avada SEO Optimization
      • Ali Reviews ‑ Product Reviews
      • Ryviu: Product Reviews App UGC
      • Quick View by Secomapp
      • LAI AliExpress Reviews
      • Judge.me Product Reviews
      • Growave - Loyalty, Wishlist, Reviews UGC
      • Opinew Product Reviews
    • Refund Policy
    • Instagram token
  • Development
    • Getting started
    • Tools
      • LayoutHub Kit (for LayoutHub developers only)
      • LayoutHub Kit Extension for Visual Studio Code
    • Layout Structure
    • Reference
      • Engine syntax
        • Deprecated: March 2020
        • Chuẩn template má»›i - LayoutHub Editor V4
      • Create a section
      • Components
      • Liquid in section
      • Javascript in section
      • Register vendors
      • Settings.js
        • Call-to-action
        • Text
        • Textarea
        • Text Editor
        • Dropdown
        • Checkbox list
        • Checkbox radio
        • Toggle
        • Number slider
        • Number
        • Single image
        • Image library
        • Color picker
        • Icon picker
        • Font picker
        • Background
        • Picker
        • Group fields
Powered by GitBook
On this page
  • Interpolation
  • Evaluate
  • Conditionals
  • Switch case
  • For Loop
  • While loop

Was this helpful?

  1. Development
  2. Reference

Engine syntax

for Liquid.json only

Interpolation

Interpolation is a way to print out the dynamic data inside the HTML structure.

Syntax

Description

@print(variable)

Print out the variable

@lang(variable)

Print out the variable or string which will be supported multiple

@attr()

Print out the escaped of variable into attribute of HTML element

section.lh
<h1 class="@attr(section.settings.class)">
    Hello @print(section.settings.name)! Welcome to the Layouthub.com
</h1>

Evaluate

The engine is built in Javascript, In some situations, it's useful to embed logic code into your views. You can use the blade @js directive to execute your logic code. It works similarly to <?php and ?> in PHP programming language.

Name

Syntax

Start

@js

End

@endjs

section.lh
<ul>
@js
    let items = section.settings.items_group;
    items.map((item) => {
        print('<li>'+item.name+'</li>'); 
        // the print function works same with @print()
    })
@endjs
</ul>

Conditionals

You may construct if statements using the @if, @elseif, @else, and @endif directives. These directives function identically to their Javascript counterparts:

Name

Syntax

if

@if (conditions)

else if

@elseif (conditions)

else

@else

endif

@endif

unless

@unless(!conditions)

section.lh
@if (section.settings.limit_items < 5)
   Product items limit less than 5
@elseif ( section.settings.limit_items < 10)
    Product items limit less than 10
@else
    Product items limit greater than 10
@endif

For convenience, Blade also provides an @unless directive:

section.lh
@unless (section.settings.show_logo == 'yes')
    Customer don't want to show logo
@endunless 

Switch case

Switch statements can be constructed using the @switch, @case, @break, @default and @endswitch directives:

Name

Syntax

switch

@switch (variable)

case

@case (value)

break

@break or @endcase

default

@default

endswitch

@endswitch

section.lh
@switch (section.settings.head)
    @case 'one'
        <h1>The case one of variable section.settings.head<1>
    @break
    @case 'two'
        <h2>The case two</h2>
    @break
    @default
        <h3>The default</h3>
    @break
@endswitch

For Loop

In addition to conditional statements, Engine provides simple directives for working with Javascript's loop structures. Again, each of these directives functions identically to their Javascript counterparts:

Name

Syntax

for

@for (contitional statements)

endfor

@endfor

elsefor

@elsefor // incase array has no items

endelse

@endelse

section.lh
// Loop JSON object
@for (object as key => item)
	<p>@print(key): <strong>@print(item)</strong></p>
@elsefor
	<p>No items</p>
@endelse

// Loop an array
@for (array as item)
	<p>@print(item)</p>
	// The current index is: _i
@endfor

// Loop sequentially 
@for (var i=0; i<10; i++)
	<p>@print(i)</p>
@endfor

While loop

Name

Syntax

while

@while (conditions)

endwhile

@endwhile

section.lh
@var i=10
@while (i > 0)
<p>@print(i--)</p>
@endwhile

PreviousReferenceNextDeprecated: March 2020

Last updated 3 years ago

Was this helpful?

If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the.

link