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 😍
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