ENVY Theme, change sale price color and change shape/size of color swatches

Highlighted
Tourist
15 0 1

hello

i am having some serious issues with the ENVY theme

i would like someone to please help me with these 2 big problems

1. how do i change the color of the sale price (i would like the sale price to be red instead of black)?

2. how do i change the size/shape of my color swatches? i would like to make them smaller and possibly circle in shape

please help me out!!!

thanks in advance

gautam

0 Likes
Highlighted

Hello TanyaJaiswal,
Please share your site url.
So that i can check and let you know the exact solution here.

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
15 0 1

hey there

my site url is

julystore.in

 

in shopify is july-store-kolkata.myshopify.com

 

hope that helps

tanya

0 Likes
Highlighted

Hello TanyaJaiswal,
2)To change the size/shape of color swatches.
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.indiv-product__swatches label {
    border-radius: 50%;
    height: 20px;
    width: 20px;
}
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
15 0 1

hello

thanks, that changed the shape of them on the collection page, but not on the product page specifically (on the product page it is still square).

I would actually like no swatches on the collection page, and only have them (in circle shape) on the individual product page.

is that possible?

thanks so much

tanya

0 Likes
Highlighted

Hello @TanyaJaiswal 

Changes related to product pages as per your requirement, changes looks like as attached screenshot please refer for reference.

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.swatches-wrapper .color.swatch-element label {
	border-radius: 50%;
	width: 35px !important;
	height: 35px !important;
	min-width: 30px !important;
	min-height: 30px !important;
}
.product-medias .sale-badge {
	background: #ff0000;
	color: #000;
	font-weight: bold;
}
.product-page--pricing--variant-price .money {
	color: #f00;
}

The Cowl Dress – July Store.jpg

Hope this will work for you

Thanks....

 

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
15 0 1

it

worked!

thank you very much for your help.

one more question, i would really like to have the swatches have a thin black outline/stroke on them

otherwise the white option just looks like a blank/empty space

thanks again for your help

tanya

0 Likes
Highlighted
Tourist
15 0 1

hello

the circles ended up working, but there is a small issue, for some of the colors, there is a small white area that appears at the bottom of the color swatch

 

Screen Shot 2020-08-05 at 7.13.06 PM.png

 

is there something that can be done about that?

and is there any way to make the stroke around the circles look a little cleaner, it looks very thick and heavy, even a little messy

thanks again in advance

 

0 Likes
Highlighted

Hello @TanyaJaiswal 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.swatches-wrapper .color.swatch-element label {
	background-size: auto !important;
}

Hope this will work for you

Thanks....

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes