Customize theme


Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">

Cartzilla component

Image zoom

JavaScript based component that adds "zoom on hover" functionality to images.

The image zoom is powered by Drift.js plugin. Ensure that you include links to the plugin's CSS and JavaScript files in your document.

CSS file is linked in the <head> section and above theme.min.css reference in your document:

<link rel="stylesheet" href="assets/vendor/drift-zoom/dist/drift-basic.min.css">

JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:

<script src="assets/vendor/drift-zoom/dist/Drift.min.js"></script>

You can apply any Drift.js option by specifying it within the data-zoom-options="{}" attribute in JSON format.

Usefull links:

External zoom pane

68 reviews

Apple iPhone 14 Plus 128GB

  • Model: 128GB
  • Color: Gray blue
  • Capacity: 128GB
<!-- External ZoomPane example -->
<div class="row align-items-md-center justify-content-center g-0">
  <div class="col-10 col-sm-6">
    <div class="ratio ratio-1x1">
      <img src="assets/img/shop/electronics/product/gallery/01.png" data-zoom="assets/img/shop/electronics/product/gallery/01.png" data-zoom-options='{
        "paneSelector": "#zoomPane",
        "hoverDelay": 300
      }' alt="Image">
  <div class="col-sm-6 col-lg-5">
    <div class="position-relative p-2" id="zoomPane">
      <div class="d-none d-md-flex align-items-center gap-2 text-decoration-none mb-3">
        <div class="d-flex gap-1 fs-sm">
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-filled text-warning"></i>
          <i class="ci-star-half text-warning"></i>
        <span class="text-body-tertiary fs-xs">68 reviews</span>
      <h2 class="h4">Apple iPhone 14 Plus 128GB</h4>
      <ul class="list-unstyled">
        <li class="form-label fw-semibold m-0">
          Model: <span class="text-body fw-normal" id="colorOption">128GB</span>
        <li class="form-label fw-semibold m-0">
          Color: <span class="text-body fw-normal" id="colorOption">Gray blue</span>
        <li class="form-label fw-semibold m-0">
          Capacity: <span class="text-body fw-normal" id="colorOption">128GB</span>
      <div class="h4 mb-4">$940.00</div>
      <button type="button" class="btn btn-lg btn-primary animate-slide-end order-sm-2 order-md-4 order-lg-2">
        <i class="ci-shopping-cart fs-lg animate-target me-2"></i>
        Add to cart

Inline zoom pane

<!-- Inline ZoomPane example -->
<div class="ratio ratio-1x1 overflow-hidden" style="max-width: 540px">
  <img src="assets/img/shop/grocery/product/02.png" data-zoom="assets/img/shop/grocery/product/02.png" data-zoom-options='{
    "inlinePane": true,
    "hoverDelay": 300
  }' alt="Image">
Top Customize