Shopify themes, liquid, logos, and UX
Hi everybody,
I need help to fix 3 things that can be seen on the image attached
The store URL is
https://freezyec.com/collections/guarniciones
I'd really appreciate some help.
Regards,
Solved! Go to the solution
This is an accepted solution.
Thanks for post.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid__item--collection-template { margin-bottom: 30px; .product-card__title { min-height: 50px; display: block; } form { text-align: center; } .btn { margin-top: 10px; } }
Hey @Aisaacs90
add code assets/theme.scss.liquid bottom of the file
.product-card .product-card {height: 232px;} .product-card .btn {justify-content: center;display: flex; margin: 18px auto;} @media screen and (max-width: 749px){ .product-card .product-card {height: 180px;} }
I Hope this will work for you.
Thanks!
Thanks for the reply, but your solution didn't work thou.
This is an accepted solution.
Thanks for post.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.grid__item--collection-template { margin-bottom: 30px; .product-card__title { min-height: 50px; display: block; } form { text-align: center; } .btn { margin-top: 10px; } }
This was perfect, it solved the 3 problems I had.
I'm really grateful!
Hi,
If I also want to apply the same changes (text boxs aligned, add to cart button centered and spaced between quantity and button) to the collection shown on homepage what would I need to change in the coding?
Hey @Aisaacs90
add code assets/theme.scss.liquid bottom of the file
@media only screen and (min-width: 750px){ .btn {margin-bottom: 20px !important; margin-top: 20px;} } form { text-align: center; }
Hope this will work for you.
Thanks!
Thanks for answering!
Your code helped me, only thing missing is that the offer sign is misalingning the text boxs and add to cart buttons in some items.
Know how to fix this?
HI @Aisaacs90
Please try this code . add code assets/theme.scss.liquid bottom of the file
@media only screen and (max-width:768px) { .grid__item--collection-template .product-card__title { min-height: 22px; display: block; }
.btn {margin-bottom: 20px !important; margin-top: 20px;} }
Hope this will work for you.
Thanks!
It solved the mobile issue.
Only thing remaining is that because of the discount red label and when product's name is large, some items tend to move a bit and are not aligned.
It happens on computer and cellphone screen.
Hey @Aisaacs90
add code assets/theme.scss.liquid bottom of the file
#Collection.grid-view-item {max-height: 265px;} @media only screen and (max-width:768px) { #Collection.grid-view-item {max-height: 180px;} }
Hope this will work for you.
Thanks!
@dmwwebartisan unfortunately it didn't work 😞
Do I have to delete any of the previous codes you provided me?
I have copied them all at the end as you said me, but the last one didn't make any change.
Thanks for details
We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?
@KetanKumar thanks for your concern!
I'm using google chrome (desktop) and mobile on android.
The remaining problem is that it is not aligned.
Hello @Aisaacs90
Please try this
Hey @Aisaacs90
add code assets/theme.scss.liquid bottom of the file
#Collection .grid-view-item {max-height: 265px;} @media only screen and (max-width:768px) { #Collection .grid-view-item {max-height: 180px;} }
Hope this will work for you.
Thanks!
@dmwwebartisan it didn't work either.
It is still not aligned.
I think it is mostly because of the discount red label.
Amazing! This makes the button centred but it is still touching the product image below, how do I change this?
store url?
Hello,
I'm hoping you can also help me with my alignment issues. I've tried all of the codes in the last 6-7 pages, but for some reason I just cannot figure out how to fix it!
The URL is www.itshipped.com and here's a screenshot of the issue:
Can you help me to make the "shop now" buttons all aligned? I realize the first image on the left is too large - I have it re-sized but forgot to upload the new image I guess. Besides the image size though, the length of the descriptive text is messing up the height of the overall block. Could we auto-cutoff the text after a certain amount of characters and have it add "[...]" at the end to force all of the descriptions to be the same size?
Same issue is happening further down. The product titles are sometimes really long, which is causing the red "sale" icons to all be off:
Thank you for any help you can provide!!
yes please confirm this look?
@KetanKumar You seem to be the man to talk too. Would you mind doing the same for me as well? www.franklinswine.com is the url 🙂
sorry for that issue
yes please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.product-collection__more-info.mb-3 {
display: none;
}
.product-collection__title h4 a {
height: 36px;}
Hi i can't seem to find Asset->/theme.css
Add it to the styles.scss.liquid file. The code may not be the same though on a different theme. Would be helpful to share your url
Thanks for post again
i have check whole site all good can you please provide screenshot further issue
Hi @KetanKumar
The problemas are,
1- The "offer" red label misalings the text boxs and the add to cart button, I need everything to maintain aligned
2- On mobile the texts box and add to cart buttons are to close to the image that is below
I really need to fix both issues.
Thanks in advance.
Url is https://freezyec.com/
Hi could you help me centre the add to cart button as seen in screen shot
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hard to say without seeing your site URL, but try adding this code to the bottom of your theme.css.liquid file:
form {
text-align: center;
}
Hello! I have the same problem with the grid, it is not aligned. I think it’s a descriptive text issue. I would like to fix the position of the add to cart button leaving enough space for the longer texts to fit and the grid to stay aligned. I've tried this code, but it doesn't work for me. I put it in theme.css because even though I use the simple theme I don't get the theme.css.liquid
I'd really appreciate the help
the store URL is https://elstresreis.com/
thanks in advance
Thanks for post
sorry your store is password protect
Sooo many thanks for responding!!!!! I really appreciate that!!!
the password is: editingkey
Thanks for details
do you mean like this?
Yes! exactly like this! but only with the prices aligned like the add to cart button.
How can I achieve this result?
Many thanks!
Yes, both are done some backend code can you please send PM
Did this get solved? I'm having the same issue.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hi @KetanKumar!
www.bellavirtuorganics.com is the site. I'd like all the shop now buttons to be aligned on the collection pages and the featured collection on the homepage. Thanks for taking a look!
Thanks for the details
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.
.product-card__title {
height: 60px;
}
Thanks for your feedback and support
Hi again,
This turned out to only be a partial fix. While the buttons are now aligned, the 'add to cart' button no longer adds a product to the cart, instead, it goes to the product page. Any ideas why?
Thanks in advance
Hi I'm trying to align the acc to cart buttons for my website using your solution but with no luck.
Can you please help? I've removed the buttons now until I can align them properly.
web url is toyboxuae.com
I can try to help, but I need you to re-add the buttons in order to figure it out.
I'd try this...Add this code to the bottom of your theme.css.liquid file
.product-card {
min-height: 385px
}
form {
padding-bottom: 30px;
text-align: center;
}
@media screen and (max-width: 749px){
.product-card .product-card {min-height: 350px;}
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024