Dawn theme product page popup customization

[Sivadarshan]

I'm using dawn latest version in that I need to make popup (product page) font-size smaller and align it to center in mobile view, and also want to make all the add to cart and buy now font in uppercase.

website: https://rugd-in.myshopify.com/

password: rugged

[LizHoang]

Hi @Sivadarshan 

1. Would you mind sharing which pop up that you want to edit? 

2.  For the uppercase custom for add to cart and buy now font, you can follow the instruction here: 

- Go to Shopify > Online store > Theme > Customize > Custom CSS section on settings

- Copy and paste this code to the section > Save.

.product-form__buttons * {
    text-transform: uppercase;
}

I hope it helps. 

[Sivadarshan]

In that image previously shared , the text "SIZE CHART" 

[LizHoang]

Hi again @Sivadarshan, 

Here is the solution for the query of size chart pop up: 

You can continue to go to Custom CSS and paste this code to that section > then you adjust the font size as desired > save

.product-popup-modal__content[aria-label="SIZE CHART"] * {
    font-size: 10px !important;
}

[Guleria]

Hello @Sivadarshan ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

@media screen and (max-width: 767px) {
.product-popup-modal__opener { 
    text-align: center;
    margin: 0 auto; 
    width: 100%;
}
}
.product-form__buttons * {
    text-transform: uppercase;
}

Thanks

[VipulBudhiraja]

To customize the popup font size, center alignment on mobile, and make the "Add to Cart" and "Buy Now" buttons uppercase in the Dawn theme, you can adjust the CSS. Here’s how:

1. Adjust Font Size and Center Alignment in the Popup on Mobile

• Go to Online Store > Themes > Edit Code.

• Open the main CSS file, often named base.css or theme.css.

• Add the following CSS to target mobile view:

  css

  Copy code

  @media only screen and (max-width: 768px) { /* Center align and reduce font size in popup */ .popup-selector-class { /* Replace with the actual popup class */ text-align: center; font-size: 14px; /* Adjust to your preferred font size */ } }

• Note: Replace .popup-selector-class with the actual class of the popup element. You can find this class by inspecting the popup in your browser’s Developer Tools.

2. Make "Add to Cart" and "Buy Now" Text Uppercase

• In the same CSS file, add the following code to change the text for these buttons to uppercase:

  css

  Copy code

  .product-form__submit, .shopify-payment-button__button { text-transform: uppercase; }

1. Save and Test:
   • After saving, check your product page on mobile to ensure the font size, alignment, and button styles appear as desired.

These adjustments will help improve readability and consistency in the mobile layout.

Increase your conversion rate and enhance your user's shopping experience with smart guidance from the Debales AI Chatbot on Shopify! Ready to assist users effortlessly—let’s chat!