Solved

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

BERNAT-LASDUNAS
Tourist
16 0 3

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.

 

Screen Shot 2023-09-27 at 11.04.27 am.png

Accepted Solution (1)

PageFly-Noah
Globetrotter
572 133 139

This is an 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. 

PageFlyNoah_0-1695780629645.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
7027 1330 1354

Hi @BERNAT-LASDUNAS 

Could you share your store link to check? 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

BERNAT-LASDUNAS
Tourist
16 0 3

David_SHT
Globetrotter
605 125 122

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>

 

 

David_SHT_0-1695778949176.png

 

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

BERNAT-LASDUNAS
Tourist
16 0 3

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
Globetrotter
605 125 122

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>

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

PageFly-Noah
Globetrotter
572 133 139

This is an 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. 

PageFlyNoah_0-1695780629645.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

BERNAT-LASDUNAS
Tourist
16 0 3

That worked beautifully! Thanks for your time. 

PageFly-Noah
Globetrotter
572 133 139

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.