[Release] Shortcodes for Shopify

 

What is a shortcodes?

Shortcodes is a way of allowing non- coding users of Shopify to output some type of feature into their pages and posts. The powerful Shortcodes comes with a lot of features that lets you do nifty things with very little effort . Shortcodes can embed or create objects such as facebook, youtube , font awesome, alert or much more that would normally require lots of complicated, ugly code in just simple one line. Especially , this will save you hours of development and increase your sales by providing you with the tools to create the calls-to-action you need.

 

Available shortcodes

1. Facebook

[facebook idPage="apollotheme"]

2. Youtube

[youtube width="600" height="350" video="aE7-KZVXvJs"]

3. Font awesome

[icon iconClass="envelope"] [icon iconClass="bar-chart"] [icon iconClass="motorcycle"] [icon iconClass="automobile"] [icon iconClass="heart"]

4. 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"]

5. 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"]

6. Accordion

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

 7. Tab

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

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

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>

HTML:

[lightbox url="https://www.youtube.com/embed/oWVqE9TOopE?autoplay=1" text="Type iFrame" type="iframe" class="btn btn-info"]

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

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

 9.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"]

 10. Line

[line class="hr-default" size="1"][line class="hr-green" size="10"]

  11. Slide

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

 12. Product list

[productlist handle="women" columnsProduct="3" limit="6" class="my-product-list" id="id-product-list"]

 13. 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"]

  14. Carousel product list

[productcarousel title="Product list" handle="women" item_in_page="4" columns_product="4" product_in_tab="8" interval="10000"]

  15. Owlcarousel product list

[productowlcarousel title="Product list" handle="women" columns_product="4" product_in_list="16" interval="10000"]

Moreover, you are also add  shortcode to everywhere of your site by editing in HTML & CSS .

{% include 'shortcode' load: '[facebook idPage="apollotheme"]' %}

      

 

P/s : Thanks for reading!  We hope you’re as excited as we are about this our shortcode.  We continue to build things to make new framework better, and we hope you like it.

 

Related Posts