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

@schema
{
    "name": "Product single",
    "author": "Layouthub Team",
    "website": "https://www.layouthub.com",
    "version": "2.0",
    "category": "Product single",
    "platform": "shopify",
    "vendors": ["js_swiper_slider","css_layouthub_base"],
    "dev": "LayoutHub core team"
} 
@endschema 

<div class="lh-wrapper">	
		<p class="lh-color-red">
			The setting value: <span v-html="settings.one"></span>
		<p>
		<p v-html="combined"></p> 
		<MyComponent />
		<button class="lh-button"><button>
</div>

@javascript
	let $this = jQuery(this);
	$this.find('.lh-button').click(function(e){
		e.preventDefault();
		$this.find('.lh-color-red').toggle();//Show hide a element
	});
@endjavascript


<script>
export default {
	data:{
		
		},
	computed: {
		combined () {
			return `${this.settings.one} - ${this.settings.two}`;
		}
	},
	methods: {
		callme(item) {
			return 'item name: '+item.name;
		}
	}
}
@endr
</script>
<style lang="scss">

	.lh-color-red{
		color:red;
	}
	
</style>

settings.js

[
    {
        tab_name:"General",
        settings:[
            {
                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'
            }
        ]
    }
]

includes/MyComponent.lh

<template>
<div>
<h3> The component is: </h3>
<p v-html="settings.name"></p>
</div>
</template>

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.