Change Quick View Button Text/Icon

Hi there,

Just had two quick questions about the Quick View feature in the e-shop. I'm using the Brine Template (non-updated version).

1. Is it possible at all to change the text on the "Quick View" button to another text like "Preview" or something? 

2. As another option can the entire button change to my own button icon?

Thanks in advanced!

Yes. You can. Can you share link to shop page?

Hi tuanphan,

Thanks for your quick reply!

Sorry for asking, do you absolutely need to access the shop page? I'd prefer to not show it if I don't need to as I have new product on here.

If you don't share url, I need to create a demo site, upload a product, and then check it out. It is very time consuming.

I'd like to know this too. Here's a shop page, thanks. 

https://olddognewsaxophones.com/alto

17 hours ago, cherylr said:

I'd like to know this too. Here's a shop page, thanks. 

https://olddognewsaxophones.com/alto

It seems you solved with this CSS

span.sqs-product-quick-view-button:after {
    visibility: visible;
    content: "click for more info";
    background: #fff;
    color: #100f43;
    padding: 10px 20px;
    border-radius: 5px;
}

Where was this CSS embedded? Thank you in advanced

@tuanphan Hi, do you know how I can hide the SS Quick View button so I can use the above css instead?

Thank you!

1 hour ago, sandracheesman said:

@tuanphan Hi, do you know how I can hide the SS Quick View button so I can use the above css instead?

Thank you!

To hide quick view, add to Home > Design > Custom CSS

.sqs-product-quick-view-button-wrapper {
    display: none !important;
}

@tuanphan Thank you but unfortunately that hides the Squarespace quick view button completely including the CSS new button that I am using from above:

span.sqs-product-quick-view-button:after {
    visibility: visible;
    content: "click for more info";
    background: #fff;
    color: #100f43;
    padding: 10px 20px;
    border-radius: 5px;
}

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button:after {
    visibility: visible;
    content: "click for more info";
    background: #fff;
    color: #100f43;
    padding: 10px 20px;
    border-radius: 5px;
}

is it possible to centre the button, as in my block over the image click for more in fo is right side of the image

On 2/24/2021 at 8:15 PM, Ejderha said:

is it possible to centre the button, as in my block over the image click for more in fo is right side of the image

can you share site url? We can check easier

@tuanphan I have the same question as Ejderha about centering the altered 'QUICK VIEW' button in the image.
Site: www.hamsub.club
Temp Password: abc123

5 hours ago, PastaRodriguez said:

@tuanphan I have the same question as Ejderha about centering the altered 'QUICK VIEW' button in the image.
Site: www.hamsub.club
Temp Password: abc123

Hi. Can you enable quick view?

@tuanphan Quick View is enable, but I currently have this code altering it:
 

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button:after {
  visibility: visible;
  content: "QUICK VIEW";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}

Just to be clear, I'm referring to the 3 products on the home page. I can remove this code if you need me to. With the above code I'm able to style it how I want, but doing so shifted the button off-center.

I was able to solve the centering on my site. The :after is causing the button to move to the right, "after" where the original button was. @PastaRodriguez in your case it would look like this instead to fix the centering:

.sqs-product-quick-view-button-wrapper .sqs-product-quick-view-button {
  visibility: visible;
  content: "QUICK VIEW";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}

@tuanphan The CSS you provided is making the Quick View button off centre for me. I tried removing the ':after' but that makes the button disappear all together. Could you please help?

https://heron-helix-4csn.squarespace.com/
Password: 'TEST'

On 4/29/2022 at 2:24 PM, IndiahSaunders said:

@tuanphan The CSS you provided is making the Quick View button off centre for me. I tried removing the ':after' but that makes the button disappear all together. Could you please help?

https://heron-helix-4csn.squarespace.com/
Password: 'TEST'

Can you enable quick view? We can check easier

I'm having the same issue  Im trying to change the QUICK VIEW text to MORE INFORMATION on the uttons in the product summary blocks. Can you take a look here > https://everumbaughart.squarespace.com/ethereal-collection

I tried this code fro the above example: but when I change the content id it still reverts to QUICK VIEW. Notice! I removed the :after to center align the button in your code (amended)

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button {
  visibility: visible;
  content: "MORE INFORMATION";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}

On 12/16/2022 at 9:56 PM, musbkc said:

I'm having the same issue  Im trying to change the QUICK VIEW text to MORE INFORMATION on the uttons in the product summary blocks. Can you take a look here > https://everumbaughart.squarespace.com/ethereal-collection

I tried this code fro the above example: but when I change the content id it still reverts to QUICK VIEW. Notice! I removed the :after to center align the button in your code (amended)

span.sqs-product-quick-view-button {
    visibility: hidden;
}
span.sqs-product-quick-view-button {
  visibility: visible;
  content: "MORE INFORMATION";
  background: #FFD600;
  font-family: 'Futura';
  font-weight: 800;
  color: #EA0029;
  padding: 10px 20px;
  border-radius: 5px;
}

What is password?