Prestige theme: how do I replace the + sign with an Add to Cart button?

[litlsugarcookie]

On my collection pages I'm using the default "+" plus sign to enable a customer to add to cart, but I'd like to replace this with the default Add to Cart button that's already shown on product detail pages. Does anyone know how to go about this? Here's an example where all the products show a plus sign instead of add to cart: https://fraisela.com/collections/all

[PaulNewton]

🤣

[PaulNewton]

Hi @litlsugarcookie 👋 In general to can get more focused responses you must provide inspectable urls of your work so far not just reference examples.

Read:  https://community.shopify.com/c/blog/how-to-get-support-from-the-community/ba-p/1399408 

If both icons for a theme are svg and are assets a slapdash fix is to just put the cart-icon svg code into the relative plus-icon.liquid snippet, IF a theme uses such a structure or similar names.

Otherwise it's an advanced customization to go in find the right snippets, swap the icons around or create new icons, then style them in their new context.

If you need this customization then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Good Luck.

[Made4uo-Ribe]

Hi @litlsugarcookie 

Do you like to stay the hover and animation? You just like to change the + sign to add to cart? I did check your store it have a add to cart but its hidden, Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.product-card__quick-add-button span.sr-only {
    visibility: visible;
    position: revert;
}
.product-card__quick-add-button svg.icon.icon-plus {
    display: none;
}
.product-card__quick-add-button {
    inset-block-end: 2rem;
}

And Save. 

Result:

It will show on hover. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!