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

    "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">


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 updated