How to change the appearance of Quantity Selector in Blockshop theme?

annabeth_chase
Excursionist
15 0 2

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:
sc1.png

but they want to change it into this:

sc2.png

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.

 

Novice Web Developer & Designer | Game Developer | Art Enthusiast
0 Likes
Pallavi
Shopify Expert
678 83 88

Hello There, 

 

Kindly check the below given link to change the quantity box. 

https://get.foundation/building-blocks/blocks/plus-minus-input.html

 

If you want me to assist you in making changes then kindly DM me so that I can assist you further in working on it. 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
aning
New Member
1 0 0

@Pallavi 

Need help on this please. Do I just copy the HTML code and paste it on which section? I'm using Minimal theme please.

 

Thanks

0 Likes