change the "add to cart" button on the image shown in collections page

[JaimePerez]

hi all

currently the "add to cart" button that appears in my collection page is grey and represents a bag which is not very visble neither encourage people to add to cart directly from the collections page (as you can see in image below highlighted in yellow)

I would like to change the icon shown on top of the image with the following instructions as per image below

1) icon in the bottom right corner of the image

2) a (+) sign instead of a bag as i have

3) with the store brand color which is #179EDA

[Simonsron]

Can you provide the address of your shop? If it is password protected, please provide the password.

[GemPages]

Hello @JaimePerez 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[PageFly-Richard · Accepted solution]

Hi @JaimePerez ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/style.scss->paste below code at the bottom of the file:

.single-product-wrap .product-image .product-action {
    justify-content: end !important;
}
.single-product-wrap .product-image .product-action a {
    border-radius: 50% !important;
    background: #179EDA !important;
}
.single-product-wrap .product-image .product-action a i:before {
    content: "\f067";
    color: #fff;
}

I hope it would help you
Best regards,

Richard | PageFly

[JaimePerez]

I do not have the file Asset->/style.scss but i do have the ones shown in image below

please confirm is it is typo and the file to be updated should be style.css instead

[PageFly-Richard]

Hi @JaimePerez ,

Sorry for the confusion here. It's a style.css file.

[chelux]

Is there a code to hide the default ATC button and overlay the product photo with a (+) icon in the bottom right corner in collection pages only. ORIGIN THEME 

Current buttons

 Want these