Removing Pre-selected Button and Fixing Button Layout

[crepscity]

Hi Shopify Community,

I’m having a few issues with my product size buttons on the product page and could really use some help:

1. Pre-selected Button Styling: I want to remove the pre-selected size button and don’t want it to be set as default when the page loads.
2. Dark Border Lines: When the buttons are next to each other, the borders appear darker or thicker, almost like they’re overlapping.
3. Buttons Not Connected on Desktop: On mobile, the buttons are connected, but on desktop, there are gaps between them. How can I fix this?

Here’s the CSS I’m currently using:

.product-form__input input[type=“radio”] + label {
border-radius: 0 !important;
margin: 0 !important;
width: 90px !important;
height: 50px !important;
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
box-sizing: border-box !important;
vertical-align: top !important;
}

Any advice on how to remove the border overlap, connect the buttons on desktop, and remove the pre-selected button would be greatly appreciated!

WEBSITE: crepscity.com

Should look like this image on the right below:

[TheUntechnickle]

Hi @crepscity ,

Just checked out your website and took a look at the size selection buttons. I’ve got some solutions for the issues you mentioned:

For removing that pre-selected button, I noticed in your code that the first size option (UK 6.5) has a “checked” attribute that’s causing this. You can either edit your product template to remove this, or add this simple JavaScript to clear it when the page loads:

document.addEventListener('DOMContentLoaded', function() {
  // This removes the pre-selected state
  const sizeRadios = document.querySelectorAll('.product-form__input input[type="radio"]');
  sizeRadios.forEach(radio => {
    radio.checked = false;
  });
});

About those double borders - it’s happening because you’ve got two 1px borders touching each other. The fix is pretty straightforward:

.product-form__input input[type="radio"] + label {
  /* Keep your existing CSS here */
  margin-right: -1px !important; /* This gets rid of the double borders */
  margin-bottom: -1px !important; /* Same for rows */
  position: relative; /* Needed for z-index */
}

/* These make sure the hover and selected states look good */
.product-form__input input[type="radio"] + label:hover {
  z-index: 1;
}

.product-form__input input[type="radio"]:checked + label {
  z-index: 2;
  border-color: #000 !important;
}

For connecting the buttons on desktop, there’s probably some whitespace in your HTML causing gaps. This CSS should fix it:

.product-form__input fieldset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  font-size: 0; /* This removes the space between inline elements */
}

/* Don't forget to reset font sizes */
.product-form__input fieldset legend {
  font-size: 16px;
}

.product-form__input input[type="radio"] + label {
  font-size: 14px;
}

I’ve tested similar code on other Shopify stores and it should make your buttons look just like in that reference image you shared.

Let me know if you need any help implementing this or if you run into any issues!

Cheers,

Shubham | Untechnickle

[crepscity]

Hi there,

Thank you for your quick response. Can you let me know where these codes go? Which file should I add them to?

[TheUntechnickle]

I should have been clearer about where to put these code snippets - my apologies for that!

Here’s exactly where each piece of code should go:

1. For the CSS code: Add it to your theme’s custom CSS section. In most Shopify themes, you can do this by:
   • Going to Online Store > Themes
   • Click “Customize” on your current theme
   • Look for “Theme settings” (usually at the bottom left)
   • Find “Custom CSS” (often under “Advanced” or “Additional” sections)
   • Paste all the CSS code there
2. For the JavaScript code: You have a couple of options:
   • Option 1 (easier): Go to Online Store > Themes > Edit code, then open the “Assets” folder and look for “theme.js”. Add the JavaScript code at the bottom of this file before the closing tags.
   • Option 2: Go to Online Store > Themes > Edit code, then open “Layout” folder and find “theme.liquid”. At the very bottom, just before the closing tag, add:

Shubham | Untechnickle

[crepscity]

The first two fixes worked perfectly, but the buttons on desktop still have gaps between them. On mobile, they are connected as expected, but on desktop, there are noticeable spaces. Do you have any other suggestions to fix this?

[TheUntechnickle]

Try this CSS:

.product-form__input input[type=“radio”] + label {
margin-right: -5px !important;

}

Cheers!
Shubham | Untechnickle

[crepscity]

This worked; however, I noticed that the last column size is bigger than the others on mobile version only and is not fully connected. Here is the image below.

[TheUntechnickle]

I’m not able to paste any code in this box, which is strange. I’ve DM’ed you the solution!

[crepscity]

Thank you for your help that code you sent worked. Everything looks perfect.

Have a great day!