Create a section
You can create sections in the developer directory or inside a layout. Start by creating a folder with the following structure:
The folder structure of section.
  1. 1.
    Asset folder: includes section resource like images
  2. 2.
    Components folders: includes the components of section
  3. 3.
    liquid.json embed liquid to template
  4. 4.
    Section.lh: Includes schema and code of this section
  5. 5.
    Settings.js Settings for section
  6. 6.
    Style.css: Stylesheet file of this section
  7. 7.
    Thumbnail file
"name": "Product single",
"author": "Layouthub Team",
"website": "",
"version": "2.0",
"category": "Product single",
"platform": "shopify",
"vendors": ["js_swiper_slider","css_layouthub_base"],
"dev": "LayoutHub core team"
<div class="lh-wrapper">
<p class="lh-color-red">
The setting value: <span v-html=""></span>
<p v-html="combined"></p>
<MyComponent />
<button class="lh-button"><button>
let $this = jQuery(this);
$this.find('.lh-color-red').toggle();//Show hide a element
export default {
computed: {
combined () {
return `${} - ${this.settings.two}`;
methods: {
callme(item) {
return 'item name: ';
<style lang="scss">
name: 'one',
label: 'The first setting',
type: 'text',
value: 'The default value'
name: 'two',
label: 'The second setting',
type: 'text',
value: 'The default value 2'
name: 'name',
label: 'The text',
type: 'text',
value: 'Hello Component'
<h3> The component is: </h3>
<p v-html=""></p>
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.
Copy link