change button text size on homepage but not on product page [supply theme]

ImDedi
Explorer
69 1 20

Hi guys!

I recently got an "add to cart" button added to my homepage.

I would like to change the sizeing of this button and the text & colour of the text.

Is there anyway to do this without this change happening to my product pages as well?

my website address is https://imdedi.com

Capture.PNGwhite.PNG

 

dmwwebartisan
Shopify Partner
5699 1303 1669

@ImDedi 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.template-index #addToCartForm-collection-row-1 ..btn--add-to-cart{
color: #fff !important;
height:47px !important;
width: 212px !important;
}

 

Hope this helps. Your button showing the">" symbol. For this, you have to check the button HTML in liquid files and remove that extra ">".

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ImDedi
Explorer
69 1 20

@dmwwebartisan hi

 

this didnt work sadly

 

ImDedi_0-1618554178916.png

 

dmwwebartisan
Shopify Partner
5699 1303 1669

@ImDedi 

There was a mistake in the above code. Please add this new code instead.

.template-index #addToCartForm-collection-row-1 .btn--add-to-cart{
color: #fff !important;
height:47px !important;
width: 212px !important;
}

 

Let me know if this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ImDedi
Explorer
69 1 20

I have added this code 

This made row 1 & 3 work... one of the rows are still like it was before... and the text doesn't fit the button.

@dmwwebartisan Do you know how to fix it?

 

.template-index #addToCartForm-collection-row-1  .btn--add-to-cart{
color: #fff !important;
height:47px !important;
width: 212px !important;
}

.template-index #addToCartForm-collection-row-2  .btn--add-to-cart{
color: #fff !important;
height:47px !important;
width: 212px !important;
}
.template-index #addToCartForm-collection-row-4  .btn--add-to-cart{
color: #fff !important;
height:47px !important;
width: 212px !important;
}

 

 

dmwwebartisan
Shopify Partner
5699 1303 1669

@ImDedi 

Instead of row-4. Replace with the following code.

.template-index #addToCart-1617795625c69db019 .btn--add-to-cart{
color: #fff !important;
height:47px !important;
width: 212px !important;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
ImDedi
Explorer
69 1 20

@dmwwebartisan Still the same issue

 

ImDedi_0-1618558705516.png

 

0 Likes