Dawn theme product page popup customization

Store Design
, , , , , , , , , ,

Topic summary

A user seeks to customize the Dawn theme’s product page popup on mobile devices, specifically wanting to reduce font size, center-align content, and make “Add to Cart” and “Buy Now” button text uppercase.

Solutions provided:

  • Uppercase buttons: Add CSS code to the Custom CSS section in Theme settings:
.product-form__buttons * {
  text-transform: uppercase;
}

  • Size chart popup customization: Target the popup with specific CSS for mobile views (max-width: 767px), adjusting text-align to center, margin, and width properties.

  • Font size adjustment: Use Custom CSS to modify the size chart popup font:

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

Multiple community members provided similar solutions involving editing the base.css file or using the Custom CSS section in Theme Customizer. All recommendations emphasize testing changes on mobile view and adjusting pixel values as needed. The discussion includes code snippets and step-by-step instructions for implementing these customizations.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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.

Screenshot 2024-11-02 151100.png
Screenshot 2024-11-02 151100.png650×488 10.3 KB

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

password: rugged

2

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.

3

In that image previously shared , the text “SIZE CHART”

4

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

5

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;
}
6

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!