quick view eye vutton

Store Design

Topic summary

Issue: Remove or reposition the “Quick View” eye button on product cards for mobile.

Context:

  • Theme: Ella (Shopify). Site: mehqclo.com.
  • Goal: Hide on mobile or move icon to the left.

Proposed solutions:

  • CSS in component-card.css (via Online store → Themes → Actions → Edit code → Assets): add a mobile media query to shift the quick view icon horizontally (example used max-width:1024px and adjusted right position).
  • CSS in theme.css/base.css: hide the right-side group on small screens (max-width:800px) and reposition the quick view group to the left; also force button alignment with !important.

Current outcome:

  • Reporter says changes partially worked: right-side buttons moved, but the left-side button remains unchanged; later notes the fix didn’t work as intended.
  • Screenshots were shared showing the remaining issue.

Status: Unresolved/ongoing.

  • Further theme-specific selectors for Ella may be needed.
  • A preview link/password was requested for deeper review; only the live URL was provided so far.
Summarized with AI on December 15. AI used: gpt-5.
1

Untitled.png
Untitled.png668×303 30.4 KB

how

How can I remove this button from mobile or move it to the left side?
2

@abdullahmehdi Hello, I just wanted to confirm—are you currently using the Bella theme for your store? This will help me tailor my support more effectively. Thank you!.
and please share store url

3

Hello @abdullahmehdi
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component-card.css
add this code at the end of the file and save.

@media (max-width: 1024px) {
.card-quickview.show-mb .quickview-icon {
right: 16rem !important;
}
}

result

80.png
80.png430×820 108 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

hI @abdullahmehdi

if you can share your store preview link and password than I can help

5

https://mehqclo.com/

6

its ella theme

mehqclo.com

7

Hi @abdullahmehdi

You can easily achieve this by adding this CSS to you theme.css/ base.css file

  • Open the Theme
  • Click three dot and select code-editor
  • in search search for either theme.css or base.css
  • Past that CSS code
@media(max-width:800px){
    .card-product .card-product__wrapper .group-right { display: none; }
}

.card-product .card-product__wrapper .group-right { right: auto; left: 0; }
.card-product .card-product__wrapper .group-right .card-quickviewIcon button { right: 0 !important;}

If this Solution Works for you Kindly Like This and Mark This as a Solution

8

sssssssss.png
sssssssss.png388×645 61.3 KB

Thank you, but only the ones on the right are up and the left is still standing.

 

abdullahmehdi_1-1730999498743.png

9 
I did but it didn't work

 

abdullahmehdi_0-1731061072775.png