Product page buttons

Highlighted
New Member
15 0 0

Hi there! 

 

Is there a way to make my product page change from this: 

 

Schermafbeelding 2020-01-16 om 10.55.43.png

to this:

Schermafbeelding 2020-01-15 om 16.49.45.pngI am not referring to the color, but to the similar size of the buttons and the model, color and quantity inside the button.

0 Likes
Highlighted

Hello @markobo,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Highlighted

@markobo,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

#AddToCartForm--product-template .single-option-radio__label {
	position: absolute;
	left: 7px;
	top: 10px;
	color: #7433ff;
	font-weight: bold;
}
#AddToCartForm--product-template .single-option-selector-product-template {
	padding-left: 18%;
}
#AddToCartForm--product-template .product-single__quantity {
	background: #f6f6f6;
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}
#AddToCartForm--product-template .product-single__quantity {
	background: #f6f6f6;
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}
#AddToCartForm--product-template #Quantity {
	float: right;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
15 0 0

Schermafbeelding 2020-01-16 om 13.24.47.png

Thank you! It still looks different from the example I showed though. "Model" and "Color" are not in the buttons like in the example. "Quantity" has a weird color and is in a weird spot. And you can't see it on the example, but I'd like a little more space between the quantity and the "add to cart" button like this: 


Schermafbeelding 2020-01-16 om 13.28.19.png

Basically I want mine to look exactly the same except the color.

0 Likes
Highlighted

@markobo,

Add below css

#AddToCartForm--product-template .radio-wrapper.js.product-form__item {
	position: relative;
}
.product-single__quantity-label.js-quantity-selector {
float: left;
margin-left: 2%;
margin-top: 7px;
color: #7433ff;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
15 0 0

now it looks like this... I'm not sure if it's possible then, but I just want mine to look exactly like the one in the example
Schermafbeelding 2020-01-16 om 14.17.22.png

0 Likes
Highlighted

@markobo,

I think you removed my code that's why its look like that.

Please add my code once

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
15 0 0

Thanks for your effort! We're getting closer, but not completely there yet. 

 

Schermafbeelding 2020-01-19 om 09.32.59.png

 

As you see the dash overlaps with iPhone. Like in the example, I want "iPhone" and "Black" to move with the dash. Because I have more products on the store I want it to look good everywhere. I want it to adjust automatically like in the example. Apart from that I want "Quantity" to be have the same font and color as "Color" and "Model". And as you see the "1" is in the wrong place. I'll add a link of the example website I am referring to: https://theprivyco.com/ If you scroll down you can see what I mean. 

 

I want to get rid of this too: Schermafbeelding 2020-01-19 om 09.42.18.png

The whole button should be selected and not just the "1".

 

And the last thing. Like in the example I want more space between the quantity and add to cart button. 

 

Thanks for your patience. 

 

 

0 Likes