Re: Change format of product quick add for craft theme

Solved

Change format of product quick add for craft theme

caleo2024
Tourist
8 0 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

 

 

Accepted Solutions (2)
PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

 

 

This is Noah from PageFly - Shopify Page Builder App

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

 

<style>
.card__content .quick-add{
position: absolute !important;
    right: 0 !important;
    top: 190px !important;
    z-index: 99 !important;
}
.card__content .quick-add .button::before {
  content: "+" !important;
  font-size: 20px !important;
  font-weight: bold !important;
}
.card__content .quick-add .button span {
  display: none !important;
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Arif_Shopidevs
Shopify Partner
141 18 14

This is an accepted solution.

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

Hope this helps you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Replies 10 (10)

PageFly-Noah
Shopify Partner
1317 233 268

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

caleo2024
Tourist
8 0 1
PageFly-Noah
Shopify Partner
1317 233 268

This is an accepted solution.

 

 

This is Noah from PageFly - Shopify Page Builder App

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

 

<style>
.card__content .quick-add{
position: absolute !important;
    right: 0 !important;
    top: 190px !important;
    z-index: 99 !important;
}
.card__content .quick-add .button::before {
  content: "+" !important;
  font-size: 20px !important;
  font-weight: bold !important;
}
.card__content .quick-add .button span {
  display: none !important;
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

caleo2024
Tourist
8 0 1

Thank you much! Works perfectly!

PageFly-Noah
Shopify Partner
1317 233 268

Thank you , Have a nice day 😉!

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Arif_Shopidevs
Shopify Partner
141 18 14

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

 

Thank you from ShopiDevs

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
Arif_Shopidevs
Shopify Partner
141 18 14

This is an accepted solution.

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

Hope this helps you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
caleo2024
Tourist
8 0 1

Amazing thank you, that was my next question!! 🙂

Arif_Shopidevs
Shopify Partner
141 18 14

Glad your next question is solved early 😀. Do not forget to like the answer 🙂

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
caleo2024
Tourist
8 0 1

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!!