Getting Started

An introduction to Slick Coupons, folder structure, template set up and everying you need to know before you start customizing it.

All you need to know about how to properly set up the Slick Coupons HTML5 template.

Slick Coupons is a responsive / retina-ready HTML template that gives you the posibility to store coupons and promo codes from different brands and companies. It contains 15 built-in pages, including coupons pages, store pages, products pages, blog, about, contact, blog, single post, register, login, recovery and a couple of other layouts for the coupons and products pages.


What's included

assets/
├── css/
│   ├── bootstrap.min.css
│   ├── fontawesome-all.min.css
│   ├── owl.carousel.min.css
│   └── styles.css
├── img/
│   ├── demo content images
├── js/
│   ├── functions.js
│   ├── functions.js
│   ├── jquery-3.3.1.min.js
│   └── owl.carousel.min.js
└── webfonts/  
images/
└── website images



What you get

With the purchase of Slick Coupons here are the items you're gonna get

  • HTML Content
  • Documentation

Template Features

  • Valid HTML5 / CSS3 pages
  • Perfectly responsive
  • Retina-Ready
  • Cross browser compatible – tested in IE 9,10,11; Firefox; Safari; Chrome; Edge and Opera.
  • Well formatted and commented, so it should be easy to adapt and extend
  • Pages included:
    • Home
    • Coupons
      • Recently Added
      • Expiring Soon
      • Printable
      • Coupon Codes
      • Popular
    • Stores
      • A-Z Stores
      • Top Stores
      • Most Voted
      • Suggest Store
    • Products
      • Products
      • Category Products
    • Blog
    • Contact
    • About
    • Account
    • Sign In
    • Register
    • Recovery
  • Working ajax contact form with validation and working PHP mailer script
  • Hundreds of Retina-Ready Icons included https://fortawesome.github.io/Font-Awesome/cheatsheet
  • Documentation included

Documentation / Support

An item documentation is included and the source code is properly commented and formatted, so you shouldn’t have any problem working with this item.

If you need support, you can contact me here on ThemeForest. Please include the template name, website URL and detailed information about your problem. You can expect a response within 48 hours on weekdays, depending on the number of requests in queue.


Support & FAQ

Thank you for purchasing Slick Coupons HTML Template! I'd be glad to help you if you're in need of assistance or have any questions relating to Slick Coupons template. If you have a more general question relating to the template, please contact me directly on ThemeForest. If you want to be kept in the loop for any future updates, make sure you follow me on ThemeForest as well.


Adding Coupons

To add your Coupons in a desired page you first need to make sure you have <div class="list clearfix"></div> that wraps your items. Basically you want to add the code inside that list which will serve as the container for your Coupons.

<div class="item">
      <div class="image">
          <img src="images/br2.png" alt="" />
      </div>
      <div class="content">
          <h4>50% OFF</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id porta leo.</p>
      </div>
      <div class="bottom clearfix">
          <a href="store.html">Macy's</a>
          <a href="#" class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></a>
          <div>
              <ul class="options">
                  <li><a href="#"><i class="fas fa-share"></i></a>
                      <ul>
                          <li><a href="coupons.html"><i class="fab fa-facebook-f"></i> Facebook</a></li>
                          <li><a href="coupons.html"><i class="fab fa-twitter"></i> Twitter</a></li>
                      </ul>
                  </li>
              </ul>
              <a href="#" class="favorite"><i class="fas fa-heart"></i></a>
              <a href="#" class="button">Get Coupon</a>
            </div>
        </div>
</div>

Adding Stores

To add your Stores to a desired page you first need to make sure you have <div class="list2 clearfix"></div> that wraps your items. Just like for the Coupons, you want to add the code inside that list which will serve as the container for your Stores page.

<div class="item">
    <div class="image">
        <img src="images/br15.png" alt="" />
    </div>
    <div class="bottom clearfix">
        <a href="store.html">Burger King</a>
        <a href="#" class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></a>
    </div>
</div>

Adding Products

To add your Stores to a desired page you first need to make sure you have <div class="list2 clearfix"></div> that wraps your items. Just like for the Coupons, you want to add the code inside that list which will serve as the container for your Stores page.

<div class="item">
    <div class="image">
        <img src="assets/img/a.png" alt="" />
    </div>
    <div class="content">
        <h4>20% OFF</h4>
        <p class="date">Expires 16.12.2019</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id porta leo.</p>
        <div class="price"><span class="current-price">$118.40</span><span class="old-price">$148.00</span></div>
    </div>
    <div class="bottom clearfix">
        <a href="store.html">Dolce & Gabbana</a>
        <a href="#" class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i></a>
        <div>
            <ul class="options">
                <li><a href="#"><i class="fas fa-share"></i></a>
                    <ul>
                        <li><a href="coupons.html"><i class="fab fa-facebook-f"></i> Facebook</a></li>
                        <li><a href="coupons.html"><i class="fab fa-twitter"></i> Twitter</a></li>
                    </ul>
                </li>
            </ul>
            <a href="#"><i class="far fa-heart"></i></a>
            <a href="#" class="button">Shop</a>
        </div>
    </div>
</div>

Adding a Slider

To add a Slider to your HomePage or any other page you want it displayed simply copy/paste the code bellow and make sure you add it inside the <body></body> tag. From a design stand point it's better to have it right under the header.

<div class="owl-carousel owl-theme">
      <div class="item">
          <a href="">
              <img src="http://localhost/v7/content/uploads/images/gallery_5c0d074d46d3a.jpg" />
          </a>
      </div>
      <div class="item">
          <a href="">
              <img src="http://localhost/v7/content/uploads/images/gallery_5c0d0b9e9ed53.jpg" />
          </a>
      </div>
</div>

Adding a Category Slider

To add a Category Slider to your Stores page or any other page you want it displayed simply copy/paste the code bellow and make sure you add it inside the <body></body> tag. From a design stand point it's better to have it right under the header. The Category Slider should be wrapped inside <div class="container"><div class="list3 owl-carousel clearfix"></div></div>

Bellow is the item markup that should be placed in the container mentioned above

<div class="item selected">
    <div class="icon">
        <i class="fas fa-car"></i>
    </div>
    <div class="bottom clearfix">
        <div class="title">
            <a href="category-coupons.html">Auto & Insurance</a>
        </div>
    </div>
</div>

Updates

February 2019 – Initial Release

Credits

The Logo and all images are NOT included, but can be purchased here:

Mockups by Pexels.com

Mockups by Pixabay.com