Shopify themes, liquid, logos, and UX
Hi,
I do know and understand that this topic has been covered a lot of times, but unfortunately my theme seems to differ a little to others.
In the long run I will go ahead and get a premium theme regardless to get some more needed features covered, but In my eyes the shop will need to prove itself first 😛
To my problem the add to cart alignment is shocking no matter where if its on the Homepage or collection page 😄
Thats one example not the worst one I myself get dissy going over the page 😄
when I check on the community Board I see that most people just simply add some code to :
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
Please see my screenshot I don't seem to have the selection and I tried copying the code in to the styles.css and styles-responsive.css which didn't help it unfortunately.
Website to check for this problem: www.coolgadgets.site
Please let me know how I can sort that problem to tick it of my to do list 😄
Thanks you everyone 🙂
@Anonymous
Solved! Go to the solution
This is an accepted solution.
@MrGadgets add this code in theme-style.css
I went ahead and added this code:
.grid__item--collection-template { margin-bottom: 30px; .product-card__title { min-height: 50px; display: block; } form { text-align: center; } .btn { margin-top: 10px; } }
which is the one I found to booth the categories as mentioned, but if you go back on my site:
www.coolgadgets.site you can see that they are still all over the place.
Am I using the wrong code or would there be another solution to the Problem.
Thank you,
Andre
@Sajeel would there still be a way around it since I actually would like to keep the wishlist function
i think you need to show wishlist button without hover also then it will look nice and then you can align the text center
okey thank you I will see that I check that out
I still haven't been able to align the damn add to cart and its been really annoying. Please who could help me with that I'm really lost at this stage....
Website. www.coolgadgets.site
how you want to align them? add to cart is aligned perfectly the issues is there is a wishlist heart which appears on hover
That's not were the issues is the problem is within the heights.
You see some show reviews some don't.
Some have color options some don't.
So if you look at it especially on the collection page you see its all over the place and I would like to have them all in a straight line.
See the Screenshot attached the first 2 line up perfectly.
The 3rd one got no color option so it sits higher.
The 4th one has reviews aswell so sits a bit lower.
Since they will all get reviews eventually the goal is to line the add to cart button all at the same height as the 4th one.
That would help to make the website look much cleaner...
This is an accepted solution.
@MrGadgets add this code in theme-style.css
That did the trick awesome thank you so much I really appreciate that a lot 🙂
Thanks
Hey I just noticed that it created another problem only on the products with reviews it started overlapping now.
im using the judge.me with the aliexpress review importer on that
Sorted it 🙂
Let me check
I just worked it out I had to go with a height of 260 rather then 203 that's why it was overlapping its perfect now and looks much cleaner thank you.
perfect
on which devcie you are facing issue
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024