How to be able to change design and placement of css on the ("choose option") pop up

[BERNAT-LASDUNAS]

Hello! 

I'm trying to change a few things from the default (choose option) pop up. 

1-Reduce Title size so it fits in one row.

2- Center all the content

3-Get rid of ("tax included. shipping.....") and title text.

URL: https://www.lasdunasbyron.com

Thank you so much! I appreciate your help.

[Dan-From-Ryviu]

Hi @BERNAT-LASDUNAS 

Could you share your store link to check? 

[BERNAT-LASDUNAS]

https://www.lasdunasbyron.com

[David_SHT]

Hi @BERNAT-LASDUNAS ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
@media only screen and (min-width: 750px) {
 .product__info-container .product__title .h1 {
   font-size: 25px !important;
 }
}
.product__info-container .product__tax {
  display: none !important;
}
.product__info-wrapper {
  text-align: center !important;
}

</style>

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

[BERNAT-LASDUNAS]

Hey David, 

It does work but it also changes the style from the Product page. I would like to only edit the pop up without affecting the product page. 

[David_SHT]

You can try again:

<style>
@media only screen and (min-width: 750px) {
 .quick-add-modal__content-info .product__info-container .product__title .h1 {
   font-size: 25px !important;
 }
}
.quick-add-modal__content-info .product__info-container .product__tax {
  display: none !important;
}
.quick-add-modal__content-info .product__info-wrapper {
  text-align: center !important;
}
</style>

[PageFly-Noah · Accepted solution]

Hi @BERNAT-LASDUNAS 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.quick-add-modal__content product-info {
text-align: center;
}

.quick-add-modal__content .product__title * {
    font-size: 20px;
}

.quick-add-modal__content .product__tax.caption.rte {
    display: none;
}
</style>

This will reduce the size and center all things in the quick view modal only and not affect to the product page. 

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[BERNAT-LASDUNAS]

That worked beautifully! Thanks for your time. 

[PageFly-Noah]

Glad that i can help, let me know if you need other help.