• 020-800-456-747
  • Free shipping on orders over $300

Theme Components

This is a quick showcase of some of the main custom components that come with this theme..

Accordion

Block components used to create an Accordion using Bootstrap' collapse plugin.

The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream.

import { Collapse } from 'react-bootstrap

const Component = () => {
    const [collapse, setCollapse] = React.useState({1: true})

    const toggleCollapse = (e,tab) => {
        e.preventDefault()
        setCollapse({...collapse,[tab]: !collapse[tab]})
    }
    return (
      <div role="tablist">
        <div className="block mb-3">
          <div className="block-header" onClick={(e) => toggleCollapse(e, 1)}>
            <strong>
              <a
                href="#"
                className="accordion-link"
                aria-expanded={collapse[1]}
              >
                Option 1
              </a>
            </strong>
          </div>

          <Collapse in={collapse[1]}>
            <div>
              <div className="p-3">
                <p className="text-muted mb-0">
                  The bedding was hardly able to cover it and seemed ready to
                  slide off any moment. His many legs, pitifully thin compared
                  with the size of the rest of him, waved about helplessly as
                  he looked. &quot;What's happened to me?&quot; he thought. It
                  wasn't a dream.
                </p>
              </div>
            </div>
          </Collapse>
        </div>
        <div className="block mb-3">
          <div className="block-header" onClick={(e) => toggleCollapse(e, 2)}>
            <strong>
              <a
                href="#"
                className="accordion-link"
                aria-expanded={collapse[2]}
              >
                Option 2
              </a>
            </strong>
          </div>
          <Collapse in={collapse[2]}>
            <div>
              <div className="block-body py-5 d-flex align-items-center">
                <input type="radio" name="shippping" id="payment-method-1" />
                <label className="ms-3" for="payment-method-1">
                  <strong className="d-block text-uppercase mb-2">
                    {" "}
                    Pay with PayPal
                  </strong>
                  <span className="text-muted text-sm">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.{" "}
                  </span>
                </label>
              </div>
            </div>
          </Collapse>
        </div>
        <div className="block mb-3">
          <div className="block-header" onClick={(e) => toggleCollapse(e, 3)}>
            <strong>
              <a
                href="#"
                className="accordion-link"
                aria-expanded={collapse[3]}
              >
                Option 3
              </a>
            </strong>
          </div>
          <Collapse in={collapse[3]}>
            <div>
              <div className="block-body py-5 d-flex align-items-center">
                <input type="radio" name="shippping" id="payment-method-1" />
                <label className="ms-3" for="payment-method-1">
                  <strong className="d-block text-uppercase mb-2">
                    {" "}
                    Pay on delivery
                  </strong>
                  <span className="text-muted text-sm">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.{" "}
                  </span>
                </label>
              </div>
            </div>
          </Collapse>
        </div>
      </div>
    )
}

export default Component

Block

Similar to a card but with adjusted paddings, no borders and a light gray header. Used as a container for form areas, etc.

import { Form, Row, Col } from "react-bootstrap";

const Component = () => {
  <div className="block">
    <div className="block-header" role="tab">
      <h6 className="text-uppercase mb-0">Block header</h6>
    </div>
    <div className="block-body">
      <Form action="#">
        <Row>
          <Col md="6" className="mb-4">
            <Form.Label htmlFor="card-name">Name on Card</Form.Label>
            <Form.Control
              className="form-control"
              type="text"
              name="card-name"
              placeholder="Name on card"
              id="card-name"
            />
          </Col>
          <Col md="6" className="mb-4">
            <Form.Label htmlFor="card-number">Card Number</Form.Label>
            <Form.Control
              className="form-control"
              type="text"
              name="card-number"
              placeholder="Card number"
              id="card-number"
            />
          </Col>
        </Row>
      </Form>
    </div>
  </div>
}

export default Component

Cart

A responsive cart component used in cart overview or final order review. On smaller displays, items reposition for a mobile-friendly view.

Item
Price
Quantity
Total
...
Skull Tee
Size: Large
Colour: Green
Price per item
$65.00
Quantity
-
+
Total price
$130.00
...
Transparent Blouse
Size: Medium
Price per item
$55.00
Quantity
-
+
Total price
$55.00
...
White Tee
Size: Medium
Price per item
$55.00
Quantity
-
+
Total price
$55.00
import Cart from "./Cart";

const Component = () => {
    return(
        <Cart />
    )
}

export default Component
Category Top Bar

A simple component with items per page, items filter, ordering and no. of displayed items information. Displayed above the product grid.

Component supports filter prop, which enables products filter dropdown.

Showing 1-12 of 158 products
Sort by

import CategoryTopBar from '/CategoryTopBar'

const Component = () => {
    return (
        <CategoryTopBar />
    )
}

export default Component

Customer Sidebar

A custom navigation component used in the customer zone based on the Bootstrap's listgroup.

Use xl & lg prop to set large & extra large column sizes.

Customer Profile Image
Julie Lescaut

Ostrava, Czech Republic

import CustomerSidebar from "./CustomerSidebar";

const Component = () => {
    return(
        <CustomerSidebar lg="5" xl="4"/>
    )
}

export default Component
Icons

This theme comes with two icon packs and includes icon component for simple icon management.

70+ Premium E-commerce SVG icons

For a complete icon reference, see here.

Vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

These icons are mostly used in buttons or for social network links. For a complete icon reference, see here.

Images

This theme uses Next.js next/image component for image optimization.

It has many features, e.g., automatically creates srcsets for your images, serves WebP versions for your Jpegs, and lazy loads the images. For more information, check out next.js docs.

We developed <CustomImage /> component for usage with next export since, by default, static export won't work without using paid external loaders. Using this component, your static export will use normal <img /> element instead of Next.js <Image /> component.

Usage of <CustomImage /> component:

You can use the same props as the next/image component has.

import Image from './components/CustomImage'

export default () => {
  return (
    <Image
      src="/some/src.jpg"
      alt="..."
      width={1080}
      height={720}
      layout="intrinsic"
      className="img-fluid card-img-top"
  />
  )
}

To setup your project for static export, following configuration is needed.

next.config.js

{
  images: {
    deviceSizes: [320, 480, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    // loader: "imgix", // Uncoment this line
    // path: "", // Uncoment this line
  },
  env: {
    production_type: "server", // Change variable to "static"
  },
  // trailingSlash: true, // Uncoment this line
},

Product

Product component used in the product listing. Contains animated buttons appearing after hovering above the component.

Fresh
White Tee

Tops & blouses

White Tee

$32.00

Tops & blouses

Black blouse

$40.00

Tops & blouses

Short top

$89.00
import Product from "./Product";
import { Row, Col } from "react-bootstrap";

const Component = () => {
    return(
      <Row>
        {products.map((value, index) => (
          <Col sm="6" lg="4" xl="4" key={index}>
            <Product data={value} showQuickView />
          </Col>
        ))}
      </Row>
    )
}

export default Component
Product Modal

A component based on a Bootstrap modal with a product images carousel

import ModalQuickView from '../../ModalQuickView'

const Component = () => {
    const [quickView, setQuickView] = React.useState(false)
    return (
        <div>
            <button onClick={() => setQuickView(!quickView)}>Toggle product modal</button>
            <ModalQuickView isOpen={quickView} toggle={() => setQuickView()} product={product}/>
        </div>
    )
}

export default Component

RESPONSIVE COLLAPSE

Responsive collapse blocks with a toggler link. Used in the sidebar for collapsing the inactive menu blocks on smaller displays. Add .expand-lg to a .collapse block and it will expand on lg+ displays. This component is used on the sidebar blocks in the product categories.

React ID Swiper

Touch enabled React plugin that lets you create a beautiful responsive carousel sliders.

Used for the homepage carousel and for the brands carousels. You can use Swiper templates included in this template or import and customize on your own using docs for this plugin.

Visit plugin website

Brands Swiper
Brand 3
Brand 4
Brand 1
Brand 2
Brand 3
Brand 4
Brand 5
Brand 6
Brand 1
Brand 2
Brand 3
Brand 4
Brand 1
Brand 2
import { Swiper,  SwiperSlide } from 'swiper/react'
import { Pagination } from "swiper"
import brandsLogos from '/brands-logos.json'

const Component = () => {

    const params = {
        className: 'brands-slider pb-5',
        modules: [Pagination],
        slidesPerView: 4,
        spaceBetween: 15,
        loop: true,
        roundLengths: true,
        breakpoints: {
            1200: {
                slidesPerView: 5
            }
        }
    }
    
    return (
        <Swiper {...params}>
            {brandsLogos.map((brand, index) =>
                <SwiperSlide key={index} className="h-auto d-flex align-items-center justify-content-center">
                    <img
                        src={brand.img}
                        alt={brand.title}
                        className="img-fluid w-6rem opacity-7"
                    />
                </SwiperSlide>
            )}
        </Swiper>
    )
}

export default Component

React Maginifier

React plugin to enlarge images on touch, click, or mouseover. For a complete reference, see React Magnifier's docs.

Modern Jacket 1

import Magnifier from "react-magnifier"

const Component = () => {
    return (
        <Magnifier 
            mgShowOverflow={false} 
            mgWidth={2000} 
            mgHeight={2000} 
            className="img-fluid" 
            src="/image/src" 
            alt="image 
            description" 
            zoomFactor={.11} 
            style={{ cursor: 'pointer' }} 
        />
    )
}

export default Component

React Select

Varkala Theme uses React Select plugin for showing select input. You can customize it using props.

Visit plugin website

Most popular
Ribbon

Product component used in the product listing. Contains animated buttons appearing after hovering above the component.

Primary
Dark
Info
SERVICES BLOCK

Easily format main advantages or services in the services block. Columns in this block have a border on the right which disappears on smaller display sizes.

Free shipping & return

Free Shipping over $300

Money back guarantee

30 Days Money Back Guarantee

020-800-456-747

24/7 Available Support

Top Bar

Top bar element that precedes the navbar, as seen also on this page. Great to display telephone number, language or currency choice or similar.

Background image

Utility class that turns a <img className="bg-image"> into a background image for its background. Useful e.g. for carousels. Make sure that image's parent container and the content that should be placed over the image are relatively positioned.

I have a background image

Image overlay

Utility class that darkens or lightens the backround image of the element to enhance the legibility. It can be used with cards, carousel slides, etc. Now with responsive behaviour too.

Ladies

Ladies

Class reference

.dark-overlay or .light-overlay - CSS class to be used on the element, accepts Boostrap responsive suffixes. (e.g. .dark-overlay.dark-overlay-lg-0 creates overlay on smaller viewports and hides it on lg+ screens.)

.overlay-content - use this class on the element's content to increase its Z-index and move it above the overlay layer

Responsive borders

Responsive borders as an addition to Bootstrap's border utilities.

Class reference

.border-sm, .border-md, etc.

Block utilities

Additional utility classes, for block elements mostly.

Class reference

.bg-gray-100 to .bg-gray-900 - grayscale backgrounds

.bg-primary-light, .bg-secondary-light - lighter backgrounds for the theme colours

.opacity-1 to .opacity-9 - opacity helper

.hover-scale - scale element on hover

.hover-animate - move element up by few pixels on hover

.hover-scale-bg-image - scale element's background picture on hover

Text utilities

Additional utility classes, for block elements mostly.

Class reference

.text-gray-100 to .text-gray-900 - grayscale text colours

.text-sm, .text-lg, .text-xl - text sizes

.letter-spacing-1 to .letter-spacing-5 - letter spacing 0.1em to 0.5em

.z-index-1 to .z-index-5 - z-index from 10 to 50

.text-hover-primary, etc. - text colour on hover/focus for theme colours

.overflow-visible and .overflow-hidden - overflow control

Free shipping & return

Free Shipping over $300

Money back guarantee

30 Days Money Back Guarantee

020-800-456-747

24/7 Available Support

Sell.

Lorem ipsum dolor sit amet, consectetur adipisicing.

Daily Offers & Discounts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At itaque temporibus.

© 2021, Your company. All rights reserved.

  • ...
  • ...
  • ...
  • ...