Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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
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
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
Could you provide me the exact code please?
Please let us know the theme name.
Then we can share the code according to the theme.
Thank you!
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
worked like a charm! Thank you.
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
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>
User | RANK |
---|---|
119 | |
87 | |
74 | |
64 | |
47 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022