Viroshop Pro
Documentation

# Viroshop comes packed with some pretty awesome Shortcodes to create content fast and efficiently.

### Shortcodes

Checkout the Viroshop features page to see the shortcodes. You can either copy and paste the code from the demo into the "HTML" tab on your post/page or use the following.

#### Layout Grid

    [one_full]
    <h3>Full Column</h3><p>
    Scaffolding is a simple base grid system with semantic class names which makes remembering them much easier! There is also a non-semantic last class to add to the last div in a row. This class simply removes the right margin.</p>
    [/one_full]

    [divider]

    [one_half]
    <h3>1/2 Column</h3><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae libero nec erat consequat aliquam.
    </p>
    [/one_half]

    [one_half_last]
    <h3>1/2 Last Column</h3><p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae libero nec erat consequat aliquam.</p>
    [/one_half_last]

    [divider]

    [one_third]
    <h3>1/3 Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
    [/one_third]

    [one_third]
    <h3>1/3 Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
    [/one_third]

    [one_third_last]
    <h3>1/3 Last Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
    [/one_third_last]

    [divider]

    [two_third]
    <h3>2/3 Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.</p>
    [/two_third]

    [one_third_last]
    <h3>1/3 Last Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna, Eleifend ut et magna consectetur adipiscing eli.</p>
    [/one_third_last]

    [divider]

    [one_fourth]
    <h3>1/4 Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    <h3>1/4 Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    <h3>1/4 Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    <h3>1/4 Last Column</h3><p>
    Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]
    [divider]

#### Icon Section

    [one_fourth]
    [icon icon="new" title="New"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="open" title="Open"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="close" title="Close"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="home" title="Home"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="shield" title="Shield"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="truck" title="Truck"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="parcel" title="Parcel"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="bag" title="Bag"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="download" title="Download"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="giftbox" title="Giftbox"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="search" title="Search"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="security" title="Security"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="dollar" title="Dollar"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="card" title="Card"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="basket" title="Basket"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="tag" title="Tag"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="bulb" title="Bulb"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="tele_light" title="Telephone"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="unlock" title="Unlock"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="card_light" title="Card"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="camera" title="Camera"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="cd" title="CD"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="gear" title="Gear"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="poll" title="Poll"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="currency_dollar" title="Dollar"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="currency_euro" title="Euro"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="currency_pound" title="Pound"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="currency_yuan" title="Yuan"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="hyperlink" title="Hyperlink"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="basket_light" title="Basket"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="puzzle" title="Puzzle"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="lock_light" title="Lock"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="cart_light" title="Cart"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="bag_light" title="Bag"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="sale_dark" title="Sale"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="suitcase" title="Suitcase"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

    [divider]

    [one_fourth]
    [icon icon="clock" title="Clock"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="monitor" title="Monitor"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth]
    [icon icon="globe" title="Globe"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth]

    [one_fourth_last]
    [icon icon="new_dark" title="New"]
    <h3>1/4 Column</h3>
    <p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet.</p>
    [/one_fourth_last]

#### Products

    <h3>Recent Products</h3>
    [recent_products per_page="3" columns="3" orderby="date" order="desc"]
    <h3>Featured Products</h3>
    [featured_products per_page="3" columns="3"]
    <h3>Category Products</h3>
    [product_category category="womenswear" per_page="3" columns="3" orderby="date" order="desc"]

#### Media

    <h3>Youtube Embed</h3>
    [youtube autoplay="0" controls="1" showinfo="0" autohide="1" id="nsnTdMQMPhM"]

    [one_full]
    <h3>Vimeo Embed</h3>
    [/one_full]

    [vimeo autoplay="0" title="0" byline="1" loop="0" id="25943947"]

    [one_full]
    <h3>Dailymotion Embed</h3>
    [/one_full]
    [dailymotion autoplay="0" id="xpaqka"]

#### Buttons

    [one_full]
    <h3>Standard Buttons</h3><p>
    [button]Default[/button] [button colour="red"]Red[/button] [button colour="orange"]Orange[/button] [button colour="blue"]Blue[/button] [button colour="green"]Green[/button] [button colour="pink"]Pink[/button] [button colour="magenta"]Magenta[/button] [button colour="yellow"]Yellow[/button]</p>
    [/one_full]
    [divider]
    [one_full]
    <h3>Flat Buttons</h3><p>[button type="flat"]Default[/button] [button type="flat" colour="red"]Red[/button] [button type="flat" colour="orange"]Orange[/button] [button type="flat" colour="blue"]Button[/button] [button type="flat" colour="green"]Green[/button] [button type="flat" colour="pink"]Pink[/button] [button type="flat" colour="magenta"]Magenta[/button] [button type="flat" colour="yellow"]Yellow[/button]</p>
    [/one_full]
    [divider]
    [one_full]
    <h3>Small Buttons</h3><p>[button type="small"]Default[/button] [button type="small" colour="red"]Red[/button] [button type="small" colour="orange"]Orange[/button] [button type="small" colour="blue"]Button[/button] [button type="small" colour="green"]Green[/button] [button type="small" colour="pink"]Pink[/button] [button type="small" colour="magenta"]Magenta[/button] [button type="small" colour="yellow"]Yellow[/button]</p>
    [/one_full]
    [divider]
    [one_full]
    <h3>Medium Buttons</h3><p>[button type="medium"]Default[/button] [button type="medium" colour="red"]Red[/button] [button type="medium" colour="orange"]Orange[/button] [button type="medium" colour="blue"]Button[/button] [button type="medium" colour="green"]Green[/button] [button type="medium" colour="pink"]Pink[/button] [button type="medium" colour="magenta"]Magenta[/button] [button type="medium" colour="yellow"]Yellow[/button]</p>
    [/one_full]
    [divider]
    [one_full]
    <h3>Large Buttons</h3><p>[button type="large"]Default[/button] [button type="large" colour="red"]Red[/button] [button type="large" colour="orange"]Orange[/button] [button type="large" colour="blue"]Button[/button] [button type="large" colour="green"]Green[/button] [button type="large" colour="pink"]Pink[/button] [button type="large" colour="magenta"]Magenta[/button] [button type="large" colour="yellow"]Yellow[/button]</p>
    [/one_full]
    [divider]
    [one_full]
    <h3>Rounded Buttons</h3><p>[button type="rounded"]Default[/button] [button type="rounded" colour="red"]Red[/button] [button type="rounded" colour="orange"]Orange[/button] [button type="rounded" colour="blue"]Button[/button] [button type="rounded" colour="green"]Green[/button] [button type="rounded" colour="pink"]Pink[/button] [button type="rounded" colour="magenta"]Magenta[/button] [button type="rounded" colour="yellow"]Yellow[/button]</p>
    [/one_full]

#### Miscellaneous

    [one_full]<h3>Google Maps</h3>[/one_full]
    [googlemap src="http://maps.google.co.nz/maps?q=Marina+Bay,+Bayside+Road,+Gibraltar,+Spain&hl=en&ll=36.148133,-5.351264&spn=0.010639,0.01678&sll=36.137741,-5.345374&sspn=0.042561,0.06712&oq=marinagibraltar&gl=nz&t=m&z=16&iwloc=A"]

    [one_third]
    <h3>Dropcap</h3><p>
    [dropcap]L[/dropcap]
    orem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
    [/one_third]

    [one_third]
    <h3>Square Dropcap</h3><p>
    [square_dropcap]1[/square_dropcap]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
    [/one_third]

    [one_third_last]
    <h3>Round Dropcap</h3><p>
    [round_dropcap]2[/round_dropcap]
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor.</p>
    [code][round_dropcap]3[/round_dropcap][/code]
    [/one_third_last]
    [divider]
    [contact success="Thankyou for your message! We will get back to you shortly."]