Debut Theme customization for Qty Button and Image with Text font

Solved
Excursionist
14 0 2

Hi All,

Sorry, its me again. I have a couple more problems. I search the forum and found a way to amend the quantity button to have the arrows to adjust the numbers which was what I wanted. But it lead to other problems:

 

1)

BeforeBeforeAfterAfterin the cartin the cart

As shown in the before and after photos. The font changed and the outline of the box was gone. I would prefer the old font and box outline.  As for the cart, I would like to have similar buttons with the "+" & "-". Is it possible?

 

2) I have received help in another post to adjust the image at the image with text portion but after reducing the image size, I notice the spacing with the text is a little wide. Was told that I need to adjust some css codes. I probably should reply to that post again but since I have other problems, I thought I would upload a new one altogether.

indent.jpg

URL: https://rainscraftybits.com

PW: chizao

 

Thank you for reading. All help appreciated, I mean 0 coding knowledge here so, really. Thanks a lot.

0 Likes
Highlighted

Success.

Shopify Expert
2902 497 665

Hi @ladyrain 

Good to see you again here

 

1.The font changed and the outline of the box was gone. I would prefer the old font and box outline.

-Add this css:

.qtybox{border: 1px solid #747a7b;}

Remove bellow css form 

.qtydiv label {
    display: block;
    margin-bottom: 12px;
    letter-spacing: 2.8px;
    color: #747a7b;
}

Remove this

 letter-spacing: 2.8px; 
 color: #747a7b;

Add this new css:

.qtydiv .btnqty.qtyplus { margin-right: 8px;}

2. would like to have similar buttons with the "+" & "-". Is it possible?

-For that you have to add same qty code in section->cart-template.liquid file. but for that you need some code knowledge.

 

3. I have received help in another post to adjust the image at the image with text portion but after reducing the image size, I notice the spacing with the text is a little wide. Was told that I need to adjust some css codes. I probably should reply to that post again but since I have other problems, I thought I would upload a new one altogether.

.feature-row .feature-row__text--left{    padding-left: 0;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
14 0 2

Hi Jasoliya,

Where should i add these codes? for part 1 is it at product-template.liquid? then part 3 is at theme.scss.liquid?

0 Likes
Highlighted
Excursionist
14 0 2

my update for now...

 

I played with the theme.scss.liquid for the first part and seem and it worked. customized line by line actually and played with the paddings etc.

but the alignment does not seem to be the same in mobile mode? just a slight difference in the alignment compared to desktop.

 

also the 3rd part problem is solved in the theme.scss.liquid at the bottom. not sure if its the right place since i'm just guessing but if the result is reflected, I guess it right? however, there is a difference while viewing in the middle mode, not mobile? its odd. desktop mode was perfect (the option to view on the right)

0 Likes
Highlighted

Success.

Shopify Expert
2902 497 665

Tyr to add this css in asset->theme.scss file at bottom:

@media only screen and (max-width: 767px) {
    .qtydiv .btnqty.qtyminus{margin-left: 8px;}
    .qtydiv .btnqty.qtyplus{margin-right: 8px;}
}

@media only screen and (min-width:744px) and (max-width:1024px){
    .feature-row .feature-row__text--left {padding-left: 20px;}
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
14 0 2

update:

woohoo... the image with text portion is solved....

 

still working on the qty alignment...

0 Likes
Highlighted
Excursionist
14 0 2

1st.jpg2nd.jpg3rd.jpg

tried playing with various numbers... but left with the 3rd view being off now?

 

would the following help in telling where the issue is? 

.qtybox {border: 1.2px solid #949494;}
.qtydiv label{display: block;margin-bottom: 5px}
.qtydiv .btnqty{display: inline-block;cursor: pointer;user-select: none;font-size: 25px; padding: 3px; line-height: 5px;}
.qtydiv .btnqty.qtyminus{margin-right: 0px;}
.qtydiv .btnqty.qtyplus{margin-left: 0px;}
.qtydiv .quantity-input{border: none;border: none;padding: 8px;text-align: center;width: 50px;outline: none;display: inline-block;}
.qtydiv {display: inline-block;padding-left: 0px;padding-top: 10px;padding-bottom: 8px}
.feature-row .feature-row__text--left{    padding-left: 0;}
@media only screen and (max-width:767px) {
    .qtydiv .btnqty.qtyminus{margin-left: 0px;}
    .qtydiv .btnqty.qtyplus{margin-right: 0px;}
}
@media only screen and (min-width:744px) and (max-width:1024px){
    .feature-row .feature-row__text--left {padding-left: 20px;}
}
0 Likes
Highlighted
Shopify Expert
2902 497 665

Dont know what code you have changed but using below code they remove space from + and - in mobile.

@media only screen and (max-width:767px) {
    .qtydiv .btnqty.qtyminus{margin-left: 0px;}
    .qtydiv .btnqty.qtyplus{margin-right: 0px;}
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Excursionist
14 0 2

perhaps I should leave it... since the mobile and the desktop seems fine...?

0 Likes
Highlighted
Shopify Expert
2902 497 665

Add this css:

.qtydiv .btnqty.qtyminus{margin-left: 8px;}
.qtydiv .btnqty.qtyplus{margin-right: 8px;}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes