Hi there,
I would like to increase the space between the price and color sector (marked):
Topic summary
A user wants to increase the vertical spacing between the price and color selector sections on their product page.
Solutions Provided:
-
Generic CSS approach: Add
margin-bottom: 10pxto.product-priceclass andmargin-top: 10pxto.product-colorsclass, adjusting pixel values as needed. -
Theme-specific solution: Insert custom CSS targeting
.product-info__block-list .product-info__block-item[data-block-type="price"]withmargin-bottom: 20px!importantdirectly in the theme.liquid file above the</body>tag.
Both solutions use CSS margin properties to create the desired spacing. The second response provides more specific implementation instructions for the Prestige theme, including exact file location (online store >> edit code >> theme.liquid) and offers follow-up support via WhatsApp if needed.
To increase the space between the price and color sector, you would need to modify the CSS styling of the relevant elements. Here’s an example of how you can achieve this:
.product-price {
margin-bottom: 10px; /* Increase the bottom margin as needed */
}
.product-colors {
margin-top: 10px; /* Increase the top margin as needed */
}
In the above example, we target the .product-price class and add a bottom margin of 10px to create space between the price and the element below it. Similarly, we target the .product-colors class and add a top margin of 10px to create space between the color sector and the element above it.
1 Like
Hello,
Please add the below code above in theme.liquid
online store >> edit code >> theme.liquid
.product-info__block-list .product-info__block-item[data-block-type="price"] { margin-bottom: 20px!important; }after added the given code dropdown looks like this.
If our solution is helpful for you then Please like the post and tap on accepted.
If you want to discuss any further information then please contact us on our whatsapp.
We will always here for your help.
Thankyou 
1 Like