Shopify themes, liquid, logos, and UX
Hello Everyone!
I'm new to Shopify and designing my very first store. I have a big issue if somebody could help me solve it.
I've achieved my ideal featured collection section height and width but i want placement of my products to be different
I've attache two picture below of what i have right now and what i want to achieve.
Current : https://ibb.co/HKTRHq2
What i want to achieve : https://ibb.co/vJsxNy7
Any help would be appreciated.
Thank You.
Solved! Go to the solution
This is an accepted solution.
Looks great! You can make the photos bigger and more spread out by adding this code here to your CSS file
@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
max-width: 30% !important;
margin: 0px 25px !important;
}
Adjusting that 30% will make them bigger or smaller, and adjusting the 25px in the margin code will either spread them out or make them closer together. The bigger the number, the farther apart they'll go.
Let me know what you think
Hi Rgv1, welcome to Shopify! Could you post or send me the password for your site? I'd like to take a look at the code and see what specifically we could add to your product grid items to get them aligned for you.
Thanks!
can you please send store url
pragatint.com
thanks bt its password protect
Hi Rgv1,
Try adding the following code to the top of your product.liquid, product-template.liquid, or CSS style sheet. If you're adding to your existing style sheet, you won't need the <style></style> tags
<style>
.card__inner{
height: 100%;
}
</style>
should i add to all of these or just any one of these
Just adding it to any one of those should do the trick
Hi @rgv1 I'll take another look. Did you change the password for the site? I'm having trouble accessing your site now for some reason
it should work now
Thank you that worked. This is what I'm achieving by manually entering the style code into your site. Is this what you're looking to do?
Something like that would most likely require you to upload .png versions with the same resolution and a transparent background on each photo. I would recommend using Canva to create some new product photos and uploading those first, then we can work on the spacing for you
thank you. i'll be back
This is an accepted solution.
Looks great! You can make the photos bigger and more spread out by adding this code here to your CSS file
@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
max-width: 30% !important;
margin: 0px 25px !important;
}
Adjusting that 30% will make them bigger or smaller, and adjusting the 25px in the margin code will either spread them out or make them closer together. The bigger the number, the farther apart they'll go.
Let me know what you think
one last this thing. can you guide me where should i post this. i have zero coding background 🤕
Sure thing. Navigate to Online Store > Live Theme > Actions > Edit Code. From here, you'll want to open your theme.liquid file under the Layout section.
In the theme.liquid file, place this code below within your <head></head> tags. You'll want to put towards the end, just before the </head> tag, and then click Save.
<style>
@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
max-width: 30% !important;
margin: 0px 25px !important;
}
</style>
Let me know if you have any trouble and what you think of the result
Hi @rgv1, having trouble with featured collection alignment in the Shopify Dawn Theme? Check out this YouTube video: https://www.youtube.com/watch?v=LNCzj6cxw1s.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024