How to move the compare tab to upper portion of my product cards

[IntechCarl]

Hi everyone!

Is there any way to move the position of my compare check box to upper left and make it smaller?

this is my store: https://kan7abddby8ipngr-13830324282.shopifypreview.com

The store that I want to copy:

[B2Bridge]

Hi @IntechCarl
I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code
2/ Search for “theme.liquid” file
3/ Open the file and search for tag and add the following code above tag
Here is the code for Step 3:

{% style %}
label.htc-addToCompare {
 position: absolute !important;
}
label.htc-addToCompare span.htc-checkmark {
 height: 15px!important;
 width: 15px!important;
}
label.htc-addToCompare span {
 font-size: 10px!important;
}
{% endstyle %}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you

[IntechCarl]

Hi! @B2Bridge Thank you it works, I just have a question. Is it possible to remove the border outside the text?

[IntechCarl]

@B2Bridge how can I adjust the position? See photo for reference:

[B2Bridge]

H i @IntechCarl
full code is:

{% style %}
label.htc-addToCompare {
 position: absolute !important;
 border: none !important;
}
label.htc-addToCompare span.htc-checkmark {
 height: 15px!important;
 width: 15px!important;
}
label.htc-addToCompare span {
 font-size: 10px!important;
}
{% endstyle %}

[B2Bridge]

Hi @IntechCarl
Please double check it, this is my view:

[B2Bridge]

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you so much!

[IntechCarl]

Hi! @B2Bridge this is what it displays on my end

[IntechCarl]

Hi @B2Bridge , yes it displays at the top left, but when you click the view all or you go to a certain collection it shows on the lower bottom.
see photo for reference

[DaisyVo]

HI @IntechCarl

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.collection.page-width .card-product-custom-div label.htc-addToCompare {
    top: -190px;
}
{% endstyle %}

Please let me know if it works. Thank you!Best,
Daisy - Avada Support Team.

[IntechCarl]

Hi @DaisyVo , it’s still positioned at the bottom. See photo for reference.

[DaisyVo]

Hi @IntechCarl

Try this code
Follow the steps as I noted above
Remember to add to the correct theme
You are sharing a link for a Draft theme, but if you add the code to a live theme, the edits will not work

{% style %}
div#ProductGridContainer li.grid__item label.htc-addToCompare {
    top: -284px !important;
}
{% endstyle %}

[IntechCarl]

@DaisyVo , It worked but how do I fix it on my mobile view? It’s overlapping in mobile mode

[DaisyVo]

HI @IntechCarl

This code works for mobile
You add this new code right after this section https://prnt.sc/hHP2YTs0-4r7

@media screen and (max-width: 768px){
div#ProductGridContainer li.grid__item label.htc-addToCompare {
    top: -180px !important;
}
}

[IntechCarl]

Hi @DaisyVo , your code works perfectly fine, but when I’m inside the results page it is overlapping with other product cards .this is what it looks like: