In this tutorial, we'll show you how to change the product title font size specifically for mobile view in Shopify. We'll be using the Dawn theme as an example.
Step 1: Access Theme Customization
Log in to your Shopify Admin Dashboard.
Navigate to "Online Store" and then click on "Themes."
Step 2: Edit the Theme Code
Find your current theme (Dawn) and click on the three dots (•••) before to "Customize."
Select "Edit code" from the dropdown menu.
Step 3:Find the CSS File
In the Code Editor, go to the "Assets" folder.
Look for a file named base.css or something similar.
Step 4: Add Custom CSS for Mobile View
Scroll to the bottom of the CSS file.
Add the following code:
@media only screen and (max-width: 769px) {
.product__title h1 {
font-size: 1.17em; /* Adjust the font size as needed */
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
}This code targets the product title (h1 tag inside .product__title) and sets the font size to 1.17em for screens with a maximum width of 769px, which typically covers most mobile devices.
Step 5: Save Your Changes
Click "Save" to apply the changes.
Check your store on a mobile device to see the new font size in action.
Conclusion
By following these simple steps, you can easily change the product title font size for mobile view in Shopify. This ensures your store looks great on all devices.
Video Tutorial
For a visual guide, refer to the YouTube tutorial:
