Introduction

Welcome to SHOPY online documentation. This documentation is to help you with template’s customization. Basic HTML and CSS knowledge is required to customize this template.

You can buy the theme’s license here

Development Setup

To get started, you need to do the following:

Download and install node.js to get started.
Install gulp, run the following command: npm install gulp -g
Open terminal, navigate to the theme folder and run npm install to install all theme dependencies.
Run gulp in Terminal. This will track all the sass and html files for changes and start a local webserver. Or you can run gulp build to compile files without starting local webserver.
You're done!

File Structure

A guide to understanding how Shopy is structured.

app All theme files are located here. This is a precompiled site that you see in demo.

app/assets Images, css, js files are located here.

app/documentation.html Template documentation is here.

node_modules This folder will be automatically created right after you run gulp command.

gulpfile.js All the build commands.

package.json List of dependencies and npm information.

Changelog

Version v1.0.0
24 Sept, 2020
1. Initial Release

Accordion

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Preview
HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa explicabo pariatur fuga maiores quasi eum ex cupiditate ea, suscipit dolorum iure quam veritatis ipsum molestiae nobis quas animi. Voluptatum, nobis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aliquam, assumenda dolor veritatis nesciunt numquam commodi quaerat. Pariatur debitis tenetur necessitatibus similique placeat id, voluptate nesciunt dolor dolorum quidem quae.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tenetur quam error minus odit, tempore et quis, enim corporis perspiciatis numquam modi doloremque rerum ducimus, quidem delectus unde similique nostrum.

<div class="accordion" id="accordion-1">
  <div class="card active">
    <div class="card-header" id="heading-1-1">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1-1" aria-expanded="true" aria-controls="collapse-1-1">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapse-1-1" class="collapse show" aria-labelledby="heading-1-1" data-parent="#accordion-1">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa explicabo pariatur fuga maiores quasi eum ex cupiditate ea, suscipit dolorum iure quam veritatis ipsum molestiae nobis quas animi. Voluptatum, nobis.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-1-2">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapse-1-2" class="collapse" aria-labelledby="heading-1-2" data-parent="#accordion-1">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aliquam, assumenda dolor veritatis nesciunt numquam commodi quaerat. Pariatur debitis tenetur necessitatibus similique placeat id, voluptate nesciunt dolor dolorum quidem quae.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-1-3">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapse-1-3" aria-expanded="false" aria-controls="collapse-1-3">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapse-1-3" class="collapse" aria-labelledby="heading-1-3" data-parent="#accordion-1">
      <div class="card-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem tenetur quam error minus odit, tempore et quis, enim corporis perspiciatis numquam modi doloremque rerum ducimus, quidem delectus unde similique nostrum.</p>
      </div>
    </div>
  </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Preview
HTML

A simple success alert—check it out!

A simple danger alert with an example link. Give it a click if you like.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

News
24th Aug, 2019

Get ready for tennis

Some quick example text to build on the card title and make up the bulk of the card's content.

<div class="card card-post">
  <a href="" class="card-img-top">
    <img src="assets/images/demo/image-1.jpg" alt="Image">
  </a>
  <div class="card-body">
    <ul class="list list--horizontal list--separated text-uppercase fs-14">
      <li><a href="" class="underline">News</a></li>
      <li><time datetime="2019-08-24 20:00" class="text-muted">24th Aug, 2019</time></li>
    </ul>
    <h2 class="card-title fs-20"><a href="">Get ready for tennis</a></h2>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Tile

Preview
HTML

Feel the summer Tennis Look

Shop Now

<div class="card card-tile">
  <figure class="card-image equal vh-50">
    <span class="image image-scroll" style="background-image: url(assets/images/demo/image-1.jpg)"
      data--100-bottom-top="transform: translateY(0%);"
      data-top-bottom="transform: translateY(25%);"></span>
  </figure>
  <div class="card-footer p-lg-5">
    <div class="bg-white d-inline-block p-3">
      <h2 class="card-title"><span class="d-block text-gray">Feel the summer</span> Tennis Look</h2>
      <a href="" class="underlined">Shop Now</a>
    </div>
  </div>
</div>

Data

Preview
HTML

Order 12339201

Order #
12339201
Shipped Date
23 March 2019
Total
$78.00
Status
Processing

<div class="card card-data bordered">
  <div class="card-header">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="card-title fs-18"><a href="">Order 12339201</a></h2>
      </div>
      <div class="col text-right">
        <span class="dropdown">
          <button class="btn btn-lg btn-white btn-ico" id="dropdown-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="icon-more-vertical"></i></button>
          <span class="dropdown-menu" aria-labelledby="dropdown-1">
            <a class="dropdown-item" href="#!">Action</a>
            <a class="dropdown-item" href="#!">Another action</a>
            <a class="dropdown-item" href="#!">Something else here</a>
          </span>
        </span>
      </div>
    </div>
  </div>
  <div class="card-body">
    <ul class="order-preview">
      <li><a href="product-1.html" title="Fawn Wool / Natural Mammoth Chair" data-toggle="tooltip" data-placement="top"><img src="assets/images/demo/product-1.jpg" alt="Fawn Wool / Natural Mammoth Chair"></a></li>
      <li><a href="product-1.html" title="Dark Stained NY11 Dining Chair" data-toggle="tooltip" data-placement="top"><img src="assets/images/demo/product-2.jpg" alt="Dark Stained NY11 Dining Chair"></a></li>
      <li><a href="product-1.html" title="Dark Stained NY11 Dining Chair" data-toggle="tooltip" data-placement="top"><img src="assets/images/demo/product-3.jpg" alt="Dark Stained NY11 Dining Chair"></a></li>
    </ul>
  </div>
  <div class="card-body">
    <ul class="order-meta">
      <li>
        <h5 class="order-meta-title">Order #</h5>
        <span>12339201</span>
      </li>
      <li>
        <h5 class="order-meta-title">Shipped Date</h5>
        <span>23 March 2019</span>
      </li>
      <li>
        <h5 class="order-meta-title">Total</h5>
        <span>$78.00</span>
      </li>
      <li>
        <h5 class="order-meta-title">Status</h5>
        <span class="text-muted">Processing</span>
      </li>
    </ul>
  </div>
</div>

Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Single

Preview
HTML

<div class="owl-carousel owl-carousel--alt text-center" data-nav="true" data-margin="20" data-loop="true" data-dots="true">
  <div class="card card-tile">
    <div class="equal equal-50 bg-green">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 1</h3>
      </div>
    </div>
  </div>
  <div class="card card-tile">
    <div class="equal equal-50 bg-blue">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 2</h3>
      </div>
    </div>
  </div>
  <div class="card card-tile">
    <div class="equal equal-50 bg-red">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 3</h3>
      </div>
    </div>
  </div>
</div>

Multiple

Preview
HTML

<div class="owl-carousel owl-carousel--alt text-center" data-items="[3,3,2,1]" data-nav="true" data-margin="10" data-loop="true">
  <div class="card card-tile">
    <div class="equal equal-50 bg-green">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 1</h3>
      </div>
    </div>
  </div>
  <div class="card card-tile">
    <div class="equal equal-50 bg-blue">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 2</h3>
      </div>
    </div>
  </div>
  <div class="card card-tile">
    <div class="equal equal-50 bg-red">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 3</h3>
      </div>
    </div>
  </div>
  <div class="card card-tile">
    <div class="equal equal-50 bg-purple">
      <div class="card-body text-center">
        <h3 class="text-white">Slide 4</h3>
      </div>
    </div>
  </div>
</div>

Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Default

Preview
HTML

Email address We'll never share your email with anyone else.

Custom select

<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group mt-2">
  <label for="exampleInput-5">Custom select</label>
  <select id="exampleInput-5" class="custom-select">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

Sizing

Preview
HTML

Small

Regular

Large

<div class="form-group mb-2">
  <label for="exampleInput-1">Small</label>
  <input id="exampleInput-1" class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
</div>
<div class="form-group mb-2">
  <label for="exampleInput-2">Regular</label>
  <input id="exampleInput-2" class="form-control form-control" type="text" placeholder=".form-control">
</div>
<div class="form-group">
  <label for="exampleInput-3">Large</label>
  <input id="exampleInput-3" class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
</div>

Floating label

Preview
HTML

Email Address

First Name

Surname

Date of birth

<div class="form-label-group">
  <input type="email" id="inputEmail" class="form-control form-control-lg" placeholder="Email Address" required="" value="">
  <label for="inputEmail">Email Address</label>
</div>

Checkboxes & Radio Buttons

Unchecked

Checked

Disabled unchecked

Disabled checked

Unchecked

Checked

Disabled unchecked

Disabled checkbox

Range Slider

<input type="text" class="rangeslider" name="Range Slider" data-min="0" data-max="1000" data-from="200" data-to="800"/>

Product

Default

Preview
HTML

Burgundy Dress

Brand $130.00

Cream Dress

$118.00

<div class="card card-product">
  <figure class="card-image">
    <a href="#!" class="action"><i class="icon-heart"></i></a>
    <a href="#!">
      <img src="assets/images/demo/product-listing-1.jpg" alt="Image">
      <img src="assets/images/demo/product-listing-1-1.jpg" alt="Image">
    </a>
    <span class="badge badge-success">New</span>
  </figure>
  <div class="card-footer">
    <h3 class="card-title"><a href="">Burgundy Dress</a></h3>
    <span class="brand">Brand</span>
    <span class="price">$130.00</span>
  </div>
</div>

<div class="card card-product">
  <figure class="card-image">
    <a href="#!" class="action"><i class="icon-heart"></i></a>
    <a href="#!">
      <img src="assets/images/demo/product-3.jpg" alt="Image">
      <img src="assets/images/demo/product-3-3.jpg" alt="Image">
    </a>
  </figure>
  <a href="" class="card-body">
    <h3 class="card-title">Skirt</h3>
    <span class="price">$29.00</span>
  </a>
</div>

Tabs

Default Bootstrap Nav component combined with Lavalamp for fancy animation.

Default

First Tab
Second Tab

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.

<ul class="nav nav-tabs lavalamp" id="component-1" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#component-1-1" role="tab" aria-controls="component-1-1" aria-selected="true">First Tab</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#component-1-2" role="tab" aria-controls="component-1-2" aria-selected="false">Second Tab</a>
  </li>
</ul>
<div class="tab-content" id="component-1-content">
  <div class="tab-pane fade show active" id="component-1-1" role="tabpanel" aria-labelledby="component-1-1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.</p>
  </div>
  <div class="tab-pane fade" id="component-1-2" role="tabpanel" aria-labelledby="component-1-2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
  </div>
</div>

Vertical

First Tab
Second Tab

<div class="row">
  <div class="col">
    <ul class="nav nav-tabs flex-column lavalamp" id="demo-2" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#demo-2-1" role="tab" aria-controls="demo-2-1" aria-selected="true">First Tab</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#demo-2-2" role="tab" aria-controls="demo-2-2" aria-selected="false">Second Tab</a>
      </li>
    </ul>
  </div>
  <div class="col">
    <div class="tab-content" id="demo-2-content">
      <div class="tab-pane fade show active" id="demo-2-1" role="tabpanel" aria-labelledby="demo-2-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est animi voluptatum voluptas, nihil impedit? Deleniti aspernatur inventore libero rem fuga eius dolores odio, omnis officiis, quidem voluptas voluptatem sunt enim.</p>
      </div>
      <div class="tab-pane fade" id="demo-2-2" role="tabpanel" aria-labelledby="demo-2-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe dignissimos illum quisquam repellendus, laboriosam perspiciatis aliquid, possimus hic sunt omnis iusto enim ratione quod natus doloribus optio, recusandae eius laudantium.</p>
      </div>
    </div>
  </div>
</div>

Best selling

New Arivals

Bold Cuff Insert Polo Shirt

Bold Cuff Insert Polo Shirt

Introduction

Development Setup

File Structure

Changelog

Version v1.0.0

Accordion

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Alerts

Well done!

Breadcrumbs

Buttons

Cards

Post

Get ready for tennis

Tile

Feel the summer Tennis Look

Data

Order 12339201

Order #

Shipped Date

Total

Status

Dropdowns

Carousel

Single

Slide 1

Slide 2

Slide 3

Multiple

Slide 1

Slide 2

Slide 3

Slide 4

Forms

Default

Sizing

Floating label

Checkboxes & Radio Buttons

Range Slider

Product

Default

Burgundy Dress

Cream Dress

Product Tile

Skirt

Swimwear

Modal

Tabs

Default

Vertical