Put Size and Color side by side and remove dropdown option for Color Variant

glucinth
Explorer
61 1 11

Good day! May I ask for assistance on how can I put the Size and Color beside each other and remove the dropdown option for Color Variant? I am using DAWN THEME. Thank you!

 

CURRENT PREVIEW:

glucinth_1-1715471718963.png

 

WHAT I WANT TO ACHIEVE:

glucinth_2-1715471865996.png

 

Replies 7 (7)

PageFly-Henry
Astronaut
1081 311 263

Hi @glucinth 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

PageFlyHenry_0-1715481598588.png

 




<style>

variant-selects {

    display: flex !important;

}
</style>

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

glucinth
Explorer
61 1 11

Hello @PageFly-Henry, thank you the alignment worked! But would you know how can I remove the dropdown for the color variation? Similar output like this one below? 

 

glucinth_0-1715484689155.png

 

PageFly-Henry
Astronaut
1081 311 263

variant-selects svg {
display: none !important;
}

you can try this code

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

glucinth
Explorer
61 1 11

Hello. Where should I paste it? I tried to paste it under the other code it remove both the dropdown for size and color. If possible, I am aiming to remove the dropdown for color only and have a dropdown for size. Sorry.

 

glucinth_0-1715486501646.png

 

PageFly-Henry
Astronaut
1081 311 263

Could you share with me  the page URL?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

glucinth
Explorer
61 1 11

Hello, is it ok if I dm it to you? Thank you.

glucinth
Explorer
61 1 11

*bump* - I would really appreciate some help with this if someone could assist! Thank you!