User guides
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.Asset folder: includes section resource like images
- 2.Components folders: includes the components of section
- 3.liquid.json embed liquid to template
- 4.Section.lh: Includes schema and code of this section
- 5.Settings.js Settings for section
- 6.Style.css: Stylesheet file of this section
- 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.
Last modified 6mo ago
Copy link