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="1963201168.5b9e1e6.ea3d30c85d7a4af98efb85c4695dc846" get="user" userId="1963201168" limit="10" resolution="low_resolution"]
Demo Instagram
Panel Tool
Float header
Float topbar
Default
Boxed Large
Header Default