How to position the size chart button in a special location using CSS (Easy!)

This is one of the best tricks to position the size chart button in the position you want. Anyone can do it!

• Go to your Shopify admin and navigate to Online Store > Themes.
• Find the theme you want to edit and click Customize.
• In the Theme Editor, click on the Theme settings icon (⚙️) in the left sidebar.
• Scroll down and open the Custom CSS section.
• Locate the CSS code for the #sizefox-container element.
• Add the following code

@media screen and (min-width: 992px) {
.size-selector {
position: relative; 
}

.size-selector .size-guide {
position: absolute;
top: 50px; /* adjust for vertical placement */
left: 300px; /* adjust for horizontal placement */
}
}

• Adjust the bottom and left values to move the button:
• • Increase/decrease bottom to move it up or down.
  • Increase/decrease left to move it left or right.
• Click Save in the top right corner to apply your changes.

If you need further assistance, contact [e-mail]. 🚀

Important Notes:

1️⃣ This customization only affects the position of the Size Guide button on desktop. It will not impact the mobile layout.

2️⃣ Changes to your theme may affect the button’s position, meaning you might need to readjust it. Additionally, if your theme includes dynamic elements that shift the layout, the button’s placement could be impacted.

🔹 For a more permanent solution, you’ll need to modify your theme’s HTML code. Ask your web or theme administrator to follow these advanced instructions carefully.

@media screen and (min-width: 992px) { .size-selector { position: relative; /* create positioning context */ } .size-selector .size-guide { position: absolute; top: 50px; /* adjust for vertical placement */ left: 300px; /* adjust for horizontal placement */ } }