How to Increase The Height of Section Shopify Div

How to Increase The Height of Section Shopify Div?

A tall section in your Shopify store can make all the difference in capturing customers' attention and driving conversions. But if you're unable to get your section's height to the right size or if it simply isn't big enough, it can feel like a frustrating roadblock. Luckily, there are a few easy ways to increase the height of a section on Shopify.

In this blog post, we'll look at how you can get your section to the right size, no matter the size of your store. We'll also go over how you can use CSS coding to customize the size of a section further, as well as other tips for styling to make sure your section stands out. By the end of this post, you'll have the tools and resources needed to get the perfect Shopify section for your store.

Here is the guide:

How to increase the height of a section in Shopify

  1. From your Shopify admin dashboard, go to the "Online Store" section and select "Themes."

  2. Find the theme that you want to edit and click the "Actions" button, then select "Edit code."

  3. In the theme editor, navigate to the "sections" folder and find the section that you want to increase the height of. The section should have a file with the same name as the section and the extension .liquid.

  4. In the section file, look for the <div> element that has the class "section-content" or something similar, as this is the element that controls the height of the section.

  5. Add a CSS class to this <div> element and give it a custom height value, such as height: 500px. For example:
    Copy code
    <div class="section-content custom-height">
    ...
    </div>


  6. Next, navigate to the main stylesheet file, usually named theme.scss.liquid or main.scss.liquid and add the following code:
    Copy code
    .custom-height { height: 500px; }


  7. Save your changes and the section's height should now be increased to 500px on the frontend of your website.

Note: You can adjust the height value to any number you want. Also, if you want to increase the height of all sections you can use the class 'section' instead of a custom class.

Conclusion:

After reading the complete guide, you can change the height of Shopify Div Sections, but if you still face difficulties, contact our Shopify designer and developers for a free consultation.

Back to blog