How to align the unit conversion toggle to the left or the right

Important: this change will be applied to all your size charts  

You can adjust the position of the unit conversion toggle inside your SmartSize popup by adding a short snippet of CSS to your Shopify theme. by the default the position of the toggle is always show at the center.

---

 

Step 1

1. In your Shopify admin, go to Online Store → Themes → Customize.

2. Open the Theme settings → Custom CSS section.

 

 

---

 

Step 2

Paste the following code snippet to align the toggle to the left.

.smartsize-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.smartsize-unit-toggle {
  margin-right: auto;
  text-align: left;
  justify-self: flex-start;
}

Paste the following code snippet to align the toggle to the right.

.smartsize-header {
 display: flex;
 justify-content: flex-end;
 align-items: center;
}
.smartsize-unit-toggle {
 margin-left: auto;
 text-align: right;
 justify-self: flex-end;
}

Save your changes and preview your store to see the updated font.

---

 

 

Pro Tip:

For additional customization options—like changing colors, sizes, or spacing—visit our SmartSize CSS Styling Chatbot for step-by-step guidance.