Shopify themes, liquid, logos, and UX
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!
Debut theme
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>
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
User | RANK |
---|---|
69 | |
61 | |
60 | |
48 | |
44 |
Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023