FROM CACHE - en_header

how to get quantity selector and variant picker next to eachother?

Solved
tijs
Tourist
7 0 0
‎10-12-2023 01:26 PM

i want tot have the quantity selector next tot the variant picker like this:

Schermafbeelding 2023-10-12 192249.png

162 Views
0 Likes
Report
Accepted Solution (1)
In response to tijs
laddisahsi
Shopify Partner
336 35 38
‎10-13-2023 08:43 AM

This is an accepted solution.

@tijs 

Please add this code in body class

<body class="{% if template == 'product' %} {{ product.collection.first }} {% endif %}">

 

Then class will be added use that body class parent

.neckless .product variant-selects, .product-form__input.product-form__quantity {
    display: inline-block !important;
    vertical-align: top;
    width: 49%;
}
.neckless .product variant-selects .product-form__input.product-form__input--dropdown {
    max-width: 100% !important;
}




 

It will work only for that class

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!

View solution in original post

112 Views
Report
Replies 3 (3)
laddisahsi
Shopify Partner
336 35 38
‎10-13-2023 02:51 AM

Hi @tijs 

Please use this css

.product variant-selects, .product-form__input.product-form__quantity {
    display: inline-block !important;
    vertical-align: top;
    width: 49%;
}
.product variant-selects .product-form__input.product-form__input--dropdown {
    max-width: 100% !important;
}

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
132 Views
0 Likes
Report
In response to laddisahsi
tijs
Tourist
7 0 0
‎10-13-2023 08:38 AM

hi, this works but is there any possibility to only apply this to a certain product template? For example only applying this to my necklace collection?

115 Views
0 Likes
Report
In response to tijs
laddisahsi
Shopify Partner
336 35 38
‎10-13-2023 08:43 AM

This is an accepted solution.

@tijs 

Please add this code in body class

<body class="{% if template == 'product' %} {{ product.collection.first }} {% endif %}">

 

Then class will be added use that body class parent

.neckless .product variant-selects, .product-form__input.product-form__quantity {
    display: inline-block !important;
    vertical-align: top;
    width: 49%;
}
.neckless .product variant-selects .product-form__input.product-form__input--dropdown {
    max-width: 100% !important;
}




 

It will work only for that class

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
113 Views
Report
Community Browser

Community Blog Articles

Jasonh_0-1701799488302.png
Community Connect: November Recap

Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...

By Jasonh Dec 8, 2023
cropped-shutterstock_2285098703.jpg
Donations Before Discounts: The Greatest Incentive

Make the shift from discounts to donations, and witness your business not only thrive fina...

By Holly Dec 4, 2023
cropped-SYSO-okt23-GROW (1).png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
Terms of Service Privacy Policy