Shopify themes, liquid, logos, and UX
Hello to everyone.
i'm struggling with resizing on the homepage the featured collection part, and allign the price in another way. I'm gonna paste how it's now, and how I would want it.
from 3 products to 4 large products, with the price under the neame, not near the name, and the name alligned on the left of the immage, not in center.
Can anyone help me?
Solved! Go to the solution
This is an accepted solution.
hello @tradingfxstore
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 729px){
#shopify-section-featured-products .wrapper{
max-width: 100%;
}
#shopify-section-featured-products .grid-uniform{
display: flex;
flex-wrap: wrap;
}
#shopify-section-featured-products .grid-uniform .grid__item {
flex: 0 0 25%;
}
#shopify-section-featured-products .grid-uniform .grid__item .product--wrapper{
max-width: 100%;
}
#shopify-section-featured-products .grid-uniform .grid__item .product--image{
max-width: 100%;
max-height: 100%;
}
}
This is an accepted solution.
hello @tradingfxstore
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-featured-products .grid-uniform .grid__item .grid-product__meta{
width: 39%;
text-align: left;
}
#shopify-section-featured-products .grid-uniform .grid__item .grid-product__price-wrap .long-dash{
display: none;
}
Please share store URL!
Thanks!
hello @tradingfxstore
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.
@media screen and (min-width: 769px) {
.grid__item {padding-left: 0px !important;}
#shopify-section-featured-products .grid-uniform {
clear: inherit !important;
}
}
Nothing happen.
This is an accepted solution.
hello @tradingfxstore
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 729px){
#shopify-section-featured-products .wrapper{
max-width: 100%;
}
#shopify-section-featured-products .grid-uniform{
display: flex;
flex-wrap: wrap;
}
#shopify-section-featured-products .grid-uniform .grid__item {
flex: 0 0 25%;
}
#shopify-section-featured-products .grid-uniform .grid__item .product--wrapper{
max-width: 100%;
}
#shopify-section-featured-products .grid-uniform .grid__item .product--image{
max-width: 100%;
max-height: 100%;
}
}
You're the best
@Kinjaldavra do you know how can I modify the written too?
to have it like this. price under the name alligned on the left
This is an accepted solution.
hello @tradingfxstore
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
#shopify-section-featured-products .grid-uniform .grid__item .grid-product__meta{
width: 39%;
text-align: left;
}
#shopify-section-featured-products .grid-uniform .grid__item .grid-product__price-wrap .long-dash{
display: none;
}
@Kinjaldavra I'm using the dawn theme where do i put the code to resize the homepage collection (i dont see theme.css in this theme)
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