A user needed to reposition an “NHS Approved Supplier” logo to appear on the same line as the quantity selector on a product page, specifically wanting the layout: “Quantity” label → number selector → NHS logo (left to right).
Initial approach:
Solution provided:
display:flex; align-items:center; to the parent span elementorder property in theme.scss.css to control element positioning:
label.quantity-selector{order: 1;}.addToCartForm .js-qty{order: 2;}.addToCartForm span img{order: 3;}Outcome:
The issue was resolved successfully. The final implementation achieved the desired horizontal layout with all three elements properly aligned on the same line.
I want to put the “NHS Approved Supplier” logo on the same line as the quantity selector, to the right
How do I do this? Code below
{% if section.settings.product_quantity_enable %}
{% unless product.tile contains "Plinth Medical" %}
{% if product.tags contains "NHS" %}
{% endif %}
{% endunless %}
{% endif %}
@ChrisW3 - can you please share this page link?
1 - add css to span class above, so it becomes —
2 - add this css to the very end of theme.scss.css file
label.quantity-selector {order: 3;}
Did that:
I want the word “Quantity” on the left, then the number selector, then the NHS logo
So it looks something like this:
@ChrisW3 remove line ---- label.quantity-selector {order: 3;}
and add this
label.quantity-selector{order: 1;}
.addToCartForm .js-qty{order: 2;}
.addToCartForm span img{order: 3;}
