Add to Chart /Basket instead of Select Options

Store Design
, , , , ,
1

Hello Shopify Community

I would like to write there Add to Chart /Basket instead of Select options, where can i change the codes ? or any update you suggest ?

url: zuschlafen.de

Zuschlafen_0-1676998178032.png
Zuschlafen_0-1676998178032.png287×481 89.7 KB

2

Hi @Zuschlafen ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/quick-add.css->paste below code at the bottom of the file:

.quick-add__submit {
  visibility: hidden;
}
.quick-add__submit:after {
  content:'Add to Chart'; 
  visibility: visible;
  display: block;
  position: absolute;
  padding: 15px;
  top: 3px;

}

PageFlyKate_0-1677011351985.png
PageFlyKate_0-1677011351985.png980×383 191 KB

Hope my answer will help you.

Kate from PageFly Team

3

Thank you for solution!

4

Hey @PageFly-Kate

I added the code, seems, it’s ok for desktop version but for mobile version, there is an issue. Would you check please. (text is not literally in the button box)

b1a3e1a5-6ff5-4009-9f8f-9cd4730842e4.jpg
b1a3e1a5-6ff5-4009-9f8f-9cd4730842e4.jpg946×2048 156 KB

5

Hi @Zuschlafen ,

You can add this code below, it will be compatible for both mobile and desktop:

@media (min-width: 768px){
.quick-add__submit {
  visibility: hidden;
}
.quick-add__submit:after {
  content:'Add to Chart'; 
  visibility: visible;
  display: block;
  position: absolute;
  padding: 15px;
  top: 3px;

}
}
@media (max-width: 767px){
.quick-add__submit {
  visibility: hidden;
}
.quick-add__submit:after {
  content:'Add to Chart'; 
  visibility: visible;
  display: block;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content:center;
}
}
6

same problem, now text is outside of box :disappointed_face:

7

Can you check again please, as you can see, this is my screen

PageFlyKate_0-1677092869380.png
PageFlyKate_0-1677092869380.png435×856 103 KB

8

Problem was on mobile device. But thanks for your help, i decided to move the button

9

Hey, how can I change the image size of the Collage section of Refresh Theme?
Also how to place the menu in centre and logo on left?