How to move quick view button higher on collection pages?

[Jervise]

Hello, does anyone know how to move quick view button on products in collection pages a little higher please ?

[biznazz101]

Could you please provide your Shopify store URL. Will take a look.

Thanks!
@biznazz101 

[Jervise]

https://63fo165psr3wh01m-69448696085.shopifypreview.com

thanks

[biznazz101]

You can try this.

Go to Themes> "..."> Edit Code> base.css (theme.css if this file isn't available)

Then add this code at the bottom and save:

.product-item__hoverless-quick-view-button.btn {
  bottom: 0;
  right: 0;
  padding: 8px;
  padding: var(--spacing-2);
  min-width: 0;
  min-height: 0;
  z-index: 2;
}

It should look like this when finished:

I hope that works for you!
@biznazz101 

[Jervise]

will try now, thanks much

[Jervise]

i added code to theme.css but nothing changed

[Jervise]

in your screen shot i see that you have add to compare twice

[biznazz101 · Accepted solution]

Yes it is only showing once in your store currently. try adding this instead to theme.css:

button.product-item__hoverless-quick-view-button.btn
{ bottom: 0;
  right: 0;
  padding: 8px;
  padding: var(--spacing-2);
  min-width: 0;
  min-height: 0;
  z-index: 2;
}

Otherwise you can try going to Themes> Customize> Collection Template> Product Grid> Custom CSS

then add the code from my above and click Save.


If this does not work let me know I can request access to the store and do it for you. Thanks!
@biznazz101 

[Jervise]

nothing happened

[Jervise]

it did not work out

[biznazz101]

Okay please direct message me @biznazz101 your stores 4-digit access code I will request access to the store (it will appear under your notifications, bell icon), once approved I will fix the button for you.

To find this code go to Settings> Users & Permissions> Collaborators

Thank you!

[Jervise]

thanks much