Hello, can someone give me the code to have the select size buttons under my products that is on this site (https://braveststudios.com)??
My site is https://royalsurge.shop
Password is BF25
Any help means a ton!
please! would be a big help!
I can’t fully replicate that code on the other site but I can create a suitable code for your store showing the sizes you want
Is that okay by you?
yes! As long as you can make it so you can select size and then add to cart thats all i need sir!
Please place the code here to help others!
Thanks, i’ll be waiting!
Yep, that’s totally possible right on Shopify — no external app needed.
You’d create a size selector under your product form using Liquid (pulling available variants) and a bit of CSS/JS to match the button style from Bravest Studios.
It just needs a few edits in your main-product.liquid (or product-form.liquid depending on your theme).
If you know where exactly to place the code i’ll provide, then i’ll send it in, but if you do not know where to place it, the check out flow will be affected.
@ExoticSouls
Basically, the fix is a little combo of HTML, CSS, and a lightweight JS script that hooks into your existing variant <select> element.
That keeps everything fully functional with Shopify’s system (so your add-to-cart still works, no broken logic).
Here’s the base snippet I’ve been using lately works smoothly across most modern themes
.variant-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0} .variant-btn{padding:10px 16px;border:1px solid #ddd;border-radius:6px;background:#fafafa; font-weight:600;text-transform:uppercase;cursor:pointer;transition:.2s} .variant-btn:hover{background:#eee} .variant-btn.active{background:#111;color:#fff;border-color:#111} .variant-btn.disabled{opacity:.5;cursor:not-allowed}It’s a pretty clean setup looks close to Bravest’s layout and still ties into Shopify’s variant logic without any fancy framework edits.
If anyone’s using a theme where the variant selector behaves differently (like Debutify or Dawn with dynamic rendering), it might need a small tweak in how the JS targets the select element I can help adjust that if needed.
Hi @Expertthub
Please use code tags to show code, and explain where to copy code.
On a side note, why do you need 3 posts actually to begin to help? You know it is against community rules to ask to reach a user “apart from the community”?
The whole reason is to help, and that solution stays visible, possibly helping many others in the future.
Thank you for clarifying that again.
@Laza_Binaery
Didn’t mean to break any community rules. I was just trying to make sure I understood the situation clearly before dropping a full code example.
I’ll make sure to format future replies properly with code tags and explain exactly where the snippet should go in the theme. Thanks for pointing that out!
And yep, all good and I’ll keep everything shared right here in the thread so it’s helpful for everyone.
/* Container for variant buttons */
.variant-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0;
}
/* Individual variant button */
.variant-btn {
padding: 10px 16px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fafafa;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Hover state */
.variant-btn:hover {
background: #eee;
}
/* Selected / active state /
.variant-btn.active {
background: #111; / Change to your brand color if needed */
color: #fff;
border-color: #111;
}
/* Disabled / sold-out state */
.variant-btn.disabled {
opacity: 0.5;
cursor: not-allowed;
}
I have a main-product.liquid. Whats the code to use?
where do i place this code?
Always check theme settings first for some specific feature; especially before commiting to a premium theme.
Show your work put in the effort, search first you might get lucky for a specific theme, https://community.shopify.com/search?q=select+variants+collection+page
Otherwise what your asking for is an advanced theme customization beyond the scope of the forums.
This isn’t just some slap in thing, to do it properly takes work.
Not even the “example” code that’s been given so is anywhere near complete.
If you can’t afford to invest in features properly , search the app store for an app with the needed feature.