Call-to-action

The powerful field for call-to-action

Arguments

Name	Type	Value	Description
type	string	single_image	The type of setting
name	string	{field_name}	The unique name will be used in template
label	string	(optional)	The label that appears above of the setting field.
description	string	(optional)	The description that appears above under of the setting field.
tooltip	string	(optional)	The long description that appears on the tooltip when hover on.
value	object	(optional)	{ href: string, src: string, //'%URL%/image.jpg' alt: string, class: string, id: string, icon: 'fa fa-', 'icon-pos': 'after|' 'data-ga-action': string, 'data-ga-category': string, 'data-ga-label': string, 'data-fb-pixel': '', 'class': '' }
options	object	(optional)	{ type: 'image|icon|text', // using image, icon or text icon_source: '%URL%/icons.css', // Use icon icon_class: 'fa' // Extra icon class example: <i class="fa fa-star"></i> }
on	object	(optional)	Add listener events for setting field (Supported all event )

Code example

section.lh

@schema
{
  "name": "Services",
    "author": "Layouthub Team",
    "website": "https://www.layouthub.com",
    "version": "2.0",
    "category": "services",
    "platform": "shopify",
    "vendors":  [ "css_line_icon" ]
   
}
@endschema


<div class="sample-demo">
	
	<p v-html="settings.cta"></p>
	<p v-html="settings.cta2"></p>	
	<p v-html="settings.cta3"></p>	
	
</div>

settings.js

[
    {
        name: 'cta',
        label: 'Link using text',
        type: 'link',
        value: {
	        href: '#',
	        text: 'Call to action',
	        icon: 'lni lni-star',
	        'icon-pos': 'before',
	        'data-ga-action': 'tracking'
        },
        options: {
	        vendor: 'css_line_icon',
	        icon_class: 'lni'
        }
    },    
    {
        name: 'cta2',
        label: 'Link using image',
        type: 'link',
        value: {
	        href: '',
	        image: '%URL%/thumbnail.jpg',
	        // image: '<img src="%URL%/thumbnail.jpg" height="100" alt="Alt text" />',
	        // 'data-ga-action': 'tracking',
	        // 'data-ga-category': '',
	        // 'data-ga-label': '',
	        // 'data-fb-pixel': '',
	        // 'class': '',
	        // 'id': ''
        },
        options: {
	        type: 'image'
        }
    },
    {
        name: 'cta3',
        label: 'Link using icon',
        type: 'link',
        value: {
	        icon: 'lni lni-star'
        },
        options: {
	        type: 'icon',
	        vendor: 'css_line_icon',
	        icon_class: 'lni'
        }
    }
]