I have a client who wants to change the appearance of the Quantity Selector in their site. They're currently using the theme: Blockshop 5.5.3 (Design and support by Troop Themes)
Currently, the quantity selector's appearance is like this:
but they want to change it into this:
The codes for their quantity selector are the ff:
--- HTML ---
<div class="quantity">
<label for="quantity">{{ 'products.quantity' | t }}</label>
<input id="quantity" type="number" name="quantity" min="1" value="1" />
</div>--- CSS ---
.template-product article .quanity-cart-row .quantity {
/* margin-right: 22px; */
margin-right: 0;
max-width: 60px;
display:inline-block;
vertical-align:middle;
}
.template-product article .quanity-cart-row .quantity input {
margin: 0;
}
.quantity label {
font-size: 12px !important;
}
.quantity input {
font-size: 12px !important;
}
Do I only have to change the CSS style of this? Or are there any more lines of code I need to add in order for it to function properly?
Is there any tutorial on how to change the appearance of the quantity selector everywhere specifically for the Blockshop theme? I'm still new in Shopify and still in the process of learning Liquid programming. I tried visiting the site of the developer/author of the theme but I haven't found any tutorials there. I'm really hoping that someone would kindly help me with this. Thank you.
