How to change title and price to one line?

Solved
basicbastardco
Explorer
95 1 17

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

 

Screenshot 2022-09-24 at 7.19.04 PM.png

Liaz
Accepted Solutions (4)

Accepted Solutions
PageFly-Victor
Shopify Partner
4546 749 2103

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

}

PageFly_0-1664080630439.png

 

 

Best Regards;

PageFly

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

PageFly-Victor
Shopify Partner
4546 749 2103

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;

}

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

PageFly-Victor
Shopify Partner
4546 749 2103

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 

PageFly_0-1664098185418.pngPageFly_1-1664098212727.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

PageFly-Victor
Shopify Partner
4546 749 2103

This is an accepted solution.

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;
}
 
PageFly_0-1664099991554.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

View solution in original post

Replies 17 (17)
Mubashir_H
Shopify Expert
57 2 10

@basicbastardco 

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.

Drop me a message on Whatsapp for Free consultation.
Hire me at Shopify Experts Marketplace

SEO | Shopify speed Optimization | Store setup | Theme customization
SmallTask
Shopify Partner
794 35 45

Hi @basicbastardco 

 

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

Feel Free to Contact Us on WhatsApp | Email Us at info@instiqa.com
Develop Your Shopify Store with our Small Tasks, Shopify Custom Theme Development, and Shopify SEO Services.
PageFly-Victor
Shopify Partner
4546 749 2103

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

}

PageFly_0-1664080630439.png

 

 

Best Regards;

PageFly

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

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! 

Screenshot 2022-09-25 at 8.01.48 AM.png

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

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;

}

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

Really appreciated. Thanks so much! 

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

you are welcome,  I glad when can help you

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

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!

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

https://basicbastard.co/

 

Much appreciated 

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

-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

}

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

It worked but not for product recommendations and phone versions. 

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

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 

PageFly_0-1664098185418.pngPageFly_1-1664098212727.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

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

 

Screenshot 2022-09-25 at 10.39.58 AM.pngScreenshot 2022-09-25 at 10.39.44 AM.pngScreenshot 2022-09-25 at 10.38.58 AM.png

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

This is an accepted solution.

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;
}
 
PageFly_0-1664099991554.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

basicbastardco
Explorer
95 1 17

Thank you so much! It worked. Absolute savior. 

 

Liaz
PageFly-Victor
Shopify Partner
4546 749 2103

You are welcome 😍

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.