Re: How to Increase Space Between Main Menu and Product Only on Desktop?

Simon159 · ‎12-28-2023

https://charmente.com/products/long-sleeve-flared-bodysuit

I only want to increase the space between the main menu and the product on desktop. The spacing is how I want it for mobile. Thank you!

Dan-From-Ryviu · ‎12-28-2023

Go to Online store > Themes > Edit code > open theme.liquid, add this code below after <head>

{%- if template.name == 'product' -%}
<style>
@media (min-width: 990px) {
#MainContent {
margin-top: 40px !important;
}
}
</style>
{%- endif -%}

- Helpful? Like and Accept solution! Or Support me: Buy Me Coffee ❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

niraj_patel · ‎12-28-2023

Hello @Simon159

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>

.product.product--small {
margin-top: 25px;
}

</style>

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Dan-From-Ryviu · ‎12-28-2023

Go to Online store > Themes > Edit code > open theme.liquid, add this code below after <head>

{%- if template.name == 'product' -%}
<style>
@media (min-width: 990px) {
#MainContent {
margin-top: 40px !important;
}
}
</style>
{%- endif -%}

- Helpful? Like and Accept solution! Or Support me: Buy Me Coffee ❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: How to Increase Space Between Main Menu and Product Only on Desktop?

How to Increase Space Between Main Menu and Product Only on Desktop?

Community Blog Articles