[accordion action="start accordion list"]
  [accordion action="start accordion" title="Accordion Title" active="yes"]
    Your content
  [accordion action="end accordion"]
  [accordion action="start accordion" title="Accordion Title"]
    Your content
  [accordion action="end accordion"]
  [accordion action="start accordion" title="Accordion Title"] 
    Your content
  [accordion action="end accordion"]
[accordion action="end accordion list"]

Buttons

Code:

Buttons types

[button type="default" text="Default"]
[button type="primary" text="Primary"]
[button type="success" text="Success"]
[button type="info" text="Info"]
[button type="danger" text="Danger"]
[button type="link" text="Danger"]

Buttons sizes
[button type="default" text="Large" size="large"]
[button type="primary" text="Default" size="default"]
[button type="success" text="Medium" size="medium"]
[button type="info" text="small" size="small"]
[button type="danger" text="X-Small" size="x-small"]

Buttons width
[button type="default" text="Full width" width="100%"]
[button type="default" text="Fixed width" width="500px"]

Buttons behavior
[button type="default" text="Open link in the same tab" url="https://z-theme.myshopify.com"]
[button type="default" text="Open link in the new tab" url="https://z-theme.myshopify.com" open-link="new"]

All in one
[button type="default" text="All in one" size="large" width="300px" url="https://z-theme.myshopify.com" open-link="new" class="btn-new-color"]

Sample:

Buttons types

Buttons sizes

Buttons width

Buttons behavior

All In one

FontAwesome icons

Code:

[fa-icon name="camera-retro"]
[fa-icon name="camera-retro" size="2x"]
[fa-icon name="camera-retro" size="3x"]
[fa-icon name="camera-retro" size="4x" color="#f4f4f4"]
[fa-icon name="camera-retro" size="5x" class="custom-class"]

Sample:

Alerts

Style 01 (default)

Code:

[alert action="start" type="success" close-button="yes"]
<strong>Well done!</strong> You successfully read this important alert message. 
[alert action="start" type="info"]
<strong>Heads up!</strong> This alert needs your attention, but it's not super important. 
[alert action="end"]
[alert action="start" type="warning"]
<strong>Warning!</strong> Better check yourself, you're not looking too good.  
[alert action="end"]
[alert action="start" type="danger" close-button="yes"]
<strong>Oh snap!</strong> Change a few things up and try submitting again. 
[alert action="end"]

Sample:

Style 02

Code:

[alert action="start" style="02" type="success" title="You’ve just accomplished:" fa-icon="thumbs-up" close-button="yes"]
<ul class="list list--ckeck">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Vivamus blandit arcu sit amet semper porta.</li>
  <li>Integer id eros fringilla, varius leo sed, ultricies lectus.</li>
  <li>Curabitur consequat sem quis nisi luctus, a dignissim enim mattis.</li>
</ul> 
[alert action="end"]

[alert action="start" style="02" type="info" title="Consider these notes:" fa-icon="info-circle" close-button="yes"]
<ul class="list list--ckeck">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Vivamus blandit arcu sit amet semper porta.</li>
  <li>Integer id eros fringilla, varius leo sed, ultricies lectus.</li>
  <li>Curabitur consequat sem quis nisi luctus, a dignissim enim mattis.</li>
</ul> 
[alert action="end"]

[alert action="start" style="02" type="warning" title="Be attentive regarding:" fa-icon="exclamation-triangle" close-button="yes"] 
<ul class="list list--ckeck">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Vivamus blandit arcu sit amet semper porta.</li>
  <li>Integer id eros fringilla, varius leo sed, ultricies lectus.</li>
  <li>Curabitur consequat sem quis nisi luctus, a dignissim enim mattis.</li>
</ul>   
[alert action="end"]

[alert action="start" style="02" type="danger" title="Oh! You get the following errors:" fa-icon="minus-circle" close-button="yes"]
<ul class="list list--ckeck">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Vivamus blandit arcu sit amet semper porta.</li>
  <li>Integer id eros fringilla, varius leo sed, ultricies lectus.</li>
  <li>Curabitur consequat sem quis nisi luctus, a dignissim enim mattis.</li>
</ul>
[alert action="end"]

Sample:

Tabs

Style 01 (default)

Code:

[tab action="start tab container" ]
  [tab action="start tab navigation"]
    [tab action="new-tab" title="Description" active="yes"]
    [tab action="new-tab" title="Features"]
    [tab action="new-tab" title="Reviews"]
  [tab action="end tab navigation"]

  [tab action="start tab content"]

    [tab action="start tab-panel" active="yes"]
      Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.
    [tab action="end tab-panel"]

    [tab action="start tab-panel"]
      Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo.
    [tab action="end tab-panel"]

    [tab action="start tab-panel"]
      Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum  fermentum at vulputate in, aliquam id justo.
    [tab action="end tab-panel"]

  [tab action="end tab content"]
[tab action="end tab container"]

Sample:

Style 02 (default & vertical)

Code:

[tab-vertical action="start tab container"]
  [tab-vertical action="start tab navigation"]
    [tab-vertical action="new-tab" title="Description" active="yes"]
    [tab-vertical action="new-tab" title="Features"]
    [tab-vertical action="new-tab" title="Reviews"]
  [tab-vertical action="end tab navigation"]

  [tab-vertical action="start tab content"]

    [tab-vertical action="start tab-panel" active="yes"]
      Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.
    [tab-vertical action="end tab-panel"]

    [tab-vertical action="start tab-panel"]
      Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo.
    [tab-vertical action="end tab-panel"]

    [tab-vertical action="start tab-panel"]
      Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum  fermentum at vulputate in, aliquam id justo.
    [tab-vertical action="end tab-panel"]

  [tab-vertical action="end tab content"]
[tab-vertical action="end tab container"]

Sample:

Style 03 (with icons)

Code:

[tab action="start tab container" style="02"]
  [tab action="start tab navigation"]
    [tab action="new-tab" title="Description" active="yes" fa-icon="home"]
    [tab action="new-tab" title="Features" fa-icon="rocket"]
    [tab action="new-tab" title="Reviews" fa-icon="star"]
  [tab action="end tab navigation"]

  [tab action="start tab content"]

    [tab action="start tab-panel" active="yes"]
      Nam auctor dapibus ante vel facilisis. Cras eget adipiscing nisi. Duis aliquet ligula non risus sollicitudin commodo.
    [tab-vertical action="end tab-panel"]

    [tab action="start tab-panel"]
      Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dolor nisi, fermentum at vulputate in, aliquam id justo.
    [tab action="end tab-panel"]

    [tab action="start tab-panel"]
      Donec ullamcorper lacinia turpis at aliquet. Cras consectetur fermentum erat, in placerat ligula pharetra eget. Vestibulum  fermentum at vulputate in, aliquam id justo.
    [tab action="end tab-panel"]

  [tab action="end tab content"]
[tab action="end tab container"]

Sample:

Dividers

Code:

Divider default
[divider type="default" size="1"]
Divider with icon
[divider type="icon" fa-icon="rocket" color-icon-bg="#000"]
Divider with dots
[divider type="dots" dot-color-one="#000" dot-color-two="#f4f4f4" dot-color-three="red"]

Sample:

Divider default

Divider with icon

Divider with dots

Tooltips

Style 01 (default)

Code:

[tooltip action="start" text="Tooltip top" position="top"]tooltip top[tooltip action="end"]
[tooltip action="start" text="Tooltip bottom" position="bottom"]tooltip bottom[tooltip action="end"]
[tooltip action="start" text="Tooltip left" position="left"]tooltip left[tooltip action="end"]
[tooltip action="start" text="Tooltip right" position="right"]tooltip right[tooltip action="end"]

Sample:

Tooltip default

Style 02 (box)

Code:

[tooltip-box action="start" text="Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur."]tooltip box[tooltip-box action="end"]

Sample:

Tooltip default

Facebook widget

Code:

[facebook-widget id="shopify"]

Sample:

Twitter widget

Code:

[twitter-widget account-name="OliaGozha"]

Sample:

Instagram widget

Code:

[instagram-widget limit="6"]

The settings for Instagram widget are adjusted on the "Customize Theme" page

Sample:

Social Icons

Code:

[social-icon url="https://twitter.com/oliagozha" fa-icon="twitter"]
[social-icon url="https://twitter.com/oliagozha" fa-icon="facebook"]
[social-icon url="https://twitter.com/oliagozha" fa-icon="instagram"]

Sample:

Slider simple

Code:

[slider action="start slider" pagination="yes" navigation="yes"]

  [slider action="start slide" image-url="https://cdn.shopify.com/s/files/1/1504/6548/t/2/assets/img_hp_slider_1_s1.jpg"]
    <div class="slide-content">
      <h2 class="slide-content__heading">New Autum Collection</h2>
      <p class="slide-content__subheading">Fashion Statement</p>
      <a href="https://z-theme.myshopify.com/collections" class="slide-content__btn">Shop Now
    </div>
  [slider action="end slide"]

  [slider action="start slide" image-url="https://cdn.shopify.com/s/files/1/1504/6548/t/2/assets/img_hp_slider_1_s2.jpg"]
    <div class="slide-content">
      <h2 class="slide-content__heading">25% off ahoes and accessories</h2>
      <a href="https://z-theme.myshopify.com/collections" class="slide-content__btn">Shop Now</a>
    </div>
  [slider action="end slide"]

  [slider action="start slide" image-url="https://cdn.shopify.com/s/files/1/1504/6548/t/2/assets/img_hp_slider_1_s3.jpg"]
    <div class="slide-content">
      <h2 class="slide-content__heading">Shoes Life</h2>
      <a href="https://z-theme.myshopify.com/collections" class="slide-content__btn">Shop Now
    </div>
  [slider action="end slide"]

[slider action="end slider"]

Sample:

New Autum Collection

Fashion Statement

Shop Now

25% off ahoes and accessories

Shop Now

Shoes Life

Shop Now

Slider with thumbnails

Code:

[slider-thumb action="start slider" pagination="yes" navigation="yes"]

  [slider-thumb action="start slide" image-url="https://cdn.shopify.com/s/files/1/1504/6548/t/2/assets/img_hp_slider_1_s1.jpg"]
    <div class="slide-content">
      <h2 class="slide-content__heading">New Autum Collection</h2>
      <p class="slide-content__subheading">Fashion Statement</p>
      <a href="https://z-theme.myshopify.com/collections" class="slide-content__btn">Shop Now
    </div>
  [slider-thumb action="end slide"]

  [slider-thumb action="start slide" image-url="https://cdn.shopify.com/s/files/1/1504/6548/t/2/assets/img_hp_slider_1_s2.jpg"]
    <div class="slide-content">
      <h2 class="slide-content__heading">25% off ahoes and accessories</h2>
      <a href="https://z-theme.myshopify.com/collections" class="slide-content__btn">Shop Now</a>
    </div>
  [slider-thumb action="end slide"]

  [slider-thumb action="start slide" image-url="https://cdn.shopify.com/s/files/1/1504/6548/t/2/assets/img_hp_slider_1_s3.jpg"]
    <div class="slide-content">
      <h2 class="slide-content__heading">Shoes Life</h2>
      <a href="https://z-theme.myshopify.com/collections" class="slide-content__btn">Shop Now
    </div>
  [slider-thumb action="end slide"]

[slider-thumb action="end slider"]

Sample:

New Autum Collection

Fashion Statement

Shop Now

25% off ahoes and accessories

Shop Now

Shoes Life

Shop Now

Our partners

Code:

[our-partners action="start-partners"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-08.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-07.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-06.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-05.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-04.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-03.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-02.jpg"]
  [our-partners action="partner" image="https://cdn.shopify.com/s/files/1/1504/6548/files/img_barand-01.jpg"]
[our-partners action="end-partners"]

Sample:

Our features

Code:

[our-features action="start features"]
  [our-features action="feature" name="Best Service" description="On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain" icon="thumbs-up"]
  [our-features action="feature" name="24/7 Customer Service" description="Excellent customer service, one phone call away! Get help and learn how to call home cheap & easy. We answer all your questions, anytime." icon="phone"]
  [our-features action="feature" name="Extended Warranty" description="An extended warranty plan adds protection to the life of your product. Depending on the plan you purchase, you can add additional years of coverage to the standard manufacturer's warranty." icon="shield"]
[our-features action="end features"]

Sample:

Best Service

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain

24/7 Customer Service

Excellent customer service, one phone call away! Get help and learn how to call home cheap & easy. We answer all your questions, anytime.

Extended Warranty

An extended warranty plan adds protection to the life of your product. Depending on the plan you purchase, you can add additional years of coverage to the standard manufacturer's warranty.

---

Youtube video

Code:

[youtube video="2UvzF3NeTnY" width="560" height="315"]

Sample:

---

Progress bars

Code:

[progress-bar color="#c7c7c7" duration="1000" end-percentages="56" width="2"]
[progress-bar color="#c7c7c7" duration="2000" end-percentages="73"]

[progress-circle color="#c7c7c7" duration="1500" end-percentages="54" width="1"]
[progress-circle color="#c7c7c7" duration="2000" end-percentages="81" width="2"]

Sample:

---

Service list

Code:

[services-list action="start services list"]

  [services-list action="start service item" title="24/7 Phone support" icon="phone"]
    From answering simple questions all the way to removing stubborn viruses, we're here to help you online, on the phone, and at more than 10 Z-Theme stores.
  [services-list action="end service item"]

  [services-list action="start service item" title="Consulting Sessions" icon="suitcase"]
    Whether for an hour or a day, we'll sit down with you and your team to build a complete strategy for success.
  [services-list action="end service item"]

  [services-list action="start service item" title="Weekly Check-ins" icon="calendar-check-o"]
    Stay on track with regular check-in sessions, ideal for busy execs who just need more hours in the day
  [services-list action="end service item"]

  [services-list action="start service item" title="Onsite Seminars" icon="line-chart"]
  Does your whole team need training? Let us come to your office and lead a seminar designed just for you.
  [services-list action="end service item"]
  
[services-list action="end services list"]

Sample:

24/7 Phone support

From answering simple questions all the way to removing stubborn viruses, we're here to help you online, on the phone, and at more than 10 Z-Theme stores.

Consulting Sessions

Whether for an hour or a day, we'll sit down with you and your team to build a complete strategy for success.

Weekly Check-ins

Stay on track with regular check-in sessions, ideal for busy execs who just need more hours in the day

Onsite Seminars

Does your whole team need training? Let us come to your office and lead a seminar designed just for you.

---

Subscribe form

Code:

[subscribe-form center="yes" title="Get latest Z Theme news" info-text="Sign up now and get 25% off one item." placeholder="your email" button="Subscribe"]


[subscribe-form title="Get latest Z Theme news" info-text="Sign up now and get 25% off one item." placeholder="your email" button="Subscribe"]

Sample:

Get latest Z Theme news

Sign up now and get 25% off one item.

Subscribe

Get latest Z Theme news

Sign up now and get 25% off one item.

Subscribe

---

Featured collection slider

Code:

[products-slider collection-name="Accessories" title="New Products" limit="10"]

Sample:

New Products

New Sold Out -42%

Hurry up! Offer ends in

:
Days

:
Hours

:
Minutes

Seconds

Bravesoul Backpack with Front Pocket

$32.25
$56.43

Sold Out

Sale -36%

Calvin Klein CK Robin Billfold Leather Wallet

$61.27
$96.74

Add to Cart

Quicksilver Zip Trip Wallet

$33.86

Add to Cart

New

Quiksilver Medium Holdall

$35.47

Add to Cart

---