List Collections
Shortcode
[facebook idPage="apollotheme"]
Youtube
[youtube width="600" height="350" video="aE7-KZVXvJs"]
Font Awesome
[icon iconClass="envelope"] [icon iconClass="bar-chart"] [icon iconClass="motorcycle"] [icon iconClass="automobile"] [icon iconClass="heart"]
Alert
[alert type="success" message="This is alert type Success"]
[alert type="info" message="This is alert type Info"]
[alert type="warning" message="This is alert type Warning"]
[alert type="danger" message="This is alert type Danger"]
This is alert type Success
This is alert type Info
This is alert type Warning
This is alert type Danger
Button
Button Type
[button type="default" text="Default" url="http://www.shopify.com/"]
[button type="primary" text="Primary"]
[button type="success" text="Success"]
[button type="Info" text="Info"]
[button type="Danger" text="Danger"]
[button type="Link" text="Link" url="http://www.shopify.com/" isOpen="isOpen"]
Button Size
[button type="default" text="Default size large" size="lg"]
[button type="primary" text="Primary size default"]
[button type="success" text="Success size small" size="sm"]
[button type="Info" text="Info size extra small" size="xs"]
Button Block
[button type="Danger" text="Danger size block" isBlock="block"]
Button Link
[button type="default" text="Default and link" url="http://www.shopify.com/"]
[button type="primary" text="Primary and link open new tab" url="http://www.shopify.com/" isOpen="isOpen"]
Button Type
Button Size
Button Block
Button Link
accordion shortcode
[accordion action="new accordions" class="demoaccordion"]
[accordion action="new accordion" title="accordion title sample 1" active="1"]
You can add html
[accordion action="end accordion"]
[accordion action="new accordion" title="accordion title sample 2"]
You can add other shortcode
[accordion action="end accordion"]
[accordion action="new accordion" title="accordion title sample 3"]
You can add image
[accordion action="end accordion"]
[accordion action="end accordions"]
You can add html
You can add other shortcode
You can add image
Default Tab Align Left
[tab action="new tabs" ]
[tab action="new cover-tab-list"]
[tab action="new tab-list" title="Tab 1" active="active"]
[tab action="new tab-list" title="Tab 2"]
[tab action="new tab-list" title="Tab 3"]
[tab action="new tab-list" title="Tab 4"]
[tab action="end cover-tab-list"]
[tab action="new tab-content"]
[tab action="new tab-panel" active="active"]
Content tab 1
[tab action="end tab-panel"]
[tab action="new tab-panel"]
Content tab 2
[tab action="end tab-panel"]
[tab action="new tab-panel"]
Content tab 3
[tab action="end tab-panel"]
[tab action="new tab-panel"]
Content tab 4
[tab action="end tab-panel"]
[tab action="end tab-content"]
[tab action="end tabs"]
Content tab 1
Content tab 2
Content tab 3
Content tab 4
Tab below
[tabbelow action="new tabs" ]
[tabbelow action="new tab-content"]
[tabbelow action="new tab-panel" active="active"]
Content tab 1
[tabbelow action="end tab-panel"]
[tabbelow action="new tab-panel"]
Content tab 2
[tabbelow action="end tab-panel"]
[tabbelow action="new tab-panel"]
Content tab 3
[tabbelow action="end tab-panel"]
[tabbelow action="new tab-panel"]
Content tab 4
[tabbelow action="end tab-panel"]
[tabbelow action="end tab-content"]
[tabbelow action="new cover-tab-list"]
[tabbelow action="new tab-list" title="Tab 1" active="active"]
[tabbelow action="new tab-list" title="Tab 2"]
[tabbelow action="new tab-list" title="Tab 3"]
[tabbelow action="new tab-list" title="Tab 4"]
[tabbelow action="end cover-tab-list"]
[tabbelow action="end tabs"]
Content tab 1
Content tab 2
Content tab 3
Content tab 4
Tab Vertical
[tabvertical action="new tabs" ]
[tabvertical action="new cover-tab-list"]
[tabvertical action="new tab-list" title="Tab 1" active="active"]
[tabvertical action="new tab-list" title="Tab 2"]
[tabvertical action="new tab-list" title="Tab 3"]
[tabvertical action="new tab-list" title="Tab 4"]
[tabvertical action="end cover-tab-list"]
[tabvertical action="new tab-content"]
[tabvertical action="new tab-panel" active="active"]
Content tab 1
[tabvertical action="end tab-panel"]
[tabvertical action="new tab-panel"]
Content tab 2
[tabvertical action="end tab-panel"]
[tabvertical action="new tab-panel"]
Content tab 3
[tabvertical action="end tab-panel"]
[tabvertical action="new tab-panel"]
Content tab 4
[tabvertical action="end tab-panel"]
[tabvertical action="end tab-content"]
[tabvertical action="end tabs"]
Content tab 1
Content tab 2
Content tab 3
Content tab 4
LightBox
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/11_large.jpeg?v=1425525113" text="Content is image" class="btn btn-info"Content is a image
[lightbox url="#id-content-html" text="Content is html"]
<div id="id-content-html" style="display: none;" >This is content html, you can append other text, shortcodes:<br/><br/>
[button isOpen="open" type="primary" text="Start here" url="http://www.shopify.com/" class="btn btn-info"]</div>
Content is html
[lightbox url="https://www.youtube.com/embed/oWVqE9TOopE?autoplay=1" text="Type iFrame" type="iframe" class="btn btn-info"]Type iFrame
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/11_large.jpeg?v=1425525113" text="Effect is fade" effect="fade" class="btn btn-info"]
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/11_large.jpeg?v=1425525113" text="Effect is elastic" effect="elastic" class="btn btn-info"]
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/11_large.jpeg?v=1425525113" text="Effect is none" effect="none" class="btn btn-info"]
Effect is fade
Effect is elastic
Effect is none
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/11_large.jpeg?v=1425525113" text="Image 1" effect="fade" type="gallery" skipJs="true" rel="gallery-1"]
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/42_d3f99124-d8ca-4dd5-b6d2-d74b3feb31b1_large.jpeg?v=1425525113" text="Image 2" effect="fade" type="gallery" skipJs="true" rel="gallery-1"]
[lightbox url="http://cdn.shopify.com/s/files/1/0740/5717/products/21_1b737bd3-c656-43be-8e96-6a8aeaaaf19b_large.jpeg?v=1425525113" text="Image 3" effect="fade" type="gallery" rel="gallery-1"]
LightBox
[tooltip placement="left" type="button" text="Tooltip on left" title="Tooltip on left" class="my-tooltip" id="id-tooltip-1" url="http://shopify.com" isOpen="open"]
[tooltip placement="right" type="span" text="Tooltip on right" title="Tooltip on right and link" class="my-tooltip" id="id-tooltip-2" url="http://shopify.com"]
[tooltip placement="top" type="button" text="Tooltip on top" title="Tooltip on top and not link" class="my-tooltip" id="id-tooltip-3"]
[tooltip placement="bottom" type="span" text="Tooltip on bottom" title="Tooltip on bottom and not link" class="my-tooltip" id="id-tooltip-4"]
Tooltip on right
Tooltip on bottom
Box
[box action="new box" class="box-default" width="1"]
[box action="new header"]
The header box
[box action="end header"]
[box action="new content"]
You can append html or other shortcodes
[button type="primary" text="Learn more →" url="http://www.shopify.com/"]
[box action="end content"]
[box action="end box"]
<div class="row">
[box action="new box" class="box-default" width="2"]
[box action="new header"]
The header box
[box action="end header"]
[box action="new content"]
Our graphic design services are stellar, too
[button type="primary" text="Learn more →" url="http://www.shopify.com/"]
[box action="end content"]
[box action="end box"]
[box action="new box" class="box-default" width="2"]
[box action="new header"]
The header box
[box action="end header"]
[box action="new content"]
Our graphic design services are stellar, too
[button type="primary" text="Learn more →" url="http://www.shopify.com/"]
[box action="end content"]
[box action="end box"]
</div>
<div class="row">
[box action="new box" class="box-default" width="3"]
[box action="new header"]
The header box
[box action="end header"]
[box action="new content"]
Our graphic design services are stellar, too
[button type="primary" text="Learn more →" url="http://www.shopify.com/"]
[box action="end content"]
[box action="end box"]
[box action="new box" class="box-default" width="3"]
[box action="new header"]
The header box
[box action="end header"]
[box action="new content"]
Our graphic design services are stellar, too
[button type="primary" text="Learn more →" url="http://www.shopify.com/"]
[box action="end content"]
[box action="end box"]
[box action="new box" class="box-default" width="3"]
[box action="new header"]
The header box
[box action="end header"]
[box action="new content"]
Our graphic design services are stellar, too
[button type="primary" text="Learn more →" url="http://www.shopify.com/"]
[box action="end content"]
[box action="end box"]
</div>
Line
[line class="hr-default" size="1"][line class="hr-green" size="10"]
Slider
[carousel action="new slider" class="my-carousel-1"]
[carousel action="display indicators" total="3" active="1"]
[carousel action="new list slide"]
[carousel action="new slide" active="active" ]
<img src="http://placehold.it/1600x400/333333/FFFFFF&text=Slide+1" alt="altttttttt">
<div class="carousel-caption">Caption 1</div>
[carousel action="end slide"]
[carousel action="new slide"]
<img src="http://placehold.it/1600x400/333333/FFFFFF&text=Slide+2" alt="altttttttt">
<div class="carousel-caption">Caption 2</div>
[carousel action="end slide"]
[carousel action="new slide"]
<img src="http://placehold.it/1600x400/333333/FFFFFF&text=Slide+3" alt="altttttttt">
<div class="carousel-caption">Caption 3</div>
[carousel action="end slide"]
[carousel action="end list slide"]
[carousel action="display control"]
[carousel action="end slider"]
Slider 2
Product List
[productlist handle="women" columnsProduct="3" limit="6" class="my-product-list" id="id-product-list"]
OwlCarousel
[owlcarousel action="new owlcarousels" class="demo-carousel" columns_item="1"]
[owlcarousel action="new owlcarousel"]
<img alt="Autumn Collection 2015" src="//cdn.shopify.com/s/files/1/0766/6813/t/2/assets/slideshow_image_1.jpg">
[owlcarousel action="end owlcarousel"]
[owlcarousel action="new owlcarousel"]
<img alt="Autumn Collection 2015" src="//cdn.shopify.com/s/files/1/0766/6813/t/2/assets/slideshow_image_2.jpg">
[owlcarousel action="end owlcarousel"]
[owlcarousel action="new owlcarousel"]
<img alt="Autumn Collection 2015" src="//cdn.shopify.com/s/files/1/0766/6813/t/2/assets/slideshow_image_3.jpg">
[owlcarousel action="end owlcarousel"]
[owlcarousel action="end owlcarousels"]
Carousel Product List
[productcarousel title="Product list" handle="women" item_in_page="4" columns_product="4" product_in_tab="8" interval="10000"]
Product list
OwlCarousel Product List
[productowlcarousel title="Product list" handle="women" columns_product="4" product_in_list="16" interval="10000"]
Product list
Instagram shortcode
How to get Instagram "client ID".
[instagram class="demo-instagram" title="Demo Instagram" clientId="981ec7c9426149c5b01a775543b9ade0" get="popular" limit="10" resolution="low_resolution"]
[instagram class="demo-instagram" title="Demo Instagram" clientId="981ec7c9426149c5b01a775543b9ade0" get="tagged" tagName="" limit="10" resolution="low_resolution"]
[instagram class="demo-instagram" title="Demo Instagram" clientId="981ec7c9426149c5b01a775543b9ade0" get="location" locationId="" limit="10" resolution="low_resolution"]
[instagram class="demo-instagram" title="Demo Instagram" clientId="981ec7c9426149c5b01a775543b9ade0" accessToken="1599696966.1677ed0.378293d7d5e74eecb5de8d0e5b748ab6" get="user" userId="1599696966" limit="10" resolution="low_resolution"]
Demo Instagram
Panel Tool
Float header
Float topbar
Default
Boxed Large
Header Default