FROM CACHE - en_header

Quantity selector next to variant on homepage

Solved
David257
Shopify Partner
29 0 4

Hi I would like to move the quantity selector next to the variant box

Immagine 2022-03-31 140920.jpg

Accepted Solution (1)

Accepted Solutions
AvadaCommerce
Shopify Partner
3878 834 735

This is an accepted solution.

Hi @David257 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

@media (min-width: 1200px) {
#shopify-section-16486666832da29434 .selector-wrapper {
    max-width: calc(100% - 100px);
}
#shopify-section-16486666832da29434 select + .product-form__controls-group {
    position: relative;
}
#shopify-section-16486666832da29434 select + .product-form__controls-group .product-form__item {
    position: absolute;
    right: 0;
    top: -81px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

View solution in original post

Replies 10 (10)
ReturnPrime
Navigator
374 45 74

Hey @David257 , 

Welcome to the Shopify community!
Please share your store URL.
So that we will check and let you know the solution here.
Raman
Return Prime

David257
Shopify Partner
29 0 4
ReturnPrime
Navigator
374 45 74

Hey @David257 , 
You can wrap both the selector inside a div & use flexbox to make them fit in one line.
Thank you.

Raman
Return Prime

David257
Shopify Partner
29 0 4

Could you provide me the exact code please?

 

ReturnPrime
Navigator
374 45 74

Please let us know the theme name. 
Then we can share the code according to the theme.
Thank you!

David257
Shopify Partner
29 0 4

Debut theme

AvadaCommerce
Shopify Partner
3878 834 735

This is an accepted solution.

Hi @David257 ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

@media (min-width: 1200px) {
#shopify-section-16486666832da29434 .selector-wrapper {
    max-width: calc(100% - 100px);
}
#shopify-section-16486666832da29434 select + .product-form__controls-group {
    position: relative;
}
#shopify-section-16486666832da29434 select + .product-form__controls-group .product-form__item {
    position: absolute;
    right: 0;
    top: -81px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

David257
Shopify Partner
29 0 4

worked like a charm! Thank you.

Ollie
Shopify Staff
Shopify Staff
1144 163 204

Hey @David257.

 

Thanks for reaching out.

 

If the above solution worked for you, be sure to mark their post as a solution to let others know that may view the thread. 

 

I came across this post and wanted to add that since the Debut theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal team to make the corresponding changes on your behalf. It's a great benefit of using a Shopify theme!

 

If you are interested in using the design time, you will need to login to your store using our Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor about the changes you would like to make.

 

Let me know if you have any questions.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ReturnPrime
Navigator
374 45 74

Hey @David257 ,
Hope this code will help.
Go to product.liquid  => Paste this code 

              <div class="product-form__controls-group">
                {% unless product.has_only_default_variant %}
                {% for option in product.options_with_values %}
                  <div class="selector-wrapper js product-form__item">
                    <label for="SingleOptionSelector-{{ forloop.index0 }}">
                      {{ option.name }}
                    </label>
                    <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      id="SingleOptionSelector-{{ forloop.index0 }}"
                      data-index="option{{ forloop.index }}"
                    >
                      {% for value in option.values %}
                        <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endfor %}
                {% endunless %}
               {% if section.settings.show_quantity_selector %}
                <div class="product-form__item selector-wrapper js">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
                 {% endif %}
              </div>