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!

[Alimacl]

Great fix, thank you.

Is there an easy way to display it only on desktop? Or reduce the size/location of the text?

[Made4uo-Ribe]

Welcome! Are you the author of this post? the store will be the same to edit? 

[Alimacl]

No I have this store: https://wingback.co.uk/. Just found this post when looking for a solution.

[Made4uo-Ribe]

Oh, I see. try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 400px){
.product-card__quick-add-button span.sr-only {
    display: contents;
    color: black !important;
}

.product-card__quick-add-button svg.icon.icon-plus {
    display: none;
}
}

• And Save.
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Alimacl]

Thanks, but I'm afraid that one didn't seem to work. Still displaying the same size and placement.

[Made4uo-Ribe]

Please, add this one again.

@media only screen and (min-width: 400px){
.product-card__quick-add-button span.sr-only {
    display: contents !important;
    color: black !important;
}

.product-card__quick-add-button svg.icon.icon-plus {
    display: none !important;
}
}

And Save. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Alimacl]

I'm afraid it's still not working. Would it be possible to get you in to take a look please?

[Made4uo-Ribe]

Sorry, I dont access to the website which can be done only on the css. 

You try to paste on the theme.liquid. or in the custom css(not the code below it the code I already provide.) on the edit themes. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (min-width: 400px){
.product-card__quick-add-button span.sr-only {
    display: contents !important;
    color: black !important;
}

.product-card__quick-add-button svg.icon.icon-plus {
    display: none !important;
}
}
</style>

• And SaVE. 
• And which file did you paste the code? 
• I didnt see it on the theme.css. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Alimacl]

I removed it when it wasn't working. I've now added this code to the bottom of the theme.css:

.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;
}

@media only screen and (min-width: 400px){
.product-card__quick-add-button span.sr-only {
    display: contents !important;
    color: black !important;
}

.product-card__quick-add-button svg.icon.icon-plus {
    display: none !important;
}
}

And this to below the </body> tag in theme.liquid:

<style>
@media only screen and (min-width: 400px){
.product-card__quick-add-button span.sr-only {
    display: contents !important;
    color: black !important;
}

.product-card__quick-add-button svg.icon.icon-plus {
    display: none !important;
}
}
</style>

Still showing on mobile

[Made4uo-Ribe]

Oh, you add a lot of code. I didnt include the mobile screen cause if you have the Add to cart word on it this would be the result.

It will cover your product.  Did you try to remove the other code and use what I provide? 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Alimacl]

Ah, understood! I thought it was additional code, note replacement. Looks spot on with just this code at the bottom of the theme.css page:

@media only screen and (min-width: 400px){
.product-card__quick-add-button span.sr-only {
    display: contents !important;
    color: black !important;
}

.product-card__quick-add-button svg.icon.icon-plus {
    display: none !important;
}
}

Thank you for your help!

[Made4uo-Ribe]

Oh, that's from another store. It confused me. So, you've already seen the add-to-cart button, I guess, and the + sign remains on the smaller screen.

Welcome! Please don't forget to hit 'Like' on the post that helped you. Thanks!

[Alimacl]

Yes, the add to cart was always showing, just had trouble getting the "+" to display on mobile instead. Your code was perfect.