Animations

This shortcode allows the easy embedding of [Animations] in pages and product descriptions.

Usage

You can then use the following shortcode.

[animate name="" delay="" text="example"]

Available variables

Variable Default Description
name Required

Get animateion name here https://daneden.github.io/animate.css/
delay Required The animation-delay property specifies a delay for the start of an animation. The animation-delay value of Pasific Shopify is defined in milliseconds (ms)
text Required Describing the content of Shortcode

Demo: https://spasific.myshopify.com/pages/amazing-animations

Accordians

This shortcode allows the easy embedding of [Accordians] in pages and product descriptions.

Usage

You can then use the following shortcode.

[accordian source="" color=""]

Available variables

Variable Default Description
source

Step 1: goto https://storename.myshopify.com/admin/blogs

Step 2: quick view
color blank | primary | success | info | warning | danger | default | gray | dark Describing the color of Accordians

Demo: https://spasific.myshopify.com/pages/amazing-animations

Blockquote

This shortcode allows the easy embedding of [Blockquote] in pages and product descriptions.

Usage

You can then use the following shortcode:

[blockquote class="blank or blockquote-pasific or blockquote-pasific-has-photo" radius="blank or img-circle or img-rounded" content="" title="" subtitle=""]

Available variables

Variable Default Description
class blank | blockquote-pasific | blockquote-pasific-has-photo This is the required attribution - Creating style for box!
radius blank |img-circle | img-rounded The border-radius property is used to add rounded corners to an element.
content Required The content of Blockquote
title Required The title of Blockquote
subtitle Required The subtitle of Blockquote

Demo: https://spasific.myshopify.com/pages/blockquote

Buttons

This shortcode allows the easy embedding of [Button] in pages and product descriptions.

Usage

You can then use the following shortcode.

[button class="" desc="" icon="get http://fontawesome.io/icons/"]

Available variables

Variable Default Description
class Required This is a required attribution, to create style for box
desc Required Description of the button
icon Required Get the icon herer: http://fontawesome.io/icons

Demo: https://spasific.myshopify.com/pages/buttons

Content Boxes

This shortcode allows the easy embedding of [Content Boxes] in pages and product descriptions.

Usage

You can then use the following shortcode.

[cbox class="" icon="" title="" desc=""]

Available variables

Variable Default Description
class Required

- This is the required attribute.

- Contributing to edit content box (alightment left - alightment center - alightment right)
icon Required

This is the combination of 2 components

- Fontawesome: http://fontawesome.io/icons/

- Background of icon
Title Required The title of Content Boxes

Demo: https://spasific.myshopify.com/pages/content-box

Counters

This shortcode allows the easy embedding of [Counter] in pages and product descriptions.

Usage

You can then use the following shortcode.

[counter num="" title="" cnum="" ctitle=""]

Available variables

Variable Default Description
num Required Count number larger than 0
title Required The title of counter
cnum Required The color of number

Demo: https://spasific.myshopify.com/pages/counters

Headings

This shortcode allows the easy embedding of [Heading] in pages and product descriptions.

Usage

You can then use the following shortcode.

[heading class="" icon="" cunderline="" punderline="" subtitle="" desc=""]

Available variables

Variable Default Description
class Required

- This is the required attribution

- Contributing to edit heading (alignment left, alignment center, alignment right)

- Color of heading

- Font of deading
cunderline Required Style of the Underline
icon Required Get its fontwesome from here: http://fontawesome.io/icons/
subtitle Required Short Description for heading
punderline

value: top | bottom

- The position of the underline

Demo: https://spasific.myshopify.com/pages/headings

Icon List

This shortcode allows the easy embedding of [Icon list] in pages and product descriptions.

Usage

You can then use the following shortcode.

[list class="" icon="" tag=""]

Available variables

Variable Default Description
class Required

- Place to keep Style.
icon Required Get icon from here: Fontwesome: http://fontawesome.io/icons/
tag - value: ul | ol

The " ol " tag defines an ordered list

The " ul "tag defines an unordered (bulleted) list

Demo: https://spasific.myshopify.com/pages/complete-list-styles

Fonts

This shortcode allows the easy embedding of [Fonts] in pages and product descriptions.

Usage

You can then use the following shortcode.

[font class=""]

Available variables

Variable Default Description
class Required

Get the Font class here:

http://fontawesome.io/icons/

http://getbootstrap.com/components/#glyphicons-glyphs

https://spasific.myshopify.com/pages/100-et-line-icons

Demo: https://spasific.myshopify.com/pages/100-et-line-icons

Progress Bars Horizontal

This shortcode allows the easy embedding of [Progress Bar] in pages and product descriptions.

Usage

You can then use the following shortcode.

[hprogress class="" bg="" num="" title]

Available variables

Variable Default Description
class Required

- This is the required attribution.

- Contribute to align progress bar (alignment left, alignment center, alignment right
bg Required Bacground color of progress bar.
num Required The counting number which larger than 0

Demo: https://spasific.myshopify.com/pages/horizontal-progress-bar-styles

Progress Bars Circle

This shortcode allows the easy embedding of [Progress Bar Circle] in pages and product descriptions.

Usage

You can then use the following shortcode.

[cprogress class=""  size="" num="" thickness="" title=""]

Available variables

Variable Default Description
class Required

- This is the combination of components.

- The required attribution.

- Contribute to align progress bar (alignment left, alignment right, alignment center)

- Colors
size Required Describing the size of Progress bars circle
num Required The counting number which larger than 0
title Required The title of Progress bars circle.

Demo: https://spasific.myshopify.com/pages/circle-progress-bar-styles

Tabs & Pills

This shortcode allows the easy embedding of [ Tabs & Pills] in pages and product descriptions.

Usage

You can then use the following shortcode.

[tab class="" source=""]

Available variables

Variable Default Description
class Required

This is the combination of 2 components Style + Position
source Required As the source of shortcode accordion

Demo: https://spasific.myshopify.com/pages/tab-styles

Teams

This shortcode allows the easy embedding of [Team] in pages and product descriptions.

Usage

You can then use the following shortcode.

[team class="" col="" slider=""]

Available variables

Variable Default Description
class - Value: team-one | team-two | team-three | team-four bg-grad-day-tripper | team-five bg-light | team-six active

This is the combination of those components:

- Style of teammembers

- Background
col - Value: 1 | 2 | 3 | 4 | 6 - The "col" valuable specifies column properties for each column.
Slider - Value: 0 | 1 Default: False

Demo: https://spasific.myshopify.com/pages/team-member

Testimonials

This shortcode allows the easy embedding of [Testimonial] in pages and product descriptions.

Usage

You can then use the following shortcode.

[testimonials source="" class="" bg=""]

Available variables

Variable Default Description
source Required

As a source of shortcode accordion
class Required

This is the combination between 2 components:

- Style

- The position of each elements in Testimonials
bg Required The color each element content of background

Demo: https://spasific.myshopify.com/pages/testimonials