Guide on How to Remove White Space Sidebar in Shopify Mobile
Skip to main content

How to Remove White Space Sidebar in Shopify Mobile

Person frustrated with the sidebar of white space on their mobile Shopify store

When designing your Shopify eCommerce store for mobile view, you may encounter a large sidebar of white space on your store’s landing page, disrupting its layout and impeding its efficiency. This quick guide will lead you through eliminating this white space sidebar in your Shopify mobile view, ensuring your store remains polished and professional on mobile devices. Let’s start optimizing your store’s mobile view.

Step 1: Access Your Theme Code Editor

Screenshot of the Shopify dashboard showing how to access Shopify's theme code editor

To remove the sidebar of white space in your Shopify store’s mobile view, you will first need to access your Shopify store’s theme code editor.

To do so, navigate from your Shopify dashboard to ‘Online Store’ > ‘Themes’ > ‘Actionsbutton > ‘Edit code.’

 

 

Once at your theme code editor, navigate to your ‘Layout’ folder and open your ‘theme.liquid’ file.

Step 2: Input the Following Code

Screenshot of Shopify's theme code editor showing where to input the code

Once you have opened your ‘theme.liquid’ file in your theme code editor, find the ‘</body>’ tag and paste this specific code just above it:

<style>

img{

max-width: 100%;

}

.shopify-section.product-variant-slider-block__wrapper {

    overflow-x: hidden;

    width: 100%;

    position: relative;

}

</style>

 

This specific code will remove the sidebar of white space from your Shopify store’s mobile view.

Once finished, be sure to click the ‘Save’ button in the top right corner of the screen to save your changes.

Elevate Your Shopify Store’s Mobile Performance with Oyova

Happy person accessing their working Shopify store through their mobile device

The sidebar of white space on the right side of your Shopify mobile store should now be removed, allowing your Shopify store to once again operate at full efficiency. However, this issue likely occurred because your Shopify store may not be mobile-responsive, and similar issues may arise again in the future.

This is where hiring a team of professionals can make a big difference. At Oyova, we specialize in a myriad of eCommerce services, such as our Shopify development services. Our team of experts is ready to optimize your Shopify store for mobile devices, as well as enhance, innovate, and elevate your store to unprecedented heights.

 

Ready to take your Shopify store to the next level? Contact Oyova today to receive expert assistance and discover the true potential of your Shopify store.