Change format of product quick add for craft theme

Store Design
, , ,

Topic summary

A user requested help repositioning the ‘Add to Cart’ button on product cards in the Craft theme—specifically, moving it from below the price to a white square with a black ‘+’ icon overlaid on the product image corner.

Solution Provided:

  • Two developers offered CSS code snippets to display a ‘+’ icon permanently on product cards
  • The solution successfully implemented the desired visual change

Follow-up Issues:

  • The ‘+’ icon appears too low on mobile view (desktop positioning is acceptable)
  • User wants to change ‘Choose Options’ text to just ‘Options’ with smaller font size on both desktop and mobile

These additional customization requests remain unresolved. A separate user also requested similar quick-add functionality for the same theme, but received no response yet.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’d like to amend the product quick add from the ‘add to cart’ button below the price to a ‘+’ on the corner of the image (I’d like a square white box with a black cross)
Can anyone please help me with the code for this change?

Image to explain:

Screenshot 2024-05-13 105253.png
Screenshot 2024-05-13 105253.png257×436 90.2 KB

2

This is Noah from PageFly - Shopify Page Builder App

I can help you. Please can you provide the website url. Thank you.

Best regards,

Noah | PageFly

3

Hello, Will you please share your store URL. also provide the password if it was password protected.

Thank you from ShopiDevs

4

https://d47853-4.myshopify.com/
pw thauts

5

This is Noah from PageFly - Shopify Page Builder App

Thank you , please add code here in file theme.liquid and above tag :

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

6

Hi @caleo2024
If you want to show the icon all time use this css

.card__content .quick-add .button::before {
    content: "+" !important;
    font-size: 20px !important;
    font-weight: bold !important;
    transform: translateY(0) !important;
    z-index: 999 !important;
}

13-05-2024-card.png
13-05-2024-card.png1207×325 257 KB

Hope this helps you

1 Like
7

Amazing thank you, that was my next question!! :slightly_smiling_face:

8

Thank you much! Works perfectly!

1 Like
9

Thank you , Have a nice day :wink: !

10

Glad your next question is solved early :grinning_face: . Do not forget to like the answer :slightly_smiling_face:

1 Like
11

Hi again,

I’ve just noticed on mobile view the quick add cross seems to be too low - is there a way to make that position higher on mobile only (desktop is fine)

Also is there a way to make the words ‘choose options’ just say ‘options’ and make this font smaller on both desktop and mobile?

Thanks so much!!

12

Can you please help me add the quick add to my Shopify products? Same theme.