Solved

Resize featured collection hompage

tradingfxstore
Tourist
5 0 1

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.

Cattura01.PNG

  Cattura02.jpg

 

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?

Accepted Solutions (2)
Kinjaldavra
Shopify Partner
2302 570 1422

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%;
}
}

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}

 

 

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12282 2546 3694

@tradingfxstore 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

Kinjaldavra
Shopify Partner
2302 570 1422

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.

tradingfxstore
Tourist
5 0 1
dmwwebartisan
Shopify Partner
12282 2546 3694

@tradingfxstore 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
tradingfxstore
Tourist
5 0 1

Nothing happen.

Kinjaldavra
Shopify Partner
2302 570 1422

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%;
}
}

 

tradingfxstore
Tourist
5 0 1

You're the best

tradingfxstore
Tourist
5 0 1

@Kinjaldavra  do you know how can I modify the written too? 

tradingfxstore_1-1628236565567.png

 

to have it like this. price under the name alligned on the left

Kinjaldavra
Shopify Partner
2302 570 1422

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;
}

 

 

RHF
Excursionist
24 0 6

@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)