diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/variations.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/variations.blade.php
index fc0503039..63dd22d30 100755
--- a/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/variations.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/variations.blade.php
@@ -1,5 +1,6 @@
 @section('css')
     @parent
+
     <style>
         .table th.price, .table th.weight {
             width: 100px;
@@ -68,7 +69,7 @@
                 <div class="form-container">
 
                     <div v-for='(attribute, index) in super_attributes' class="control-group"
-                         :class="[errors.has('add-variant-form.' + attribute.code) ? 'has-error' : '']"
+                        :class="[errors.has('add-variant-form.' + attribute.code) ? 'has-error' : '']"
                     >
                         <label :for="attribute.code" class="required">@{{ attribute.admin_name
                             }}</label>
@@ -85,7 +86,7 @@
                             </option>
                         </select>
                         <span class="control-error"
-                              v-if="errors.has('add-variant-form.' + attribute.code)">@{{ errors.first('add-variant-form.' + attribute.code) }}</span>
+                            v-if="errors.has('add-variant-form.' + attribute.code)">@{{ errors.first('add-variant-form.' + attribute.code) }}</span>
                     </div>
 
                     <button type="submit" class="btn btn-lg btn-primary">
@@ -101,34 +102,31 @@
     <script type="text/x-template" id="variant-list-template">
         <div class="table" style="margin-top: 20px; overflow-x: auto;">
             <table>
-
                 <thead>
-                <tr>
-                    <th class="sku">{{ __('admin::app.catalog.products.sku') }}</th>
-                    <th>{{ __('admin::app.catalog.products.name') }}</th>
-                    <th>{{ __('admin::app.catalog.products.images') }}</th>
+                    <tr>
+                        <th class="is-default">{{ __('admin::app.catalog.products.is-default') }}</th>
+                        <th class="sku">{{ __('admin::app.catalog.products.sku') }}</th>
+                        <th>{{ __('admin::app.catalog.products.name') }}</th>
+                        <th>{{ __('admin::app.catalog.products.images') }}</th>
 
-                    @foreach ($product->super_attributes as $attribute)
-                        <th class="{{ $attribute->code }}"
-                            style="width: 150px">{{ $attribute->admin_name }}</th>
-                    @endforeach
+                        @foreach ($product->super_attributes as $attribute)
+                            <th class="{{ $attribute->code }}"
+                                style="width: 150px">{{ $attribute->admin_name }}</th>
+                        @endforeach
 
-                    <th class="qty">{{ __('admin::app.catalog.products.qty') }}</th>
-                    <th class="price">{{ __('admin::app.catalog.products.price') }}</th>
-                    <th class="weight">{{ __('admin::app.catalog.products.weight') }}</th>
-                    <th class="status">{{ __('admin::app.catalog.products.status') }}</th>
-                    <th class="actions"></th>
-                </tr>
+                        <th class="qty">{{ __('admin::app.catalog.products.qty') }}</th>
+                        <th class="price">{{ __('admin::app.catalog.products.price') }}</th>
+                        <th class="weight">{{ __('admin::app.catalog.products.weight') }}</th>
+                        <th class="status">{{ __('admin::app.catalog.products.status') }}</th>
+                        <th class="actions"></th>
+                    </tr>
                 </thead>
 
                 <tbody>
-
-                <variant-item v-for='(variant, index) in variants' :variant="variant" :key="index"
-                              :index="index"
-                              @onRemoveVariant="removeVariant($event)"></variant-item>
-
+                    <variant-item v-for='(variant, index) in variants' :key="index" :index="index"
+                        :variant="variant" @onRemoveVariant="removeVariant($event)">
+                    </variant-item>
                 </tbody>
-
             </table>
         </div>
     </script>
@@ -136,22 +134,32 @@
     <script type="text/x-template" id="variant-item-template">
         <tr>
             <td>
-                <div class="control-group"
-                     :class="[errors.has(variantInputName + '[sku]') ? 'has-error' : '']">
+                <div class="control-group">
+                    <span class="radio">
+                        <input type="radio" id="default_variant_id"
+                            name="default_variant_id" :value="variant.id"
+                            v-on:change="checkDefaultVariant(variant.id)" :checked="variant.id == default_variant_id">
+                        <label class="radio-view" :for="[variantInputName + '[default_variant_id]']"></label>
+                    </span>
+                </div>
+            </td>
+
+            <td>
+                <div class="control-group" :class="[errors.has(variantInputName + '[sku]') ? 'has-error' : '']">
                     <input type="text" v-validate="'required'" v-model="variant.sku"
-                           :name="[variantInputName + '[sku]']" class="control"
-                           data-vv-as="&quot;{{ __('admin::app.catalog.products.sku') }}&quot;"
-                           v-slugify/>
+                        :name="[variantInputName + '[sku]']" class="control"
+                        data-vv-as="&quot;{{ __('admin::app.catalog.products.sku') }}&quot;"
+                        v-slugify/>
                     <span class="control-error" v-if="errors.has(variantInputName + '[sku]')">@{{ errors.first(variantInputName + '[sku]') }}</span>
                 </div>
             </td>
 
             <td>
                 <div class="control-group"
-                     :class="[errors.has(variantInputName + '[name]') ? 'has-error' : '']">
+                    :class="[errors.has(variantInputName + '[name]') ? 'has-error' : '']">
                     <input type="text" v-validate="'required'" v-model="variant.name"
-                           :name="[variantInputName + '[name]']" class="control"
-                           data-vv-as="&quot;{{ __('admin::app.catalog.products.name') }}&quot;"/>
+                        :name="[variantInputName + '[name]']" class="control"
+                        data-vv-as="&quot;{{ __('admin::app.catalog.products.name') }}&quot;"/>
                     <span class="control-error" v-if="errors.has(variantInputName + '[name]')">@{{ errors.first(variantInputName + '[name]') }}</span>
                 </div>
             </td>
@@ -179,9 +187,9 @@
             <td v-for='(attribute, index) in superAttributes'>
                 <div class="control-group">
                     <input type="hidden" :name="[variantInputName + '[' + attribute.code + ']']"
-                           :value="variant[attribute.code]"/>
+                        :value="variant[attribute.code]"/>
                     <input type="text" class="control" :value="optionName(variant[attribute.code])"
-                           readonly/>
+                        readonly/>
                 </div>
             </td>
 
@@ -196,15 +204,15 @@
                         <ul>
                             <li v-for='(inventorySource, index) in inventorySources'>
                                 <div class="control-group"
-                                     :class="[errors.has(variantInputName + '[inventories][' + inventorySource.id + ']') ? 'has-error' : '']">
+                                    :class="[errors.has(variantInputName + '[inventories][' + inventorySource.id + ']') ? 'has-error' : '']">
                                     <label>@{{ inventorySource.name }}</label>
                                     <input type="text" v-validate="'numeric|min:0'"
-                                           :name="[variantInputName + '[inventories][' + inventorySource.id + ']']"
-                                           v-model="inventories[inventorySource.id]" class="control"
-                                           v-on:keyup="updateTotalQty()"
-                                           :data-vv-as="'&quot;' + inventorySource.name  + '&quot;'"/>
+                                        :name="[variantInputName + '[inventories][' + inventorySource.id + ']']"
+                                        v-model="inventories[inventorySource.id]" class="control"
+                                        v-on:keyup="updateTotalQty()"
+                                        :data-vv-as="'&quot;' + inventorySource.name  + '&quot;'"/>
                                     <span class="control-error"
-                                          v-if="errors.has(variantInputName + '[inventories][' + inventorySource.id + ']')">@{{ errors.first(variantInputName + '[inventories][' + inventorySource.id + ']') }}</span>
+                                        v-if="errors.has(variantInputName + '[inventories][' + inventorySource.id + ']')">@{{ errors.first(variantInputName + '[inventories][' + inventorySource.id + ']') }}</span>
                                 </div>
                             </li>
                         </ul>
@@ -214,22 +222,22 @@
 
             <td>
                 <div class="control-group"
-                     :class="[errors.has(variantInputName + '[price]') ? 'has-error' : '']">
+                    :class="[errors.has(variantInputName + '[price]') ? 'has-error' : '']">
                     <input type="number" v-validate="'required'" v-model="variant.price"
-                           :name="[variantInputName + '[price]']" class="control"
-                           data-vv-as="&quot;{{ __('admin::app.catalog.products.price') }}&quot;"
-                           step="any"/>
+                        :name="[variantInputName + '[price]']" class="control"
+                        data-vv-as="&quot;{{ __('admin::app.catalog.products.price') }}&quot;"
+                        step="any"/>
                     <span class="control-error" v-if="errors.has(variantInputName + '[price]')">@{{ errors.first(variantInputName + '[price]') }}</span>
                 </div>
             </td>
 
             <td>
                 <div class="control-group"
-                     :class="[errors.has(variantInputName + '[weight]') ? 'has-error' : '']">
+                    :class="[errors.has(variantInputName + '[weight]') ? 'has-error' : '']">
                     <input type="number" v-validate="'required'" v-model="variant.weight"
-                           :name="[variantInputName + '[weight]']" class="control"
-                           data-vv-as="&quot;{{ __('admin::app.catalog.products.weight') }}&quot;"
-                           step="any"/>
+                        :name="[variantInputName + '[weight]']" class="control"
+                        data-vv-as="&quot;{{ __('admin::app.catalog.products.weight') }}&quot;"
+                        step="any"/>
                     <span class="control-error" v-if="errors.has(variantInputName + '[weight]')">@{{ errors.first(variantInputName + '[weight]') }}</span>
                 </div>
             </td>
@@ -239,9 +247,9 @@
                     <select type="text" v-model="variant.status"
                             :name="[variantInputName + '[status]']" class="control">
                         <option value="1"
-                                :selected="variant.status">{{ __('admin::app.catalog.products.enabled') }}</option>
+                            :selected="variant.status">{{ __('admin::app.catalog.products.enabled') }}</option>
                         <option value="0"
-                                :selected="!variant.status">{{ __('admin::app.catalog.products.disabled') }}</option>
+                            :selected="!variant.status">{{ __('admin::app.catalog.products.disabled') }}</option>
                     </select>
                 </div>
             </td>
@@ -263,11 +271,10 @@
             ];
         });
 
-        var super_attributes = @json(app('\Webkul\Product\Repositories\ProductRepository')->getSuperAttributes($product));
-        var variants = @json($product->variants);
+        let super_attributes = @json(app('\Webkul\Product\Repositories\ProductRepository')->getSuperAttributes($product));
+        let variants = @json($product->variants);
 
         Vue.component('variant-form', {
-
             data: function () {
                 return {
                     variant: {},
@@ -285,18 +292,18 @@
                 addVariant: function (formScope) {
                     this.$validator.validateAll(formScope).then((result) => {
                         if (result) {
-                            var this_this = this;
+                            let self = this;
 
-                            var filteredVariants = variants.filter(function (variant) {
-                                var matchCount = 0;
+                            let filteredVariants = variants.filter(function (variant) {
+                                let matchCount = 0;
 
-                                for (var key in this_this.variant) {
-                                    if (variant[key] == this_this.variant[key]) {
+                                for (let key in self.variant) {
+                                    if (variant[key] == self.variant[key]) {
                                         matchCount++;
                                     }
                                 }
 
-                                return matchCount == this_this.super_attributes.length;
+                                return matchCount == self.super_attributes.length;
                             })
 
                             if (filteredVariants.length) {
@@ -309,9 +316,9 @@
 
                                 this.$root.addFlashMessages()
                             } else {
-                                var optionIds = [];
-                                for (var key in this_this.variant) {
-                                    optionIds.push(this_this.variant[key]);
+                                let optionIds = [];
+                                for (let key in self.variant) {
+                                    optionIds.push(self.variant[key]);
                                 }
 
                                 variants.push(Object.assign({
@@ -331,17 +338,16 @@
                 },
 
                 resetModel: function () {
-                    var this_this = this;
+                    let self = this;
 
                     this.super_attributes.forEach(function (attribute) {
-                        this_this.variant[attribute.code] = '';
+                        self.variant[attribute.code] = '';
                     })
                 }
             }
         });
 
         Vue.component('variant-list', {
-
             template: '#variant-list-template',
 
             inject: ['$validator'],
@@ -357,15 +363,15 @@
             },
 
             created: function () {
-                var index = 0;
+                let index = 0;
 
-                for (var key in this.old_variants) {
-                    var variant = this.old_variants[key];
+                for (let key in this.old_variants) {
+                    let variant = this.old_variants[key];
 
                     if (key.indexOf('variant_') !== -1) {
-                        var inventories = [];
+                        let inventories = [];
 
-                        for (var inventorySourceId in variant['inventories']) {
+                        for (let inventorySourceId in variant['inventories']) {
                             inventories.push({
                                 'qty': variant['inventories'][inventorySourceId],
                                 'inventory_source_id': inventorySourceId
@@ -376,13 +382,13 @@
 
                         variants.push(variant);
                     } else {
-                        for (var code in variant) {
+                        for (let code in variant) {
                             if (code != 'inventories') {
                                 variants[index][code] = variant[code];
                             } else {
                                 variants[index][code] = [];
 
-                                for (var inventorySourceId in variant[code]) {
+                                for (let inventorySourceId in variant[code]) {
                                     variants[index][code].push({
                                         'qty': variant[code][inventorySourceId],
                                         'inventory_source_id': inventorySourceId
@@ -403,11 +409,9 @@
                     this.variants.splice(index, 1)
                 },
             }
-
         });
 
         Vue.component('variant-item', {
-
             template: '#variant-item-template',
 
             props: ['index', 'variant'],
@@ -416,6 +420,7 @@
 
             data: function () {
                 return {
+                    default_variant_id: parseInt('{{ $product->additional['default_variant_id'] ?? null }}'),
                     inventorySources: @json($inventorySources),
                     inventories: {},
                     totalQty: 0,
@@ -429,25 +434,25 @@
             },
 
             created: function () {
-                var this_this = this;
+                let self = this;
 
                 this.inventorySources.forEach(function (inventorySource) {
-                    this_this.inventories[inventorySource.id] = this_this.sourceInventoryQty(inventorySource.id)
-                    this_this.totalQty += parseInt(this_this.inventories[inventorySource.id]);
+                    self.inventories[inventorySource.id] = self.sourceInventoryQty(inventorySource.id)
+                    self.totalQty += parseInt(self.inventories[inventorySource.id]);
                 })
             },
 
             mounted () {
-                var this_this = this;
+                let self = this;
 
-                this_this.variant.images.forEach(function(image) {
-                    this_this.items.push(image)
-                    this_this.imageCount++;
+                self.variant.images.forEach(function(image) {
+                    self.items.push(image)
+                    self.imageCount++;
 
                     if (image.id && image.url) {
-                        this_this.imageData.push(image.url);
+                        self.imageData.push(image.url);
                     } else if (image.id && image.file) {
-                        this_this.readFile(image.file);
+                        self.readFile(image.file);
                     }
                 });
             },
@@ -463,11 +468,15 @@
 
             methods: {
                 removeVariant: function () {
-                    this.$emit('onRemoveVariant', this.variant)
+                    this.$emit('onRemoveVariant', this.variant);
+                },
+
+                checkDefaultVariant: function (variantId) {
+                    this.default_variant_id = variantId;
                 },
 
                 optionName: function (optionId) {
-                    var optionName = '';
+                    let optionName = '';
 
                     this.superAttributes.forEach(function (attribute) {
                         attribute.options.forEach(function (option) {
@@ -484,7 +493,7 @@
                     if (!Array.isArray(this.variant.inventories))
                         return 0;
 
-                    var inventories = this.variant.inventories.filter(function (inventory) {
+                    let inventories = this.variant.inventories.filter(function (inventory) {
                         return inventorySourceId === parseInt(inventory.inventory_source_id);
                     })
 
@@ -497,13 +506,13 @@
                 updateTotalQty: function () {
                     this.totalQty = 0;
 
-                    for (var key in this.inventories) {
+                    for (let key in this.inventories) {
                         this.totalQty += parseInt(this.inventories[key]);
                     }
                 },
 
                 createFileType: function() {
-                    var this_this = this;
+                    let self = this;
 
                     this.imageCount++;
 
@@ -521,8 +530,8 @@
                 },
 
                 addImageView: function($event, index) {
-                    var ref = "imageInput" + index;
-                    var imageInput = this.$refs[ref][0];
+                    let ref = "imageInput" + index;
+                    let imageInput = this.$refs[ref][0];
 
                     if (imageInput.files && imageInput.files[0]) {
                         if (imageInput.files[0].type.includes('image/')) {
@@ -537,7 +546,7 @@
                 },
 
                 readFile: function(image, index) {
-                    var reader = new FileReader();
+                    let reader = new FileReader();
 
                     reader.onload = (e) => {
                         this.imageData.splice(index, 1, e.target.result);
diff --git a/packages/Webkul/Product/src/Database/Migrations/2021_06_17_103057_alter_products_table.php b/packages/Webkul/Product/src/Database/Migrations/2021_06_17_103057_alter_products_table.php
new file mode 100644
index 000000000..e4d622100
--- /dev/null
+++ b/packages/Webkul/Product/src/Database/Migrations/2021_06_17_103057_alter_products_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AlterProductsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->json('additional')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->dropColumn('additional');
+        });
+    }
+}
diff --git a/packages/Webkul/Product/src/Models/Product.php b/packages/Webkul/Product/src/Models/Product.php
index 05861dfc9..537024f5d 100755
--- a/packages/Webkul/Product/src/Models/Product.php
+++ b/packages/Webkul/Product/src/Models/Product.php
@@ -12,10 +12,14 @@ use Webkul\Attribute\Models\AttributeFamilyProxy;
 use Webkul\Inventory\Models\InventorySourceProxy;
 use Webkul\Attribute\Repositories\AttributeRepository;
 use Webkul\Product\Contracts\Product as ProductContract;
-use Webkul\CatalogRule\Models\CatalogRuleProductPriceProxy;
 
 class Product extends Model implements ProductContract
 {
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var $fillable
+     */
     protected $fillable = [
         'type',
         'attribute_family_id',
@@ -23,6 +27,20 @@ class Product extends Model implements ProductContract
         'parent_id',
     ];
 
+    /**
+     * The attributes that should be cast.
+     *
+     * @var $casts
+     */
+    protected $casts = [
+        'additional' => 'array'
+    ];
+
+    /**
+     * The type of product.
+     *
+     * @var $typeInstance
+     */
     protected $typeInstance;
 
     /**
@@ -412,11 +430,10 @@ class Product extends Model implements ProductContract
     }
 
     /**
-     * Overrides the default Eloquent query builder
+     * Overrides the default Eloquent query builder.
      *
-     * @param \Illuminate\Database\Eloquent\Builder $query
-     *
-     * @return \Illuminate\Database\Eloquent\Builder
+     * @param  \Illuminate\Database\Query\Builder  $query
+     * @return \Webkul\Product\Database\Eloquent\Builder
      */
     public function newEloquentBuilder($query)
     {
diff --git a/packages/Webkul/Product/src/Type/AbstractType.php b/packages/Webkul/Product/src/Type/AbstractType.php
index adb4f19e3..4f7aa17a5 100644
--- a/packages/Webkul/Product/src/Type/AbstractType.php
+++ b/packages/Webkul/Product/src/Type/AbstractType.php
@@ -67,7 +67,7 @@ abstract class AbstractType
     /**
      * Product instance
      *
-     * @var \Webkul\Product\Contracts\Product
+     * @var \Webkul\Product\Models\Product
      */
     protected $product;
 
diff --git a/packages/Webkul/Product/src/Type/Configurable.php b/packages/Webkul/Product/src/Type/Configurable.php
index b228ed344..f2d3d1f8c 100644
--- a/packages/Webkul/Product/src/Type/Configurable.php
+++ b/packages/Webkul/Product/src/Type/Configurable.php
@@ -66,6 +66,55 @@ class Configurable extends AbstractType
      */
     protected $productOptions = [];
 
+    /**
+     * Get default variant.
+     *
+     * @return \Webkul\Product\Models\Product
+     */
+    public function getDefaultVariant()
+    {
+        return $this->product->variants()->find($this->getDefaultVariantId());
+    }
+
+    /**
+     * Get default variant id.
+     *
+     * @return int
+     */
+    public function getDefaultVariantId()
+    {
+        return $this->product->additional['default_variant_id'] ?? null;
+    }
+
+    /**
+     * Set default variant id.
+     *
+     * @param  int  $defaultVariantId
+     * @return void
+     */
+    public function setDefaultVariantId($defaultVariantId)
+    {
+        $this->product->additional = array_merge($this->product->additional ?? [], [
+            'default_variant_id' => $defaultVariantId
+        ]);
+    }
+
+    /**
+     * Update default variant id if present in request.
+     *
+     * @return void
+     */
+    public function updateDefaultVariantId()
+    {
+        $defaultVariantId = request()->get('default_variant_id');
+
+        if ($defaultVariantId) {
+            $this->setDefaultVariantId($defaultVariantId);
+
+            $this->product->save();
+        }
+    }
+
     /**
      * Create configurable product.
      *
@@ -106,6 +155,9 @@ class Configurable extends AbstractType
     public function update(array $data, $id, $attribute = "id")
     {
         $product = parent::update($data, $id, $attribute);
+
+        $this->updateDefaultVariantId();
+
         $route = request()->route() ? request()->route()->getName() : '';
 
         if ($route != 'admin.catalog.products.massupdate') {
@@ -533,12 +585,16 @@ class Configurable extends AbstractType
      * Add product. Returns error message if can't prepare product.
      *
      * @param  array  $data
-     * @return array
+     * @return array|string
      */
     public function prepareForCart($data)
     {
         if (! isset($data['selected_configurable_option']) || ! $data['selected_configurable_option']) {
-            return trans('shop::app.checkout.cart.integrity.missing_options');
+            if ($this->getDefaultVariantId()) {
+                $data['selected_configurable_option'] = $this->getDefaultVariantId();
+            } else {
+                return trans('shop::app.checkout.cart.integrity.missing_options');
+            }
         }
 
         $data = $this->getQtyRequest($data);
@@ -670,8 +726,7 @@ class Configurable extends AbstractType
     /**
      * Validate cart item product price.
      *
-     * @param \Webkul\Product\Type\CartItem $item
-     *
+     * @param  \Webkul\Product\Type\CartItem  $item
      * @return \Webkul\Product\Datatypes\CartItemValidationResult
      */
     public function validateCartItem(CartItemModel $item): CartItemValidationResult
@@ -704,8 +759,7 @@ class Configurable extends AbstractType
     /**
      * Get product options.
      *
-     * @param string $product
-     *
+     * @param  string  $product
      * @return array
      */
     public function getProductOptions($product = "")
diff --git a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
index a0749c09c..e971ef29c 100755
--- a/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/products/view/configurable-options.blade.php
@@ -28,7 +28,11 @@
                             :id="['attribute_' + attribute.id]"
                             :data-vv-as="'&quot;' + attribute.label + '&quot;'">
 
-                            <option v-for='(option, index) in attribute.options' :value="option.id">@{{ option.label }}</option>
+                            <option
+                                v-for='(option, index) in attribute.options' :value="option.id"
+                                :selected="index == attribute.selectedIndex">
+                                @{{ option.label }}
+                            </option>
 
                         </select>
                     </span>
@@ -46,7 +50,8 @@
                                 :id="['attribute_' + attribute.id + '_option_' + option.id]"
                                 :value="option.id"
                                 :data-vv-as="'&quot;' + attribute.label + '&quot;'"
-                                @change="configure(attribute, $event.target.value)"/>
+                                @change="configure(attribute, $event.target.value)"
+                                :checked="index == attribute.selectedIndex"/>
 
                             <span v-if="attribute.swatch_type == 'color'" :style="{ background: option.swatch_value }"></span>
 
@@ -69,18 +74,22 @@
             </div>
         </script>
 
-        <?php $config = $configurableOptionHelper->getConfigurationConfig($product) ?>
+        @php
+            $defaultVariant = $product->getTypeInstance()->getDefaultVariant();
+            $config = $configurableOptionHelper->getConfigurationConfig($product);
+        @endphp
 
         <script>
 
             Vue.component('product-options', {
-
                 template: '#product-options-template',
 
                 inject: ['$validator'],
 
                 data: function() {
                     return {
+                        defaultVariant: @json($defaultVariant),
+
                         config: @json($config),
 
                         childAttributes: [],
@@ -89,40 +98,56 @@
 
                         simpleProduct: null,
 
-                        galleryImages: []
+                        galleryImages: [],
                     }
                 },
 
-                created: function() {
-                    var config = @json($config);
+                mounted: function() {
+                    this.init();
 
-                    var childAttributes = this.childAttributes,
-                        attributes = config.attributes.slice(),
-                        index = attributes.length,
-                        attribute;
-
-                    while (index--) {
-                        attribute = attributes[index];
-
-                        attribute.options = [];
-
-                        if (index) {
-                            attribute.disabled = true;
-                        } else {
-                            this.fillSelect(attribute);
-                        }
-
-                        attribute = Object.assign(attribute, {
-                            childAttributes: childAttributes.slice(),
-                            prevAttribute: attributes[index - 1],
-                            nextAttribute: attributes[index + 1]
-                        });
-
-                        childAttributes.unshift(attribute);
-                    }
+                    this.initDefaultSelection();
                 },
 
                 methods: {
+                    init: function () {
+                        let config = @json($config);
+
+                        let childAttributes = this.childAttributes,
+                            attributes = config.attributes.slice(),
+                            index = attributes.length,
+                            attribute;
+
+                        while (index--) {
+                            attribute = attributes[index];
+
+                            attribute.options = [];
+
+                            if (index) {
+                                attribute.disabled = true;
+                            } else {
+                                this.fillSelect(attribute);
+                            }
+
+                            attribute = Object.assign(attribute, {
+                                childAttributes: childAttributes.slice(),
+                                prevAttribute: attributes[index - 1],
+                                nextAttribute: attributes[index + 1]
+                            });
+
+                            childAttributes.unshift(attribute);
+                        }
+                    },
+
+                    initDefaultSelection: function() {
+                        if (this.defaultVariant) {
+                            this.childAttributes.forEach((attribute) => {
+                                let attributeValue = this.defaultVariant[attribute.code];
+
+                                this.configure(attribute, attributeValue);
+                            });
+                        }
+                    },
+
                     configure: function(attribute, value) {
                         this.simpleProduct = this.getSelectedProductId(attribute, value);
 
@@ -152,7 +177,7 @@
                     },
 
                     getSelectedIndex: function(attribute, value) {
-                        var selectedIndex = 0;
+                        let selectedIndex = 0;
 
                         attribute.options.forEach(function(option, index) {
                             if (option.id == value) {
@@ -164,7 +189,7 @@
                     },
 
                     getSelectedProductId: function(attribute, value) {
-                        var options = attribute.options,
+                        let options = attribute.options,
                             matchedOptions;
 
                         matchedOptions = options.filter(function (option) {
@@ -179,7 +204,7 @@
                     },
 
                     fillSelect: function(attribute) {
-                        var options = this.getAttributeOptions(attribute.id),
+                        let options = this.getAttributeOptions(attribute.id),
                             prevOption,
                             index = 1,
                             allowedProducts,
@@ -233,15 +258,15 @@
                             return;
 
                         if (! attribute.swatch_type || attribute.swatch_type == '' || attribute.swatch_type == 'dropdown') {
-                            var element = document.getElementById("attribute_" + attribute.id);
+                            let element = document.getElementById("attribute_" + attribute.id);
 
                             if (element) {
                                 element.selectedIndex = "0";
                             }
                         } else {
-                            var elements = document.getElementsByName('super_attribute[' + attribute.id + ']');
+                            let elements = document.getElementsByName('super_attribute[' + attribute.id + ']');
 
-                            var this_this = this;
+                            let self = this;
 
                             elements.forEach(function(element) {
                                 element.checked = false;
@@ -250,7 +275,7 @@
                     },
 
                     getAttributeOptions: function (attributeId) {
-                        var this_this = this,
+                        let self = this,
                             options;
 
                         this.config.attributes.forEach(function(attribute, index) {
@@ -263,7 +288,7 @@
                     },
 
                     reloadPrice: function () {
-                        var selectedOptionCount = 0;
+                        let selectedOptionCount = 0;
 
                         this.childAttributes.forEach(function(attribute) {
                             if (attribute.selectedIndex) {
@@ -271,9 +296,9 @@
                             }
                         });
 
-                        var priceLabelElement = document.querySelector('.price-label');
-                        var priceElement = document.querySelector('.final-price');
-                        var regularPriceElement = document.querySelector('.regular-price');
+                        let priceLabelElement = document.querySelector('.price-label');
+                        let priceElement = document.querySelector('.final-price');
+                        let regularPriceElement = document.querySelector('.regular-price');
 
                         if (this.childAttributes.length == selectedOptionCount) {
                             priceLabelElement.style.display = 'none';
@@ -313,7 +338,7 @@
                     },
 
                     changeStock: function (productId) {
-                        var inStockElement = document.querySelector('.stock-status');
+                        let inStockElement = document.querySelector('.stock-status');
 
                         if (productId) {
                             inStockElement.style.display= "block";
@@ -322,7 +347,6 @@
                         }
                     },
                 }
-
             });
 
         </script>
diff --git a/packages/Webkul/Ui/publishable/assets/css/ui.css b/packages/Webkul/Ui/publishable/assets/css/ui.css
index 9987853ab..4df7f9d9b 100644
--- a/packages/Webkul/Ui/publishable/assets/css/ui.css
+++ b/packages/Webkul/Ui/publishable/assets/css/ui.css
@@ -1 +1 @@
-.active .cms-icon,.active.configuration-icon,.catalog-icon,.cms-icon,.configuration-icon,.customer-icon,.dashboard-icon,.promotion-icon,.sales-icon,.settings-icon{width:48px;height:48px;display:inline-block;background-size:cover}.icon{display:inline-block;background-size:cover}.dashboard-icon{background-image:url(../images/Icon-Dashboard.svg)}.sales-icon{background-image:url(../images/Icon-Sales.svg)}.catalog-icon{background-image:url(../images/Icon-Catalog.svg)}.customer-icon{background-image:url(../images/Icon-Customers.svg)}.configuration-icon{background-image:url(../images/Icon-Configure.svg)}.settings-icon{background-image:url(../images/Icon-Settings.svg)}.promotion-icon{background-image:url(../images/icon-promotion.svg)}.cms-icon{background-image:url(../images/Icon-CMS.svg)}.angle-right-icon{background-image:url(../images/Angle-Right.svg);width:17px;height:17px}.angle-left-icon{background-image:url(../images/Angle-Left.svg);width:17px;height:17px}.arrow-down-icon{background-image:url(../images/Arrow-Down-Light.svg);width:14px;height:8px}.arrow-right-icon{background-image:url(../images/Arrow-Right.svg);width:18px;height:18px}.white-cross-sm-icon{background-image:url(../images/Icon-Sm-Cross-White.svg);width:18px;height:18px}.accordian-up-icon{background-image:url(../images/Accordion-Arrow-Up.svg);width:24px;height:24px}.accordian-down-icon{background-image:url(../images/Accordion-Arrow-Down.svg);width:24px;height:24px}.accordian-left-icon{background-image:url(../images/chevron-left.svg);width:24px;height:24px}.accordian-right-icon{background-image:url(../images/chevron-right.png);width:24px;height:24px}.cross-icon{background-image:url(../images/Icon-Crossed.svg);width:18px;height:18px}.trash-icon{background-image:url(../images/Icon-Trash.svg);width:24px;height:24px}.remove-icon{background-image:url(../images/Icon-remove.svg);width:24px;height:24px}.pencil-lg-icon{background-image:url(../images/Icon-Pencil-Large.svg);width:24px;height:24px}.eye-icon{background-image:url(../images/Icon-eye.svg);width:24px;height:24px}.search-icon{background-image:url(../images/icon-search.svg);width:24px;height:24px}.sortable-icon{background-image:url(../images/Icon-Sortable.svg);width:24px;height:24px}.sort-down-icon,.sort-up-icon{background-image:url(../images/Icon-Sort-Down.svg);width:18px;height:18px}.sort-up-icon{transform:rotate(180deg)}.primary-back-icon{background-image:url(../images/Icon-Back-Primary.svg);width:24px;height:24px}.checkbox-dash-icon{background-image:url(../images/Checkbox-Dash.svg);width:24px;height:24px}.account-icon{background-image:url(../images/icon-account.svg);width:24px;height:24px}.expand-icon{background-image:url(../images/Expand-Light.svg);width:18px;height:18px}.expand-on-icon{background-image:url(../images/Expand-Light-On.svg);width:18px;height:18px}.dark-left-icon{background-image:url(../images/arrow-left-dark.svg);width:18px;height:18px}.light-right-icon{background-image:url(../images/arrow-right-light.svg);width:18px;height:18px}.folder-icon{background-image:url(../images/Folder-Icon.svg);width:24px;height:24px}.star-icon{background-image:url(../images/Star-Icon.svg);width:24px;height:24px}.star-icon-blank{background-image:url(../images/Star-Icon-Blank.svg);width:24px;height:24px}.arrow-down-white-icon{background-image:url(../images/down-arrow-white.svg);width:17px;height:13px}.arrow-up-white-icon{background-image:url(../images/up-arrow-white.svg);width:17px;height:13px}.profile-pic-icon{background-image:url(../images/Profile-Pic.svg);width:60px;height:60px}.graph-up-icon{background-image:url(../images/Icon-Graph-Green.svg);width:24px;height:24px}.graph-down-icon{background-image:url(../images/Icon-Graph-Red.svg);width:24px;height:24px}.no-result-icon{background-image:url(../images/limited-icon.svg);width:52px;height:47px}.note-icon{background-image:url(../images/icon-note.svg)}.list-icon,.note-icon{width:24px;height:24px}.list-icon{background-image:url(../images/Icon-Listing.svg)}.copy-icon{background-image:url(../images/copy-icon.png);width:24px;height:24px}.active .dashboard-icon{background-image:url(../images/Icon-Dashboard-Active.svg)}.active .sales-icon{background-image:url(../images/Icon-Sales-Active.svg)}.active .catalog-icon{background-image:url(../images/Icon-Catalog-Active.svg)}.active .customer-icon{background-image:url(../images/Icon-Customers-Active.svg)}.active .settings-icon{background-image:url(../images/Icon-Settings-Active.svg)}.active .configuration-icon{background-image:url(../images/Icon-Configure-Active.svg)}.active .promotion-icon{background-image:url(../images/icon-promotion-active.svg)}.active .cms-icon{background-image:url(../images/Icon-CMS-Active.svg)}.active>.arrow-down-icon{background-image:url(../images/Arrow-Down.svg);width:14px;height:8px}.active>.expand-icon{background-image:url(../images/Expand-Light-On.svg)}.active.dashboard-icon{background-image:url(../images/Icon-Dashboard-Active.svg)}.active.customer-icon{background-image:url(../images/Icon-Customers-Active.svg)}.active.sales-icon{background-image:url(../images/Icon-Sales-Active.svg)}.active.settings-icon{background-image:url(../images/Icon-Settings-Active.svg)}.active.configuration-icon{background-image:url(../images/Icon-Configure-Active.svg)}.active.arrow-down-icon{background-image:url(../images/Arrow-Down.svg);width:14px;height:8px}.active.expand-icon{background-image:url(../images/Expand-Light-On.svg)}.icon-404{background-image:url(../images/404-image.svg);width:255px;height:255px}.export-icon{background-image:url(../images/Icon-Export.svg);width:32px;height:32px}.import-icon{background-image:url(../images/Icon-Import.svg);width:32px;height:32px}.star-blue-icon{width:17px;height:17px;background-image:url(../images/Icon-star.svg)}.camera-icon{background-image:url(../images/Camera.svg);width:24px;height:24px}@-webkit-keyframes jelly{0%{transform:translateY(0) scale(.7);opacity:0}70%{transform:translateY(5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@keyframes jelly{0%{transform:translateY(0) scale(.7);opacity:0}70%{transform:translateY(5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@-webkit-keyframes jelly-out{0%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(.7);opacity:0}}@keyframes jelly-out{0%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(.7);opacity:0}}.grid-container{display:block;width:100%}.datagrid-filters{display:inline-flex;width:100%;justify-content:space-between;align-items:center;margin-bottom:20px}.datagrid-filters .filter-left{float:left}.datagrid-filters .filter-right{float:right}.datagrid-filters .dropdown-filters{display:inline-block}.datagrid-filters .dropdown-filters.per-page{margin-right:10px}.datagrid-filters .dropdown-filters.per-page .control-group label{width:auto;float:left;margin-top:7px;margin-right:10px}.datagrid-filters .dropdown-filters.per-page .control-group .control{width:auto;margin:0}@media only screen and (max-width:1192px){.datagrid-filters{flex-direction:column;margin-bottom:unset}.datagrid-filters .filter-left,.datagrid-filters .filter-right{margin-bottom:10px}}@media only screen and (max-width:720px){.datagrid-filters .dropdown-filters{margin-bottom:5px}}.filtered-tags{display:inline-flex;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}.search-filter .control{font-size:15px;border:2px solid #c7c7c7;border-right:none;border-top-left-radius:3px;border-bottom-left-radius:3px;height:36px;width:280px;padding-left:10px;-webkit-appearance:none}.search-filter .contorl:focus{border-color:#0041ff}.search-filter .icon-wrapper{border:2px solid #c7c7c7;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0;height:36px;width:36px;padding:3px;float:right}@media only screen and (max-width:720px){.search-filter .control{width:100px}}.grid-dropdown-header{display:inline-flex;justify-content:space-between;align-items:center;height:36px;width:200px;border:2px solid #c7c7c7;border-radius:3px;color:#8e8e8e;padding:0 5px}.grid-dropdown-header .arrow-icon-down{float:right}.dropdown-list.dropdown-container{padding:15px;width:100%;top:43px}.dropdown-list.dropdown-container ul li .control-group{margin-bottom:15px}.dropdown-list.dropdown-container .apply-filter{padding:10px;width:100%}.filter-tag{justify-content:space-between;margin-right:20px}.filter-tag,.filter-tag .wrapper{display:flex;flex-direction:row;align-items:center;font-size:14px;height:40px;border-radius:2px}.filter-tag .wrapper{margin-left:10px;padding:5px 10px;background:#e7e7e7;color:#000311;letter-spacing:-.22px}.filter-tag .wrapper .icon.cross-icon{margin-left:10px;cursor:pointer}.rtl .search-filter .control{padding-right:10px;border-left:0;border-right:2px solid #c7c7c7;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.rtl .search-filter .icon-wrapper{float:left;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.rtl .dropdown-filters{display:inline-block}.rtl .dropdown-filters.per-page{margin-left:10px;margin-right:10px}.rtl .filtered-tags .filter-tag .cross-icon,.rtl .filtered-tags .filter-tag .wrapper{margin-right:10px;margin-left:0}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus{outline:none}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-25{margin-bottom:25px}.mb-30{margin-bottom:30px}.mb-35{margin-bottom:35px}.mb-40{margin-bottom:40px}.mb-45{margin-bottom:45px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}.mb-70{margin-bottom:70px}.mb-80{margin-bottom:80px}.mb-90{margin-bottom:90px}.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-45{margin-top:45px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-70{margin-top:70px}.mt-80{margin-top:80px}.mt-90{margin-top:90px}body{letter-spacing:-.26px;line-height:19px}a:active,a:focus,a:hover,a:link,a:visited{text-decoration:none;color:#0041ff}::-moz-selection{background-color:rgba(0,64,255,.6);color:#fff}::selection{background-color:rgba(0,64,255,.6);color:#fff}textarea{resize:none}ul{margin:0;padding:0;list-style:none}h1{font-size:28px;margin-top:0}h1,h2{color:#3a3a3a}h2{font-size:24px}h3{font-size:20px}h3,h4{color:#3a3a3a}h4{font-size:16px}h5{font-size:12px;color:#3a3a3a}.hide{display:none!important}.row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.btn{box-shadow:0 1px 4px 0 rgba(0,0,0,.2),0 0 8px 0 rgba(0,0,0,.1);border-radius:3px;border:none;color:#fff;cursor:pointer;transition:.2s cubic-bezier(.4,0,.2,1);font:inherit;display:inline-block}.btn:active,.btn:focus,.btn:hover{opacity:.75;border:none}.btn.btn-sm{padding:6px 12px}.btn.btn-md{padding:8px 16px}.btn.btn-lg{padding:10px 20px}.btn.btn-xl{padding:12px 24px;font-size:16px}.btn.btn-primary{background:#0041ff;color:#fff}.btn.btn-black{background:#000;color:#fff}.btn.btn-white{background:#fff;color:#000}.btn:disabled,.btn[disabled=disabled],.btn[disabled=disabled]:active,.btn[disabled=disabled]:hover{cursor:not-allowed;background:#b1b1ae;box-shadow:none;opacity:1}.dropdown-btn{min-width:150px;text-align:left;background:#fff;border:2px solid #c7c7c7;border-radius:3px;font-size:14px;padding:8px 35px 8px 10px;cursor:pointer;position:relative}.dropdown-btn:active,.dropdown-btn:focus,.dropdown-btn:hover{opacity:.75;border:2px solid #c7c7c7}.dropdown-btn .icon{position:absolute;right:10px;top:50%;margin-top:-4px}.dropdown-toggle{cursor:pointer}.dropdown-open{position:relative}.dropdown-list{width:200px;margin-bottom:20px;box-shadow:0 2px 4px 0 rgba(0,0,0,.16),0 0 9px 0 rgba(0,0,0,.16);border-radius:3px;background-color:#fff;position:absolute;display:none;z-index:10;text-align:left}.dropdown-list.bottom-left{top:42px;left:0}.dropdown-list.bottom-right{top:42px;right:0}.dropdown-list.top-left{bottom:0;left:42px}.dropdown-list.top-right{bottom:0;right:42px}.dropdown-list .search-box{padding:20px;border-bottom:1px solid #e8e8e8}.dropdown-list .search-box .control{background:#fff;border:2px solid #c7c7c7;border-radius:3px;width:100%;height:36px;display:inline-block;vertical-align:middle;transition:.2s cubic-bezier(.4,0,.2,1);padding:0 10px;font-size:15px}.dropdown-list .search-box .control:focus{border-color:#0041ff}.dropdown-list .dropdown-container{padding:20px;overflow-y:auto}.dropdown-list .dropdown-container label{font-size:15px;display:inline-block;text-transform:uppercase;color:#9e9e9e;font-weight:700;padding-bottom:5px}.dropdown-list .dropdown-container ul{margin:0;list-style-type:none;padding:0}.dropdown-list .dropdown-container ul li{padding:5px 0}.dropdown-list .dropdown-container ul li a:active,.dropdown-list .dropdown-container ul li a:focus,.dropdown-list .dropdown-container ul li a:link,.dropdown-list .dropdown-container ul li a:visited{color:#3a3a3a;display:block}.dropdown-list .dropdown-container ul li a:hover{color:#0041ff}.dropdown-list .dropdown-container ul li .checkbox{margin:0}.dropdown-list .dropdown-container ul li .control-group label{color:#3a3a3a;font-size:15px;font-weight:500;text-transform:capitalize;width:100%}.dropdown-list .dropdown-container .btn{width:100%;margin-top:10px}.section .secton-title{font-size:18px;color:#3a3a3a;padding:15px 0;border-bottom:1px solid #e8e8e8}.section .section-content{display:block;padding:20px 0}.section .section-content .row{display:block;padding:7px 0}.section .section-content .row .title{width:200px}.section .section-content .row .title,.section .section-content .row .value{color:#3a3a3a;letter-spacing:-.26px;display:inline-block}.table{width:100%}.table table{border-collapse:collapse;text-align:left;width:100%}.table table thead th{font-weight:700;padding:12px 10px;background:#f8f9fa;color:#3a3a3a}.table table tbody td{padding:10px;border-bottom:1px solid #d3d3d3;color:#3a3a3a;vertical-align:top}.table table tbody td.actions .action{display:inline-flex}.table table tbody td.actions .icon{cursor:pointer;vertical-align:middle}.table table tbody td.empty{text-align:center}.table table tbody tr:last-child td{border-bottom:none}.table .control-group{width:100%;margin-bottom:0;min-width:140px}.table .control-group .control{width:100%;margin:0}.pagination .page-item{background:#fff;border:2px solid #c7c7c7;border-radius:3px;padding:7px 14px;margin-right:5px;font-size:16px;display:inline-block;color:#3a3a3a;vertical-align:middle;text-decoration:none}.pagination .page-item.next,.pagination .page-item.previous{padding:6px 9px}.pagination .page-item.active{background:#0041ff;color:#fff;border-color:#0041ff}.pagination .page-item .icon{vertical-align:middle;margin-bottom:3px}.checkbox{position:relative;display:block}.checkbox input{left:0;opacity:0;position:absolute;top:0;height:24px;width:24px;z-index:100}.checkbox .checkbox-view{background-image:url(../images/Checkbox.svg);height:24px;width:24px;display:inline-block!important;vertical-align:middle;margin:0 5px 0 0}.checkbox input:checked+.checkbox-view{background-image:url(../images/Checkbox-Checked.svg)}.checkbox input:disabled+.checkbox-view{opacity:.5;cursor:not-allowed}.radio{position:relative;display:block;margin:10px 5px 5px 0}.radio input{left:0;opacity:0;position:absolute;top:0;z-index:100}.radio .radio-view{background-image:url(../images/controls.svg);background-position:-21px 0;height:20px;width:20px;display:inline-block!important;vertical-align:middle;margin:0 5px 0 0}.radio input:checked+.radio-view{background-position:-21px -21px}.radio input:disabled+.radio-view{opacity:.5;cursor:not-allowed}.control-group{margin-bottom:25px;font-size:15px;width:750px;max-width:100%;position:relative}.control-group,.control-group label{display:block;color:#3a3a3a}.control-group label.required:after{content:"*";color:#fc6868;font-weight:700;display:inline-block}.control-group textarea.control{height:100px;padding:10px}.control-group .control{background:#fff;border:2px solid #c7c7c7;border-radius:3px;width:70%;height:36px;display:inline-block;vertical-align:middle;transition:.2s cubic-bezier(.4,0,.2,1);padding:0 10px;font-size:15px;margin-top:10px;margin-bottom:5px}.control-group .control:focus{border-color:#0041ff}.control-group .control[disabled=disabled]{border-color:#d3d3d3;background-color:#d3d3d3;cursor:not-allowed}.control-group .control[multiple]{height:100px}.control-group.date .control,.control-group.datetime .control{padding-right:40px}.control-group.date:after,.control-group.datetime:after{background-image:url(../images/Icon-Calendar.svg);width:24px;height:24px;content:"";display:inline-block;vertical-align:middle;margin-left:-34px;pointer-events:none;position:absolute;left:70%;top:50%}.control-group.date .cross-icon,.control-group.datetime .cross-icon{position:absolute;cursor:pointer;margin-left:-54px;top:38px}.control-group .control-info{display:block;font-size:14px;color:#6f6f6f;font-style:italic}.control-group .control-error{display:none;color:#fc6868;margin-top:5px}.control-group.has-error .control{border-color:#fc6868}.control-group.has-error .control-error{display:block}.control-group.has-error.date:after{margin-top:-12px}.control-group.price .currency-code{vertical-align:middle;display:inline-block}.table .control-group.date:after,.table .control-group.datetime:after{top:6px;left:100%}.table .control-group.has-error.date.date:after,.table .control-group.has-error.date.datetime:after{top:18px}.rtl .control-group.date .control,.rtl .control-group.datetime .control{padding-left:40px;padding-right:10px}.rtl .control-group.date:after,.rtl .control-group.datetime:after{margin-right:-34px;right:70%}.rtl .control-group.date .cross-icon,.rtl .control-group.datetime .cross-icon{margin-right:-54px;top:38px}.rtl .table .control-group.date:after,.rtl .table .control-group.datetime:after{right:unset!important;left:auto}.control-group .switch{position:relative;display:inline-block;width:60px;height:34px;margin-top:10px;margin-bottom:5px}.control-group .switch input{opacity:0;width:0;height:0}.control-group .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#8e8e8e;transition:.2s}.control-group .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.2s}.control-group input:checked+.slider{background-color:#0041ff}.control-group input:focus+.slider{box-shadow:0 0 1px #0041ff}.control-group input:checked+.slider:before{transform:translateX(26px)}.control-group .slider.round{border-radius:34px}.control-group .slider.round:before{border-radius:50%}.button-group{margin-top:20px;margin-bottom:20px}.alert-wrapper{width:300px;top:10px;right:10px;position:fixed;z-index:100;text-align:left}.alert-wrapper .alert{width:300px;padding:15px;border-radius:3px;display:inline-block;box-shadow:0 4px 15.36px .64px rgba(0,0,0,.1),0 2px 6px 0 rgba(0,0,0,.12);position:relative;-webkit-animation:jelly .5s ease-in-out;animation:jelly .5s ease-in-out;transform-origin:center top;z-index:500;margin-bottom:10px}.alert-wrapper .alert.alert-error{background:#fc6868}.alert-wrapper .alert.alert-info{background:#204d74}.alert-wrapper .alert.alert-success{background:#4caf50}.alert-wrapper .alert.alert-warning{background:#ffc107}.alert-wrapper .alert .icon{position:absolute;right:10px;top:10px;cursor:pointer}.alert-wrapper .alert p{color:#fff;margin:0;padding:0;font-size:15px}.tabs ul{border-bottom:1px solid #e8e8e8}.tabs ul li{display:inline-block}.tabs ul li a{padding:15px 20px;cursor:pointer;margin:0 2px;text-align:center;color:#000311;display:block}.tabs ul li.active a{border-bottom:3px solid #0041ff}.accordian,accordian{display:inline-block;width:100%}.accordian .accordian-header,.accordian div[slot*=header],accordian .accordian-header,accordian div[slot*=header]{width:100%;display:inline-block;font-size:18px;color:#3a3a3a;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;padding:20px 15px;cursor:pointer;margin-top:-1px}.accordian .accordian-header .expand-icon,.accordian div[slot*=header] .expand-icon,accordian .accordian-header .expand-icon,accordian div[slot*=header] .expand-icon{background-image:url(../images/Expand-Light.svg);margin-right:10px;margin-top:3px}.accordian .accordian-header h1,.accordian div[slot*=header] h1,accordian .accordian-header h1,accordian div[slot*=header] h1{margin:0;font-size:20px;font-weight:500;display:inline-block}.accordian .accordian-header .icon,.accordian div[slot*=header] .icon,accordian .accordian-header .icon,accordian div[slot*=header] .icon{float:right}.accordian .accordian-header .icon.left,.accordian div[slot*=header] .icon.left,accordian .accordian-header .icon.left,accordian div[slot*=header] .icon.left{float:left}.accordian.error .accordian-header,accordian.error .accordian-header{color:#ff5656}.accordian .accordian-content,.accordian div[slot*=body],accordian .accordian-content,accordian div[slot*=body]{width:100%;padding:20px 15px;display:none;transition:all .3s ease}.accordian.active>.accordian-content,accordian.active>.accordian-content{display:inline-block}.accordian.active>.accordian-header .expand-icon,accordian.active>.accordian-header .expand-icon{background-image:url(../images/Expand-Light-On.svg)}.tree-container .tree-item{padding-left:30px;display:inline-block;margin-top:10px;width:100%}.tree-container .tree-item>.tree-item{display:none}.tree-container .tree-item.active>.tree-item{display:inline-block}.tree-container .tree-item .checkbox,.tree-container .tree-item .radio{margin:0;display:inline-block}.tree-container .tree-item .expand-icon{display:inline-block;margin-right:10px;cursor:pointer;background-image:url(../images/Expand-Light.svg);width:18px;height:18px;vertical-align:middle}.tree-container .tree-item .folder-icon{vertical-align:middle;margin-right:10px}.tree-container .tree-item.active>.expand-icon{background-image:url(../images/Expand-Light-On.svg)}.tree-container>.tree-item{padding-left:0}.panel{box-shadow:0 2px 25px 0 rgba(0,0,0,.15);border-radius:5px;background:#fff}.panel .panel-content{padding:20px}modal{display:none}.modal-open{overflow:hidden}.modal-overlay{display:none;overflow-y:auto;z-index:10;top:0;right:0;bottom:0;left:0;position:fixed;background:#000;opacity:.7}.modal-open .modal-overlay{display:block}.modal-container{background:#fff;top:100px;width:600px;max-width:80%;left:50%;margin-left:-300px;position:fixed;z-index:11;box-shadow:0 15px 25px 0 rgba(0,0,0,.03),0 20px 45px 5px rgba(0,0,0,.2);-webkit-animation:fade-in-white .3s ease-in-out;animation:fade-in-white .3s ease-in-out;-webkit-animation:jelly .5s ease-in-out;animation:jelly .5s ease-in-out;border-radius:5px;overflow-y:auto;max-height:80%}.modal-container .modal-header{padding:20px}.modal-container .modal-header h3{display:inline-block;font-size:20px;color:#3a3a3a;margin:0}.modal-container .modal-header .icon{float:right;cursor:pointer}.modal-container .modal-body{padding:20px}.modal-container .modal-body .control-group .control{width:100%}@media only screen and (max-width:770px){.modal-container{max-width:80%;left:10%;margin-left:0}}.label{background:#e7e7e7;border-radius:2px;padding:8px;color:#000311;display:inline-block}.label.label-sm{padding:5px}.label.label-md{padding:8px}.label.label-lg{padding:11px}.label.label-xl{padding:14px}.badge{border-radius:50px;color:#fff;padding:8px;white-space:nowrap}.badge.badge-sm{padding:5px}.badge.badge-md{padding:3px 10px}.badge.badge-lg{padding:11px}.badge.badge-xl{padding:14px}.badge.badge-success{background-color:#4caf50}.badge.badge-info{background-color:#0041ff}.badge.badge-danger{background-color:#fc6868}.badge.badge-warning{background-color:#ffc107}.image-wrapper{margin-bottom:20px;margin-top:10px;display:inline-block;width:100%}.image-wrapper .image-item{width:200px;height:200px;margin-right:20px;background:#f8f9fa;border-radius:3px;display:inline-block;position:relative;background-image:url(../images/placeholder-icon.svg);background-repeat:no-repeat;background-position:50%;margin-bottom:20px;float:left}.image-wrapper .image-item img.preview{width:100%;height:100%}.image-wrapper .image-item input{display:none}.image-wrapper .image-item .remove-image{background-image:linear-gradient(-180deg,rgba(0,0,0,.08),rgba(0,0,0,.24));border-radius:0 0 4px 4px;position:absolute;bottom:0;width:100%;padding:10px;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.24);margin-right:20px;cursor:pointer}.image-wrapper .image-item:hover .remove-image{display:block}.image-wrapper .image-item.has-image{background-image:none}.vue-swatches__trigger{border:1px solid #d3d3d3}.helper-container{display:block}.helper-container .group code{font-weight:700}.overlay-loader{position:fixed;z-index:11;top:50%;left:50%;margin-top:-24px;margin-left:-24px}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:#000;color:#fff;border-radius:4px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:#000;z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}
\ No newline at end of file
+.active .cms-icon,.active.configuration-icon,.catalog-icon,.cms-icon,.configuration-icon,.customer-icon,.dashboard-icon,.promotion-icon,.sales-icon,.settings-icon{width:48px;height:48px;display:inline-block;background-size:cover}.icon{display:inline-block;background-size:cover}.dashboard-icon{background-image:url(../images/Icon-Dashboard.svg)}.sales-icon{background-image:url(../images/Icon-Sales.svg)}.catalog-icon{background-image:url(../images/Icon-Catalog.svg)}.customer-icon{background-image:url(../images/Icon-Customers.svg)}.configuration-icon{background-image:url(../images/Icon-Configure.svg)}.settings-icon{background-image:url(../images/Icon-Settings.svg)}.promotion-icon{background-image:url(../images/icon-promotion.svg)}.cms-icon{background-image:url(../images/Icon-CMS.svg)}.angle-right-icon{background-image:url(../images/Angle-Right.svg);width:17px;height:17px}.angle-left-icon{background-image:url(../images/Angle-Left.svg);width:17px;height:17px}.arrow-down-icon{background-image:url(../images/Arrow-Down-Light.svg);width:14px;height:8px}.arrow-right-icon{background-image:url(../images/Arrow-Right.svg);width:18px;height:18px}.white-cross-sm-icon{background-image:url(../images/Icon-Sm-Cross-White.svg);width:18px;height:18px}.accordian-up-icon{background-image:url(../images/Accordion-Arrow-Up.svg);width:24px;height:24px}.accordian-down-icon{background-image:url(../images/Accordion-Arrow-Down.svg);width:24px;height:24px}.accordian-left-icon{background-image:url(../images/chevron-left.svg);width:24px;height:24px}.accordian-right-icon{background-image:url(../images/chevron-right.png);width:24px;height:24px}.cross-icon{background-image:url(../images/Icon-Crossed.svg);width:18px;height:18px}.trash-icon{background-image:url(../images/Icon-Trash.svg);width:24px;height:24px}.remove-icon{background-image:url(../images/Icon-remove.svg);width:24px;height:24px}.pencil-lg-icon{background-image:url(../images/Icon-Pencil-Large.svg);width:24px;height:24px}.eye-icon{background-image:url(../images/Icon-eye.svg);width:24px;height:24px}.search-icon{background-image:url(../images/icon-search.svg);width:24px;height:24px}.sortable-icon{background-image:url(../images/Icon-Sortable.svg);width:24px;height:24px}.sort-down-icon,.sort-up-icon{background-image:url(../images/Icon-Sort-Down.svg);width:18px;height:18px}.sort-up-icon{transform:rotate(180deg)}.primary-back-icon{background-image:url(../images/Icon-Back-Primary.svg);width:24px;height:24px}.checkbox-dash-icon{background-image:url(../images/Checkbox-Dash.svg);width:24px;height:24px}.account-icon{background-image:url(../images/icon-account.svg);width:24px;height:24px}.expand-icon{background-image:url(../images/Expand-Light.svg);width:18px;height:18px}.expand-on-icon{background-image:url(../images/Expand-Light-On.svg);width:18px;height:18px}.dark-left-icon{background-image:url(../images/arrow-left-dark.svg);width:18px;height:18px}.light-right-icon{background-image:url(../images/arrow-right-light.svg);width:18px;height:18px}.folder-icon{background-image:url(../images/Folder-Icon.svg);width:24px;height:24px}.star-icon{background-image:url(../images/Star-Icon.svg);width:24px;height:24px}.star-icon-blank{background-image:url(../images/Star-Icon-Blank.svg);width:24px;height:24px}.arrow-down-white-icon{background-image:url(../images/down-arrow-white.svg);width:17px;height:13px}.arrow-up-white-icon{background-image:url(../images/up-arrow-white.svg);width:17px;height:13px}.profile-pic-icon{background-image:url(../images/Profile-Pic.svg);width:60px;height:60px}.graph-up-icon{background-image:url(../images/Icon-Graph-Green.svg);width:24px;height:24px}.graph-down-icon{background-image:url(../images/Icon-Graph-Red.svg);width:24px;height:24px}.no-result-icon{background-image:url(../images/limited-icon.svg);width:52px;height:47px}.note-icon{background-image:url(../images/icon-note.svg)}.list-icon,.note-icon{width:24px;height:24px}.list-icon{background-image:url(../images/Icon-Listing.svg)}.copy-icon{background-image:url(../images/copy-icon.png);width:24px;height:24px}.active .dashboard-icon{background-image:url(../images/Icon-Dashboard-Active.svg)}.active .sales-icon{background-image:url(../images/Icon-Sales-Active.svg)}.active .catalog-icon{background-image:url(../images/Icon-Catalog-Active.svg)}.active .customer-icon{background-image:url(../images/Icon-Customers-Active.svg)}.active .settings-icon{background-image:url(../images/Icon-Settings-Active.svg)}.active .configuration-icon{background-image:url(../images/Icon-Configure-Active.svg)}.active .promotion-icon{background-image:url(../images/icon-promotion-active.svg)}.active .cms-icon{background-image:url(../images/Icon-CMS-Active.svg)}.active>.arrow-down-icon{background-image:url(../images/Arrow-Down.svg);width:14px;height:8px}.active>.expand-icon{background-image:url(../images/Expand-Light-On.svg)}.active.dashboard-icon{background-image:url(../images/Icon-Dashboard-Active.svg)}.active.customer-icon{background-image:url(../images/Icon-Customers-Active.svg)}.active.sales-icon{background-image:url(../images/Icon-Sales-Active.svg)}.active.settings-icon{background-image:url(../images/Icon-Settings-Active.svg)}.active.configuration-icon{background-image:url(../images/Icon-Configure-Active.svg)}.active.arrow-down-icon{background-image:url(../images/Arrow-Down.svg);width:14px;height:8px}.active.expand-icon{background-image:url(../images/Expand-Light-On.svg)}.icon-404{background-image:url(../images/404-image.svg);width:255px;height:255px}.export-icon{background-image:url(../images/Icon-Export.svg);width:32px;height:32px}.import-icon{background-image:url(../images/Icon-Import.svg);width:32px;height:32px}.star-blue-icon{width:17px;height:17px;background-image:url(../images/Icon-star.svg)}.camera-icon{background-image:url(../images/Camera.svg);width:24px;height:24px}@-webkit-keyframes jelly{0%{transform:translateY(0) scale(.7);opacity:0}70%{transform:translateY(5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@keyframes jelly{0%{transform:translateY(0) scale(.7);opacity:0}70%{transform:translateY(5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@-webkit-keyframes jelly-out{0%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(.7);opacity:0}}@keyframes jelly-out{0%{transform:translateY(0) scale(1);opacity:1}30%{transform:translateY(-5px) scale(1.05);opacity:1}to{transform:translateY(0) scale(.7);opacity:0}}.grid-container{display:block;width:100%}.datagrid-filters{display:inline-flex;width:100%;justify-content:space-between;align-items:center;margin-bottom:20px}.datagrid-filters .filter-left{float:left}.datagrid-filters .filter-right{float:right}.datagrid-filters .dropdown-filters{display:inline-block}.datagrid-filters .dropdown-filters.per-page{margin-right:10px}.datagrid-filters .dropdown-filters.per-page .control-group label{width:auto;float:left;margin-top:7px;margin-right:10px}.datagrid-filters .dropdown-filters.per-page .control-group .control{width:auto;margin:0}@media only screen and (max-width:1192px){.datagrid-filters{flex-direction:column;margin-bottom:unset}.datagrid-filters .filter-left,.datagrid-filters .filter-right{margin-bottom:10px}}@media only screen and (max-width:720px){.datagrid-filters .dropdown-filters{margin-bottom:5px}}.filtered-tags{display:inline-flex;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}.search-filter .control{font-size:15px;border:2px solid #c7c7c7;border-right:none;border-top-left-radius:3px;border-bottom-left-radius:3px;height:36px;width:280px;padding-left:10px;-webkit-appearance:none}.search-filter .contorl:focus{border-color:#0041ff}.search-filter .icon-wrapper{border:2px solid #c7c7c7;border-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0;height:36px;width:36px;padding:3px;float:right}@media only screen and (max-width:720px){.search-filter .control{width:100px}}.grid-dropdown-header{display:inline-flex;justify-content:space-between;align-items:center;height:36px;width:200px;border:2px solid #c7c7c7;border-radius:3px;color:#8e8e8e;padding:0 5px}.grid-dropdown-header .arrow-icon-down{float:right}.dropdown-list.dropdown-container{padding:15px;width:100%;top:43px}.dropdown-list.dropdown-container ul li .control-group{margin-bottom:15px}.dropdown-list.dropdown-container .apply-filter{padding:10px;width:100%}.filter-tag{justify-content:space-between;margin-right:20px}.filter-tag,.filter-tag .wrapper{display:flex;flex-direction:row;align-items:center;font-size:14px;height:40px;border-radius:2px}.filter-tag .wrapper{margin-left:10px;padding:5px 10px;background:#e7e7e7;color:#000311;letter-spacing:-.22px}.filter-tag .wrapper .icon.cross-icon{margin-left:10px;cursor:pointer}.rtl .search-filter .control{padding-right:10px;border-left:0;border-right:2px solid #c7c7c7;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.rtl .search-filter .icon-wrapper{float:left;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.rtl .dropdown-filters{display:inline-block}.rtl .dropdown-filters.per-page{margin-left:10px;margin-right:10px}.rtl .filtered-tags .filter-tag .cross-icon,.rtl .filtered-tags .filter-tag .wrapper{margin-right:10px;margin-left:0}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus{outline:none}.mb-10{margin-bottom:10px}.mb-15{margin-bottom:15px}.mb-20{margin-bottom:20px}.mb-25{margin-bottom:25px}.mb-30{margin-bottom:30px}.mb-35{margin-bottom:35px}.mb-40{margin-bottom:40px}.mb-45{margin-bottom:45px}.mb-50{margin-bottom:50px}.mb-60{margin-bottom:60px}.mb-70{margin-bottom:70px}.mb-80{margin-bottom:80px}.mb-90{margin-bottom:90px}.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-35{margin-top:35px}.mt-40{margin-top:40px}.mt-45{margin-top:45px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-70{margin-top:70px}.mt-80{margin-top:80px}.mt-90{margin-top:90px}body{letter-spacing:-.26px;line-height:19px}a:active,a:focus,a:hover,a:link,a:visited{text-decoration:none;color:#0041ff}::-moz-selection{background-color:rgba(0,64,255,.6);color:#fff}::selection{background-color:rgba(0,64,255,.6);color:#fff}textarea{resize:none}ul{margin:0;padding:0;list-style:none}h1{font-size:28px;margin-top:0}h1,h2{color:#3a3a3a}h2{font-size:24px}h3{font-size:20px}h3,h4{color:#3a3a3a}h4{font-size:16px}h5{font-size:12px;color:#3a3a3a}.hide{display:none!important}.row{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.btn{box-shadow:0 1px 4px 0 rgba(0,0,0,.2),0 0 8px 0 rgba(0,0,0,.1);border-radius:3px;border:none;color:#fff;cursor:pointer;transition:.2s cubic-bezier(.4,0,.2,1);font:inherit;display:inline-block}.btn:active,.btn:focus,.btn:hover{opacity:.75;border:none}.btn.btn-sm{padding:6px 12px}.btn.btn-md{padding:8px 16px}.btn.btn-lg{padding:10px 20px}.btn.btn-xl{padding:12px 24px;font-size:16px}.btn.btn-primary{background:#0041ff;color:#fff}.btn.btn-black{background:#000;color:#fff}.btn.btn-white{background:#fff;color:#000}.btn:disabled,.btn[disabled=disabled],.btn[disabled=disabled]:active,.btn[disabled=disabled]:hover{cursor:not-allowed;background:#b1b1ae;box-shadow:none;opacity:1}.dropdown-btn{min-width:150px;text-align:left;background:#fff;border:2px solid #c7c7c7;border-radius:3px;font-size:14px;padding:8px 35px 8px 10px;cursor:pointer;position:relative}.dropdown-btn:active,.dropdown-btn:focus,.dropdown-btn:hover{opacity:.75;border:2px solid #c7c7c7}.dropdown-btn .icon{position:absolute;right:10px;top:50%;margin-top:-4px}.dropdown-toggle{cursor:pointer}.dropdown-open{position:relative}.dropdown-list{width:200px;margin-bottom:20px;box-shadow:0 2px 4px 0 rgba(0,0,0,.16),0 0 9px 0 rgba(0,0,0,.16);border-radius:3px;background-color:#fff;position:absolute;display:none;z-index:10;text-align:left}.dropdown-list.bottom-left{top:42px;left:0}.dropdown-list.bottom-right{top:42px;right:0}.dropdown-list.top-left{bottom:0;left:42px}.dropdown-list.top-right{bottom:0;right:42px}.dropdown-list .search-box{padding:20px;border-bottom:1px solid #e8e8e8}.dropdown-list .search-box .control{background:#fff;border:2px solid #c7c7c7;border-radius:3px;width:100%;height:36px;display:inline-block;vertical-align:middle;transition:.2s cubic-bezier(.4,0,.2,1);padding:0 10px;font-size:15px}.dropdown-list .search-box .control:focus{border-color:#0041ff}.dropdown-list .dropdown-container{padding:20px;overflow-y:auto}.dropdown-list .dropdown-container label{font-size:15px;display:inline-block;text-transform:uppercase;color:#9e9e9e;font-weight:700;padding-bottom:5px}.dropdown-list .dropdown-container ul{margin:0;list-style-type:none;padding:0}.dropdown-list .dropdown-container ul li{padding:5px 0}.dropdown-list .dropdown-container ul li a:active,.dropdown-list .dropdown-container ul li a:focus,.dropdown-list .dropdown-container ul li a:link,.dropdown-list .dropdown-container ul li a:visited{color:#3a3a3a;display:block}.dropdown-list .dropdown-container ul li a:hover{color:#0041ff}.dropdown-list .dropdown-container ul li .checkbox{margin:0}.dropdown-list .dropdown-container ul li .control-group label{color:#3a3a3a;font-size:15px;font-weight:500;text-transform:capitalize;width:100%}.dropdown-list .dropdown-container .btn{width:100%;margin-top:10px}.section .secton-title{font-size:18px;color:#3a3a3a;padding:15px 0;border-bottom:1px solid #e8e8e8}.section .section-content{display:block;padding:20px 0}.section .section-content .row{display:block;padding:7px 0}.section .section-content .row .title{width:200px}.section .section-content .row .title,.section .section-content .row .value{color:#3a3a3a;letter-spacing:-.26px;display:inline-block}.table{width:100%}.table table{border-collapse:collapse;text-align:left;width:100%}.table table thead th{font-weight:700;padding:12px 10px;background:#f8f9fa;color:#3a3a3a}.table table tbody td{padding:10px;border-bottom:1px solid #d3d3d3;color:#3a3a3a;vertical-align:top}.table table tbody td.actions .action{display:inline-flex}.table table tbody td.actions .icon{cursor:pointer;vertical-align:middle}.table table tbody td.empty{text-align:center}.table table tbody tr:last-child td{border-bottom:none}.table .control-group{width:100%;margin-bottom:0;min-width:140px}.table .control-group .control{width:100%;margin:0}.pagination .page-item{background:#fff;border:2px solid #c7c7c7;border-radius:3px;padding:7px 14px;margin-right:5px;font-size:16px;display:inline-block;color:#3a3a3a;vertical-align:middle;text-decoration:none}.pagination .page-item.next,.pagination .page-item.previous{padding:6px 9px}.pagination .page-item.active{background:#0041ff;color:#fff;border-color:#0041ff}.pagination .page-item .icon{vertical-align:middle;margin-bottom:3px}.checkbox{position:relative;display:block}.checkbox input{left:0;opacity:0;position:absolute;top:0;height:24px;width:24px;z-index:100}.checkbox .checkbox-view{background-image:url(../images/Checkbox.svg);height:24px;width:24px;display:inline-block!important;vertical-align:middle;margin:0 5px 0 0}.checkbox input:checked+.checkbox-view{background-image:url(../images/Checkbox-Checked.svg)}.checkbox input:disabled+.checkbox-view{opacity:.5;cursor:not-allowed}.radio{position:relative;display:block;margin:10px 5px 5px 0}.radio input{left:-4px;opacity:0;position:absolute;top:-1px;z-index:100}.radio .radio-view{background-image:url(../images/controls.svg);background-position:-21px 0;height:20px;width:20px;display:inline-block!important;vertical-align:middle;margin:0 5px 0 0}.radio input:checked+.radio-view{background-position:-21px -21px}.radio input:disabled+.radio-view{opacity:.5;cursor:not-allowed}.rtl .radio input{left:unset;right:1px}.control-group{margin-bottom:25px;font-size:15px;width:750px;max-width:100%;position:relative}.control-group,.control-group label{display:block;color:#3a3a3a}.control-group label.required:after{content:"*";color:#fc6868;font-weight:700;display:inline-block}.control-group textarea.control{height:100px;padding:10px}.control-group .control{background:#fff;border:2px solid #c7c7c7;border-radius:3px;width:70%;height:36px;display:inline-block;vertical-align:middle;transition:.2s cubic-bezier(.4,0,.2,1);padding:0 10px;font-size:15px;margin-top:10px;margin-bottom:5px}.control-group .control:focus{border-color:#0041ff}.control-group .control[disabled=disabled]{border-color:#d3d3d3;background-color:#d3d3d3;cursor:not-allowed}.control-group .control[multiple]{height:100px}.control-group.date .control,.control-group.datetime .control{padding-right:40px}.control-group.date:after,.control-group.datetime:after{background-image:url(../images/Icon-Calendar.svg);width:24px;height:24px;content:"";display:inline-block;vertical-align:middle;margin-left:-34px;pointer-events:none;position:absolute;left:70%;top:50%}.control-group.date .cross-icon,.control-group.datetime .cross-icon{position:absolute;cursor:pointer;margin-left:-54px;top:38px}.control-group .control-info{display:block;font-size:14px;color:#6f6f6f;font-style:italic}.control-group .control-error{display:none;color:#fc6868;margin-top:5px}.control-group.has-error .control{border-color:#fc6868}.control-group.has-error .control-error{display:block}.control-group.has-error.date:after{margin-top:-12px}.control-group.price .currency-code{vertical-align:middle;display:inline-block}.table .control-group.date:after,.table .control-group.datetime:after{top:6px;left:100%}.table .control-group.has-error.date.date:after,.table .control-group.has-error.date.datetime:after{top:18px}.rtl .control-group.date .control,.rtl .control-group.datetime .control{padding-left:40px;padding-right:10px}.rtl .control-group.date:after,.rtl .control-group.datetime:after{margin-right:-34px;right:70%}.rtl .control-group.date .cross-icon,.rtl .control-group.datetime .cross-icon{margin-right:-54px;top:38px}.rtl .table .control-group.date:after,.rtl .table .control-group.datetime:after{right:unset!important;left:auto}.control-group .switch{position:relative;display:inline-block;width:60px;height:34px;margin-top:10px;margin-bottom:5px}.control-group .switch input{opacity:0;width:0;height:0}.control-group .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#8e8e8e;transition:.2s}.control-group .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.2s}.control-group input:checked+.slider{background-color:#0041ff}.control-group input:focus+.slider{box-shadow:0 0 1px #0041ff}.control-group input:checked+.slider:before{transform:translateX(26px)}.control-group .slider.round{border-radius:34px}.control-group .slider.round:before{border-radius:50%}.button-group{margin-top:20px;margin-bottom:20px}.alert-wrapper{width:300px;top:10px;right:10px;position:fixed;z-index:100;text-align:left}.alert-wrapper .alert{width:300px;padding:15px;border-radius:3px;display:inline-block;box-shadow:0 4px 15.36px .64px rgba(0,0,0,.1),0 2px 6px 0 rgba(0,0,0,.12);position:relative;-webkit-animation:jelly .5s ease-in-out;animation:jelly .5s ease-in-out;transform-origin:center top;z-index:500;margin-bottom:10px}.alert-wrapper .alert.alert-error{background:#fc6868}.alert-wrapper .alert.alert-info{background:#204d74}.alert-wrapper .alert.alert-success{background:#4caf50}.alert-wrapper .alert.alert-warning{background:#ffc107}.alert-wrapper .alert .icon{position:absolute;right:10px;top:10px;cursor:pointer}.alert-wrapper .alert p{color:#fff;margin:0;padding:0;font-size:15px}.tabs ul{border-bottom:1px solid #e8e8e8}.tabs ul li{display:inline-block}.tabs ul li a{padding:15px 20px;cursor:pointer;margin:0 2px;text-align:center;color:#000311;display:block}.tabs ul li.active a{border-bottom:3px solid #0041ff}.accordian,accordian{display:inline-block;width:100%}.accordian .accordian-header,.accordian div[slot*=header],accordian .accordian-header,accordian div[slot*=header]{width:100%;display:inline-block;font-size:18px;color:#3a3a3a;border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;padding:20px 15px;cursor:pointer;margin-top:-1px}.accordian .accordian-header .expand-icon,.accordian div[slot*=header] .expand-icon,accordian .accordian-header .expand-icon,accordian div[slot*=header] .expand-icon{background-image:url(../images/Expand-Light.svg);margin-right:10px;margin-top:3px}.accordian .accordian-header h1,.accordian div[slot*=header] h1,accordian .accordian-header h1,accordian div[slot*=header] h1{margin:0;font-size:20px;font-weight:500;display:inline-block}.accordian .accordian-header .icon,.accordian div[slot*=header] .icon,accordian .accordian-header .icon,accordian div[slot*=header] .icon{float:right}.accordian .accordian-header .icon.left,.accordian div[slot*=header] .icon.left,accordian .accordian-header .icon.left,accordian div[slot*=header] .icon.left{float:left}.accordian.error .accordian-header,accordian.error .accordian-header{color:#ff5656}.accordian .accordian-content,.accordian div[slot*=body],accordian .accordian-content,accordian div[slot*=body]{width:100%;padding:20px 15px;display:none;transition:all .3s ease}.accordian.active>.accordian-content,accordian.active>.accordian-content{display:inline-block}.accordian.active>.accordian-header .expand-icon,accordian.active>.accordian-header .expand-icon{background-image:url(../images/Expand-Light-On.svg)}.tree-container .tree-item{padding-left:30px;display:inline-block;margin-top:10px;width:100%}.tree-container .tree-item>.tree-item{display:none}.tree-container .tree-item.active>.tree-item{display:inline-block}.tree-container .tree-item .checkbox,.tree-container .tree-item .radio{margin:0;display:inline-block}.tree-container .tree-item .expand-icon{display:inline-block;margin-right:10px;cursor:pointer;background-image:url(../images/Expand-Light.svg);width:18px;height:18px;vertical-align:middle}.tree-container .tree-item .folder-icon{vertical-align:middle;margin-right:10px}.tree-container .tree-item.active>.expand-icon{background-image:url(../images/Expand-Light-On.svg)}.tree-container>.tree-item{padding-left:0}.panel{box-shadow:0 2px 25px 0 rgba(0,0,0,.15);border-radius:5px;background:#fff}.panel .panel-content{padding:20px}modal{display:none}.modal-open{overflow:hidden}.modal-overlay{display:none;overflow-y:auto;z-index:10;top:0;right:0;bottom:0;left:0;position:fixed;background:#000;opacity:.7}.modal-open .modal-overlay{display:block}.modal-container{background:#fff;top:100px;width:600px;max-width:80%;left:50%;margin-left:-300px;position:fixed;z-index:11;box-shadow:0 15px 25px 0 rgba(0,0,0,.03),0 20px 45px 5px rgba(0,0,0,.2);-webkit-animation:fade-in-white .3s ease-in-out;animation:fade-in-white .3s ease-in-out;-webkit-animation:jelly .5s ease-in-out;animation:jelly .5s ease-in-out;border-radius:5px;overflow-y:auto;max-height:80%}.modal-container .modal-header{padding:20px}.modal-container .modal-header h3{display:inline-block;font-size:20px;color:#3a3a3a;margin:0}.modal-container .modal-header .icon{float:right;cursor:pointer}.modal-container .modal-body{padding:20px}.modal-container .modal-body .control-group .control{width:100%}@media only screen and (max-width:770px){.modal-container{max-width:80%;left:10%;margin-left:0}}.label{background:#e7e7e7;border-radius:2px;padding:8px;color:#000311;display:inline-block}.label.label-sm{padding:5px}.label.label-md{padding:8px}.label.label-lg{padding:11px}.label.label-xl{padding:14px}.badge{border-radius:50px;color:#fff;padding:8px;white-space:nowrap}.badge.badge-sm{padding:5px}.badge.badge-md{padding:3px 10px}.badge.badge-lg{padding:11px}.badge.badge-xl{padding:14px}.badge.badge-success{background-color:#4caf50}.badge.badge-info{background-color:#0041ff}.badge.badge-danger{background-color:#fc6868}.badge.badge-warning{background-color:#ffc107}.image-wrapper{margin-bottom:20px;margin-top:10px;display:inline-block;width:100%}.image-wrapper .image-item{width:200px;height:200px;margin-right:20px;background:#f8f9fa;border-radius:3px;display:inline-block;position:relative;background-image:url(../images/placeholder-icon.svg);background-repeat:no-repeat;background-position:50%;margin-bottom:20px;float:left}.image-wrapper .image-item img.preview{width:100%;height:100%}.image-wrapper .image-item input{display:none}.image-wrapper .image-item .remove-image{background-image:linear-gradient(-180deg,rgba(0,0,0,.08),rgba(0,0,0,.24));border-radius:0 0 4px 4px;position:absolute;bottom:0;width:100%;padding:10px;text-align:center;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.24);margin-right:20px;cursor:pointer}.image-wrapper .image-item:hover .remove-image{display:block}.image-wrapper .image-item.has-image{background-image:none}.vue-swatches__trigger{border:1px solid #d3d3d3}.helper-container{display:block}.helper-container .group code{font-weight:700}.overlay-loader{position:fixed;z-index:11;top:50%;left:50%;margin-top:-24px;margin-left:-24px}.tooltip{display:block!important;z-index:10000}.tooltip .tooltip-inner{background:#000;color:#fff;border-radius:4px;padding:5px 10px 4px}.tooltip .tooltip-arrow{width:0;height:0;border-style:solid;position:absolute;margin:5px;border-color:#000;z-index:1}.tooltip[x-placement^=top]{margin-bottom:5px}.tooltip[x-placement^=top] .tooltip-arrow{border-width:5px 5px 0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;bottom:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=bottom]{margin-top:5px}.tooltip[x-placement^=bottom] .tooltip-arrow{border-width:0 5px 5px;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;top:-5px;left:calc(50% - 5px);margin-top:0;margin-bottom:0}.tooltip[x-placement^=right]{margin-left:5px}.tooltip[x-placement^=right] .tooltip-arrow{border-width:5px 5px 5px 0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important;left:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}.tooltip[x-placement^=left]{margin-right:5px}.tooltip[x-placement^=left] .tooltip-arrow{border-width:5px 0 5px 5px;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;right:-5px;top:calc(50% - 5px);margin-left:0;margin-right:0}
\ No newline at end of file
diff --git a/packages/Webkul/Ui/publishable/assets/mix-manifest.json b/packages/Webkul/Ui/publishable/assets/mix-manifest.json
index 92f4a9569..a1765c46b 100644
--- a/packages/Webkul/Ui/publishable/assets/mix-manifest.json
+++ b/packages/Webkul/Ui/publishable/assets/mix-manifest.json
@@ -1,4 +1,4 @@
 {
     "/js/ui.js": "/js/ui.js?id=1a2a11fc54d0a5962a66",
-    "/css/ui.css": "/css/ui.css?id=6d93a4a052e38d6aa795"
+    "/css/ui.css": "/css/ui.css?id=87c15a3e7af4ab272377"
 }
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index c9f048966..cd3275474 100755
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -559,10 +559,10 @@ h5 {
     margin: 10px 5px 5px 0px;
 
     input {
-        left: 0;
+        left: -4px;
         opacity: 0;
         position: absolute;
-        top: 0;
+        top: -1px;
         z-index: 100;
     }
 
@@ -587,6 +587,15 @@ h5 {
     }
 }
 
+.rtl {
+    .radio {
+        input {
+            left: unset;
+            right: 1px;
+        }
+    }
+}
+
 .control-group {
     display: block;
     margin-bottom: 25px;
diff --git a/packages/Webkul/Velocity/src/Resources/views/shop/products/view/configurable-options.blade.php b/packages/Webkul/Velocity/src/Resources/views/shop/products/view/configurable-options.blade.php
index cfc132d55..6e5ce0c31 100644
--- a/packages/Webkul/Velocity/src/Resources/views/shop/products/view/configurable-options.blade.php
+++ b/packages/Webkul/Velocity/src/Resources/views/shop/products/view/configurable-options.blade.php
@@ -3,6 +3,7 @@
     @inject ('configurableOptionHelper', 'Webkul\Product\Helpers\ConfigurableOption')
 
     @php
+        $defaultVariant = $product->getTypeInstance()->getDefaultVariant();
         $config = $configurableOptionHelper->getConfigurationConfig($product);
         $galleryImages = productimage()->getGalleryImages($product);
     @endphp
@@ -20,7 +21,7 @@
                     type="hidden"
                     :value="selectedProductId"
                     id="selected_configurable_option"
-                    name="selected_configurable_option" />
+                    name="selected_configurable_option"/>
 
                 <div
                     :key="index"
@@ -43,16 +44,18 @@
                             :disabled="attribute.disabled"
                             :id="['attribute_' + attribute.id]"
                             :name="['super_attribute[' + attribute.id + ']']"
-                            @change="configure(attribute, $event.target.value, $event)"
+                            @change="configure(attribute, $event.target.value)"
                             :data-vv-as="'&quot;' + attribute.label + '&quot;'">
 
                             <option
                                 :value="option.id"
-                                v-for='(option, index) in attribute.options'>
+                                v-for='(option, index) in attribute.options'
+                                :selected="index == attribute.selectedIndex">
                                 @{{ option.label }}
                             </option>
 
                         </select>
+
                         <div class="select-icon-container">
                             <span class="select-icon rango-arrow-down"></span>
                         </div>
@@ -72,7 +75,8 @@
                                 :name="['super_attribute[' + attribute.id + ']']"
                                 :id="['attribute_' + attribute.id + '_option_' + option.id]"
                                 :data-vv-as="'&quot;' + attribute.label + '&quot;'"
-                                @change="configure(attribute, $event.target.value)"/>
+                                @change="configure(attribute, $event.target.value)"
+                                :checked="index == attribute.selectedIndex">
 
                             <span v-if="attribute.swatch_type == 'color'" :style="{ background: option.swatch_value }"></span>
 
@@ -97,52 +101,76 @@
 
         <script type="text/javascript">
             (() => {
-                var galleryImages = @json($galleryImages);
+                let galleryImages = @json($galleryImages);
 
                 Vue.component('product-options', {
                     template: '#product-options-template',
+
                     inject: ['$validator'],
+
                     data: function() {
                         return {
-                            galleryImages: [],
-                            simpleProduct: null,
-                            childAttributes: [],
-                            selectedProductId: '',
+                            defaultVariant: @json($defaultVariant),
+
                             config: @json($config),
+
+                            galleryImages: [],
+
+                            simpleProduct: null,
+
+                            childAttributes: [],
+
+                            selectedProductId: '',
                         }
                     },
 
-                    created: function() {
-                        var config = @json($config);
+                    mounted: function () {
+                        this.init();
 
-                        var childAttributes = this.childAttributes,
-                            attributes = config.attributes.slice(),
-                            index = attributes.length,
-                            attribute;
-
-                        while (index--) {
-                            attribute = attributes[index];
-
-                            attribute.options = [];
-
-                            if (index) {
-                                attribute.disabled = true;
-                            } else {
-                                this.fillSelect(attribute);
-                            }
-
-                            attribute = Object.assign(attribute, {
-                                childAttributes: childAttributes.slice(),
-                                prevAttribute: attributes[index - 1],
-                                nextAttribute: attributes[index + 1]
-                            });
-
-                            childAttributes.unshift(attribute);
-                        }
+                        this.initDefaultSelection();
                     },
 
                     methods: {
-                        configure: function(attribute, value, event) {
+                        init: function () {
+                            let config = @json($config);
+
+                            let childAttributes = this.childAttributes,
+                                attributes = config.attributes.slice(),
+                                index = attributes.length,
+                                attribute;
+
+                            while (index--) {
+                                attribute = attributes[index];
+
+                                attribute.options = [];
+
+                                if (index) {
+                                    attribute.disabled = true;
+                                } else {
+                                    this.fillSelect(attribute);
+                                }
+
+                                attribute = Object.assign(attribute, {
+                                    childAttributes: childAttributes.slice(),
+                                    prevAttribute: attributes[index - 1],
+                                    nextAttribute: attributes[index + 1]
+                                });
+
+                                childAttributes.unshift(attribute);
+                            }
+                        },
+
+                        initDefaultSelection: function() {
+                            if (this.defaultVariant) {
+                                this.childAttributes.forEach((attribute) => {
+                                    let attributeValue = this.defaultVariant[attribute.code];
+
+                                    this.configure(attribute, attributeValue);
+                                });
+                            }
+                        },
+
+                        configure: function(attribute, value) {
                             this.simpleProduct = this.getSelectedProductId(attribute, value);
 
                             if (value) {
@@ -168,7 +196,7 @@
                         },
 
                         getSelectedIndex: function(attribute, value) {
-                            var selectedIndex = 0;
+                            let selectedIndex = 0;
 
                             attribute.options.forEach(function(option, index) {
                                 if (option.id == value) {
@@ -180,7 +208,7 @@
                         },
 
                         getSelectedProductId: function(attribute, value) {
-                            var options = attribute.options,
+                            let options = attribute.options,
                                 matchedOptions;
 
                             matchedOptions = options.filter(function (option) {
@@ -195,12 +223,12 @@
                         },
 
                         fillSelect: function(attribute) {
-                            var options = this.getAttributeOptions(attribute.id);
-                            var prevOption;
-                            var index = 1;
-                            var allowedProducts;
-                            var i;
-                            var j;
+                            let options = this.getAttributeOptions(attribute.id);
+                            let prevOption;
+                            let index = 1;
+                            let allowedProducts;
+                            let i;
+                            let j;
 
                             this.clearSelect(attribute)
 
@@ -252,13 +280,13 @@
                                 || attribute.swatch_type == ''
                                 || attribute.swatch_type == 'dropdown'
                             ) {
-                                var element = document.getElementById(`attribute_${attribute.id}`);
+                                let element = document.getElementById(`attribute_${attribute.id}`);
 
                                 if (element) {
                                     element.selectedIndex = "0";
                                 }
                             } else {
-                                var elements = document.getElementsByName(`super_attribute[${attribute.id}]`);
+                                let elements = document.getElementsByName(`super_attribute[${attribute.id}]`);
 
                                 elements.forEach(function(element) {
                                     element.checked = false;
@@ -267,7 +295,7 @@
                         },
 
                         getAttributeOptions: function (attributeId) {
-                            var options;
+                            let options;
 
                             this.config.attributes.forEach(function(attribute, index) {
                                 if (attribute.id == attributeId) {
@@ -279,7 +307,7 @@
                         },
 
                         reloadPrice: function () {
-                            var selectedOptionCount = 0;
+                            let selectedOptionCount = 0;
 
                             this.childAttributes.forEach(function(attribute) {
                                 if (attribute.selectedIndex) {
@@ -287,9 +315,9 @@
                                 }
                             });
 
-                            var priceLabelElement = document.querySelector('.price-label');
-                            var priceElement = document.querySelector('.final-price');
-                            var regularPriceElement = document.querySelector('.regular-price');
+                            let priceLabelElement = document.querySelector('.price-label');
+                            let priceElement = document.querySelector('.final-price');
+                            let regularPriceElement = document.querySelector('.regular-price');
 
                             if (this.childAttributes.length == selectedOptionCount) {
                                 priceLabelElement.style.display = 'none';
@@ -337,7 +365,7 @@
                         },
 
                         changeStock: function (productId) {
-                            var inStockElement = document.querySelector('.disable-box-shadow');
+                            let inStockElement = document.querySelector('.disable-box-shadow');
 
                             if (productId) {
                                 inStockElement.style.display= "block";
@@ -347,7 +375,7 @@
                         },
                     }
                 });
-            })()
+            })();
         </script>
     @endpush
 @endif
\ No newline at end of file