I’m working on customizing my store’s product pages, and I would like to adjust the padding between the title, subtitle, and description to create a more balanced and visually appealing layout.
Currently, the spacing between these elements seems a bit too tight, and I would prefer to have a bit more room for better clarity and aesthetics.
Could anyone guide me on how to modify the padding between these sections? Any advice or code snippets would be greatly appreciated!
To adjust the padding between the title, subtitle, and description on your product pages, you’ll need to make some changes in your theme’s CSS. Here’s a general approach to help you achieve a more balanced and visually appealing layout:
Identify the classes that control the spacing for the title, subtitle, and description. These can usually be found by inspecting the elements on your product page using the browser’s developer tools (right-click > Inspect).
For example, in most Shopify themes, the product title is often wrapped in a class like .product-title, the subtitle in .product-subtitle, and the description in .product-description.
Adjust the padding or margin in your theme’s CSS file to increase the spacing between these elements.
Code Snippet:
Here’s an example of CSS code that you can add to your theme.scss.liquid (or any custom CSS file) to adjust the padding:
/* Adjust padding between the title, subtitle, and description */
.product-title {
margin-bottom: 20px; /* Increase space after the title */
}
.product-subtitle {
margin-bottom: 15px; /* Adjust space after the subtitle */
}
.product-description {
margin-top: 10px; /* Add some space above the description */
}
How to Apply:
Follow these Steps:
Online store
Themes
Edit Code
Find your theme.scss.liquid or theme.css file under the “Assets” section.
Paste the CSS code above at the bottom of the file.
Let me know if you’d like me to assist further with a specific theme or additional tweaks!
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Make sure to inspect the elements and use the correct class names for your theme. Add this to your theme.css file, save, and refresh the page. If it still doesn’t work, try clearing your browser cache or check if JavaScript is affecting the layout.
This is a pretty common tweak, and you’re right — the default spacing on product pages can feel a bit cramped.
In Dawn and most modern themes, the spacing between the title, price, and description is usually controlled by margin or padding on elements like .product__title, .price, and .product__description. The quickest way to dial it in is to inspect the page in your browser, see which class is wrapping each section, and then add something like a small margin-bottom override in your theme’s custom CSS. Even a few extra pixels can make a big difference visually.
If you don’t feel like hunting through CSS or guessing which selector is safe to change, I built an app called Easy Edits that handles this in a more visual way. You can click directly on the title, price, or description and adjust spacing, or just describe the change and let the AI apply it to the right elements without breaking the rest of the product page.
