How to change title and price to one line?

[basicbastardco]

Hi guys,

I would like the title and price of the product in one line instead of 2 lines from the main page.

For example SMILEY TEE HARBOUR BLUE | €39,00 EUR

URL: https://basicbastard.co/

Password: 696969

[SmallTask]

Hi @basicbastardco

We need to customize the product grid template to show the price in one line.

[PageFly-Victor]

Hi @Lmtushar

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset->component-card.css paste the below code at the bottom of the file.

#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__information {

display: flex !important;

align-items: center !important;

column-gap: 10px ;

}

#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__information .card__heading,#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__information .card-information{

min-width: fit-content !important;

}

#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__information .card-information s.price-item–regular{

display:none !important

}

#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__information .card-information .price.price–on-sale{

margin-top:0 !important;

font-size:13px !important

}

Best Regards;

PageFly

[basicbastardco]

Hi, Thank you for your help.

It worked just need to remove the title from the product pictures and the title centre. And remove the sale pill. Please, I would appreciate it a lot. Thank you!

[PageFly-Victor]

you can add

#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__inner .card__information{

display:none !important

}

#shopify-section-template–16107099357420__featured_collection slider-component ul li .card-wrapper .card__content .card__information{

justify-self: center !important;

}

[basicbastardco]

Really appreciated. Thanks so much!

[PageFly-Victor]

you are welcome, I glad when can help you

[basicbastardco]

By the way, if I want to do it for all collections then I can just call by that collection. Please let me know, thanks!

[PageFly-Victor]

you can give me URL and I will check, after I will give you CSS

[basicbastardco]

https://basicbastard.co/

Much appreciated

[PageFly-Victor]

-Go to Online Store->Theme->Edit code

-Asset-> base.css paste the below code at the bottom of the file.

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information,slider-component .card-wrapper .card__content .card__information {

display: flex !important;

align-items: center !important;

column-gap: 10px ;

justify-self: center !important;

}

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card__heading,#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card-information,slider-component .card-wrapper .card__content .card__information .card__heading,slider-component .card-wrapper .card__content .card__information .card-information{

min-width: fit-content !important;

}

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information s.price-item–regular, slider-component .card-wrapper .card__content .card__information s.price-item–regular{

display:none !important

}

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .price.price–on-sale, slider-component .card-wrapper .card__content .card__information .price.price–on-sale{

margin-top:0 !important;

font-size:13px !important

}

#ProductGridContainer #product-grid .card-wrapper .card__inner .card__information, slider-component .card-wrapper .card__inner .card__information{

display:none !important

}

[basicbastardco]

It worked but not for product recommendations and phone versions.

[PageFly-Victor]

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information,slider-component .card-wrapper .card__content .card__information,product-recommendations .card-wrapper .card__content .card__information {

display: flex !important;

align-items: center !important;

column-gap: 10px ;

justify-self: center !important;

}

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card__heading,#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card-information,slider-component .card-wrapper .card__content .card__information .card__heading,slider-component .card-wrapper .card__content .card__information .card-information,product-recommendations .card-wrapper .card__content .card__information .card__heading,product-recommendations .card-wrapper .card__content .card__information .card-information{

min-width: fit-content !important;

}

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information s.price-item–regular, slider-component .card-wrapper .card__content .card__information s.price-item–regular,product-recommendations .card-wrapper .card__content .card__information s.price-item–regular{

display:none !important

}

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .price.price–on-sale, slider-component .card-wrapper .card__content .card__information .price.price–on-sale,product-recommendations .card-wrapper .card__content .card__information .price.price–on-sale{

margin-top:0 !important;

font-size:13px !important

}

#ProductGridContainer #product-grid .card-wrapper .card__inner .card__information, slider-component .card-wrapper .card__inner .card__information,product-recommendations .card-wrapper .card__inner .card__information{

display:none !important

}

but I see mobile work fine

[basicbastardco]

It is working for the product recommendation now but It’s still not working for the phone version.

[PageFly-Victor]

you don’t need use @media only screen and (min-width: 750px){}

example

@media only screen and (min-width: 750px)

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card__heading, #ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card-information, slider-component .card-wrapper .card__content .card__information .card__heading, slider-component .card-wrapper .card__content .card__information .card-information, product-recommendations .card-wrapper .card__content .card__information .card__heading, product-recommendations .card-wrapper .card__content .card__information .card-information {
min-width: fit-content !important;

}
this code will work for screens from 750px or more, so it won’t work on mobile
code right

#ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card__heading, #ProductGridContainer #product-grid .card-wrapper .card__content .card__information .card-information, slider-component .card-wrapper .card__content .card__information .card__heading, slider-component .card-wrapper .card__content .card__information .card-information, product-recommendations .card-wrapper .card__content .card__information .card__heading, product-recommendations .card-wrapper .card__content .card__information .card-information {
min-width: fit-content !important;

}

[basicbastardco]

Thank you so much! It worked. Absolute savior.

[PageFly-Victor]

You are welcome