Section & Variations › Product List Snippet

Available Parameters
Parameter Type Description
variation Text
required
Default : product-list-variation-1 		Selected variations for Product List Snippet section.
List of available variations :
  • product-list-variation-1
  • product-list-variation-2
  • product-list-variation-3
title Text Set title for Product List Snippet section.
headerActions Text HTML Display CTA in header section.
items Array of Product List Snippet Item
required 		Set list of Product Item.
Example:
[
  {
    'title'          : 'Bali, Indonesia',
    'subtitle'       : '726 accommodations',
    'description'    : 'Lush rice terraces, stunning beaches, vibrant nightlife.',
    'image'          : 'travel-product-list-snippet-1.png',
  }
]
Available Variations
Product List Snippet Variation 1 Starter Kit Codes 
{# include sections/product-list-snipped  #}
{% include "../resources/sections/product-list-snipped.twig", with {
    	'variation'	: 'product-list-variation-1',
	'title'		: 'Explore our top destinations 🏝️',
	'items'		: [
		{
			'title'			: 'Bali, Indonesia',
			'subtitle'		: '726 accommodations',
			'description'		: 'Lush rice terraces, stunning beaches, vibrant nightlife.',

			'image'			: 'travel-product-list-snippet-1.png',
		},
		{
			'title'			: 'Santorini, Greece',
			'subtitle'		: '870 accommodations',
			'description'		: 'Breathtaking sunsets, white-washed buildings, crystal-clear waters.',

			'image'			: 'travel-product-list-snippet-2.png',
		},
		{
			'title'			: 'Kyoto, Japan',
			'subtitle'		: '1,069 accommodations',
			'description'		: 'Historic temples, traditional tea houses, cherry blossom season.',

			'image'			: 'travel-product-list-snippet-3.png',
		},
		{
			'title'			: 'Paris, France',
			'subtitle'		: '980 accommodations',
			'description'		: 'Iconic landmarks, world-class museums, romantic cafes.',

			'image'			: 'travel-product-list-snippet-4.png',
		}
	]
  } %}
Product List Snippet Variation 2 Starter Kit Codes 
{# include sections/product-list-snipped  #}
{% include "../resources/sections/product-list-snipped.twig", with {
    	'variation'		: 'product-list-variation-2',
	'title'			: 'New product',
	'headerActions'	: '<a href="#more" class="btn btn-lg btn-icon-only btn-outline-dark-3"><i class="ic ic-arrow-left dark-1"></i></a><a href="#more" class="btn btn-lg btn-icon-only btn-outline-dark-3"><i class="ic ic-arrow-right dark-1"></i></a>',
	'items'			: [
		{
			'title'			: 'Dry Fit Sport T-shirt',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$29.00',
			},

			'rating'		: {
				'score'		: 4.8,
				'description'		: '(890 reviews)',
			},
			'colorOptions'	: [
				{
					'color'		: '#1877F2',
					'border'	: '#1877F2',
				}, 
				{
					'color'		: '#000',
					'border'	: '#000',
				}, 
				{
					'color'		: '#FFF',
					'border'	: '#E1E1E1',
				},
			],

			'image'			: 'fashion-product-list-snippet-1.png',
		},
		{
			'title'			: 'Sport Phosphor Man Jacket',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$29.00',
			},

			'rating'		: {
				'score'		: 4.8,
				'description'		: '(890 reviews)',
			},
			'colorOptions'	: [
				{
					'color'		: '#B4DB5C',
					'border'	: '#B4DB5C',
				}
			],

			'image'			: 'fashion-product-list-snippet-2.png',
		},
		{
			'title'			: 'Man in Green Zip Up Jacket',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$29.00',
			},

			'rating'		: {
				'score'		: 4.8,
				'description'		: '(890 reviews)',
			},
			'colorOptions'	: [
				{
					'color'		: '#466A84',
					'border'	: '#466A84',
				}
			],

			'image'			: 'fashion-product-list-snippet-3.png',
		},
		{
			'title'			: 'Man in Green Zip Up Jacket',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$29.00',
			},

			'rating'		: {
				'score'		: 4.8,
				'description'		: '(890 reviews)',
			},
			'colorOptions'	: [
				{
					'color'		: '#80816A',
					'border'	: '#80816A',
				},
				{
					'color'		: '#EEEBDD',
					'border'	: '#E1E1E1',
				},
				{
					'color'		: '#2C2C2C',
					'border'	: '#2C2C2C',
				}
			],

			'image'			: 'fashion-product-list-snippet-4.png',
		}
	]
  } %}
Product List Snippet Variation 3 Starter Kit Codes 
{# include sections/product-list-snipped  #}
{% include "../resources/sections/product-list-snipped.twig", with {
    	'variation'		: 'product-list-variation-3',
	'title'			: 'Bestselling essentials',
	'headerActions'	: '<a href="#more" class="btn btn-lg btn-outline-dark-3">See more</a>',
	'items'			: [
		{
			'title'			: 'New & Fresh Skin Set',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$39.00',
			},

			'rating'		: {
				'score'		: 4.5,
				'description'	: '(290 reviews)',
			},

			'image'			: 'cosmetics-product-list-snippet-1.png',
		},
		{
			'title'			: 'Exfoliate & Glow Self-Heating',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$22.00',
				'sale'		: '$15.00',
			},

			'rating'		: {
				'score'		: 4.0,
				'description'	: '(1.190 reviews)',
			},

			'image'			: 'cosmetics-product-list-snippet-2.png',
		},
		{
			'title'			: 'PerfectTan Self Tanning Drops',
			'tag'			: 'New',
			'price'			: {
				'regular'	: '$13.00',
			},

			'rating'		: {
				'score'		: 4.8,
				'description'	: '(370 reviews)',
			},

			'image'			: 'cosmetics-product-list-snippet-3.png',
		},
		{
			'title'			: 'Anti Acne Face Serum',
			'tag'			: 'New',
			'price'			: {
				'sale'		: '$18.00',
				'regular'	: '$29.00',
			},

			'rating'		: {
				'score'		: 4.8,
				'description'	: '(890 reviews)',
			},

			'image'			: 'cosmetics-product-list-snippet-4.png',
		}
	]
  } %}