Quantity selector next to variant on homepage

Solved
David257
Shopify Partner
44 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)
AvadaCommerce
Shopify Partner
3879 839 892

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.

View solution in original post

Replies 10 (10)
ReturnPrime
Shopify Partner
412 58 99

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
44 0 4
ReturnPrime
Shopify Partner
412 58 99

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
44 0 4

Could you provide me the exact code please?

 

ReturnPrime
Shopify Partner
412 58 99

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

David257
Shopify Partner
44 0 4

Debut theme

ReturnPrime
Shopify Partner
412 58 99

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
Shopify Partner
3879 839 892

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.

David257
Shopify Partner
44 0 4

worked like a charm! Thank you.

Ollie
Shopify Staff
Shopify Staff
1937 417 331

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