diff --git a/packages/Webkul/Product/src/Type/Configurable.php b/packages/Webkul/Product/src/Type/Configurable.php
index dae260f05..3c4f99e6c 100644
--- a/packages/Webkul/Product/src/Type/Configurable.php
+++ b/packages/Webkul/Product/src/Type/Configurable.php
@@ -66,6 +66,15 @@ class Configurable extends AbstractType
      */
     protected $productOptions = [];
 
+    /**
+     * Get default variant.
+     *
+     * @return \Webkul\Product\Models\Product
+     */
+    public function getDefaultVariant()
+    {
+        return $this->product->variants()->find($this->product->additional['default_variant_id'] ?? null);
+    }
 
     /**
      * Get default variant id.
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..b58e79771 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
@@ -43,12 +44,13 @@
                             :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="'"' + attribute.label + '"'">
 
                             <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>
 
@@ -104,6 +106,7 @@
                     inject: ['$validator'],
                     data: function() {
                         return {
+                            defaultVariant: @json($defaultVariant),
                             galleryImages: [],
                             simpleProduct: null,
                             childAttributes: [],
@@ -112,6 +115,16 @@
                         }
                     },
 
+                    mounted: function () {
+                        if (this.defaultVariant) {
+                            this.childAttributes.forEach((attribute) => {
+                                let attributeValue = this.defaultVariant[attribute.code];
+
+                                this.configure(attribute, attributeValue);
+                            });
+                        }
+                    },
+
                     created: function() {
                         var config = @json($config);
 
@@ -142,7 +155,7 @@
                     },
 
                     methods: {
-                        configure: function(attribute, value, event) {
+                        configure: function(attribute, value) {
                             this.simpleProduct = this.getSelectedProductId(attribute, value);
 
                             if (value) {