Shopify themes, liquid, logos, and UX
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
Password: 696969
Solved! Go to the solution
This is an accepted solution.
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
This is an accepted solution.
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;
}
This is an accepted solution.
#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
This is an accepted solution.
you don't need use @media only screen and (min-width: 750px){}
example
This is possible but requires some custom coding, I don't think your theme offer this functionality by default, your theme may require some advance coding to make your products and price show in one line.
We need to customize the product grid template to show the price in one line.
This is an accepted solution.
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
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!
This is an accepted solution.
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;
}
Really appreciated. Thanks so much!
you are welcome, I glad when can help you
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!
you can give me URL and I will check, after I will give you CSS
-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
}
It worked but not for product recommendations and phone versions.
This is an accepted solution.
#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
It is working for the product recommendation now but It's still not working for the phone version.
This is an accepted solution.
you don't need use @media only screen and (min-width: 750px){}
example
Thank you so much! It worked. Absolute savior.
You are welcome 😍
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024