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
section.lh
settings.js
includes/MyComponent.lh
1
@schema
2
{
3
"name": "Product single",
4
"author": "Layouthub Team",
5
"website": "https://www.layouthub.com",
6
"version": "2.0",
7
"category": "Product single",
8
"platform": "shopify",
9
"vendors": ["js_swiper_slider","css_layouthub_base"],
10
"dev": "LayoutHub core team"
11
}
12
@endschema
13
14
<div class="lh-wrapper">
15
<p class="lh-color-red">
16
The setting value: <span v-html="settings.one"></span>
17
<p>
18
<p v-html="combined"></p>
19
<MyComponent />
20
<button class="lh-button"><button>
21
</div>
22
23
@javascript
24
let $this = jQuery(this);
25
$this.find('.lh-button').click(function(e){
26
e.preventDefault();
27
$this.find('.lh-color-red').toggle();//Show hide a element
28
});
29
@endjavascript
30
31
32
<script>
33
export default {
34
data:{
35
36
},
37
computed: {
38
combined () {
39
return `${this.settings.one} - ${this.settings.two}`;
40
}
41
},
42
methods: {
43
callme(item) {
44
return 'item name: '+item.name;
45
}
46
}
47
}
48
@endr
49
</script>
50
<style lang="scss">
51
52
.lh-color-red{
53
color:red;
54
}
55
56
</style>
Copied!
1
[
2
{
3
tab_name:"General",
4
settings:[
5
{
6
name: 'one',
7
label: 'The first setting',
8
type: 'text',
9
value: 'The default value'
10
},
11
{
12
name: 'two',
13
label: 'The second setting',
14
type: 'text',
15
value: 'The default value 2'
16
},
17
{
18
name: 'name',
19
label: 'The text',
20
type: 'text',
21
value: 'Hello Component'
22
}
23
]
24
}
25
]
Copied!
1
<template>
2
<div>
3
<h3> The component is: </h3>
4
<p v-html="settings.name"></p>
5
</div>
6
</template>
Copied!
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