diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index a2d5b7b..1ae9927 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -74,7 +74,7 @@
 
         width: calc(100% + 8px);
         height: calc(100% + 8px);
-        border-radius: 2px;
+        border-radius: 4px;
 
         border: 1px solid #0003;
     }
@@ -157,11 +157,6 @@
         return html;
     }
 
-
- 
-
-    
-
     const defaultStyle = `<style>.custom.form__label{margin-bottom: 0.6rem}.field.custom{margin-top: 0.6rem}.custom .field__input{padding-top:0.8rem}</style>`;
 
     let globalInputFormsObj = {
@@ -318,8 +313,6 @@
             // Clean up the element when it is removed from the DOM.
         }
 
-
-
         renderView() {
             // request data from server
             let tJS = this.tJS;
@@ -366,6 +359,14 @@
 
         }
 
+        updateSelectSwatch(event) {
+            let target = event.target;
+            let input = target.previousElementSibling;
+            input.checked = true;
+
+            this.renderView();
+        }
+
         reloadCurrentVariant(id, openAnimation = false) {
             this.currentVariant = id;
             let content = this.content;
@@ -381,7 +382,15 @@
                 if(key === this.currentVariant) {
                     content.innerHTML = globalInputFormsObj[key].renderHTML(this.section_id);
                 }
-            } 
+            }
+
+            const inputs = content.querySelectorAll('input');
+
+            for(let i = 0; i < inputs.length; i++) {
+                if(inputs[i].type === 'radio') {
+                    inputs[i].addEventListener('change', this.updateSelectSwatch.bind(this));
+                }
+            }
 
             console.log('reloadCurrentVariant', id, openAnimation);