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

includes/MyComponent.lh

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.