Quick view Eye Icon

Solved
Natalicioussss1
New Member
8 0 0

Hi,

 

I'm building a store using Minimal Theme. I have added Quick View by Secomapp and works fine but the quick view button looks a bit ugly on every product. I would like to replace "quick view" text with an eye icon. The app doesn't give that option so I tried to work a little bit with css. But I can't seem to make it! Any suggestions?

Thank you in advance,
Natalia.

Accepted Solution (1)

Accepted Solutions
SWSolutions
Trailblazer
203 27 54

This is an accepted solution.

Try -

Edit your theme file from admin panel and open the theme.scss file .

Add the give code bottom in theme.scss file.

Code-

a.sca-qv-button {
font-size: 0px !important;
left: 66% !important;
}
a.sca-qv-button:before {
content: "\f06e";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 23px;
}

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com

View solution in original post

Replies 8 (8)
SWSolutions
Trailblazer
203 27 54

Could you share your shop url?

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
Natalicioussss1
New Member
8 0 0
SWSolutions
Trailblazer
203 27 54

Hi,

Edit your theme file from admin panel.

Open the theme.liquid file and add the given link in head tag section.

Link-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

And replace the Quick view with <i class="fa fa-eye"></i> 

 

Thanks,

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
Natalicioussss1
New Member
8 0 0

Thanks for the fast reply!

I followed the steps but there is no eye icon. I added <i class="fa fa-eye"></i> in the app where it used to say"quick view". And the text has changed into "<i class="fa fa-eye"></i>".

Should I add this somewhere in the code instead?

SWSolutions
Trailblazer
203 27 54

This is an accepted solution.

Try -

Edit your theme file from admin panel and open the theme.scss file .

Add the give code bottom in theme.scss file.

Code-

a.sca-qv-button {
font-size: 0px !important;
left: 66% !important;
}
a.sca-qv-button:before {
content: "\f06e";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 23px;
}

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
Natalicioussss1
New Member
8 0 0

It worked!!

I will have to play around with the code just a bit to place it on the top left and perhaps change the color. 

Excellent service! 

Thank you!

NinaVandos
New Member
4 0 0

I would suggest you too go with a third party ecommerce solution as well, instead of waiting for Shopify to introduce this feature, which frankly, sellers have been asking for a long time. (You can look at other names to decide which ecommerce solution is the right pick for your business and goals.)  

made4Uo
Shopify Partner
833 89 141

Hi,

 

Just want to share this quick view product code without using any app or library. Please check the Demo store provide. 

✿✿✿-If this helps, please Accept as Solution✌-✿✿✿
Need help? Custom edits?
Just visit me at my ☏ website and check my codes for as low as $7 custom sections and snippets.
I can write a code for you as well.