Quantity selector next to variant on homepage

[David257]

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

[ReturnPrime]

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]

https://lenski-test.myshopify.com/

PASS: lnsk

[ReturnPrime]

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]

Could you provide me the exact code please?

[ReturnPrime]

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

[David257]

Debut theme

[ReturnPrime]

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>

[AvadaCommerce · 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.

[David257]

worked like a charm! Thank you.

[Ollie]

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.