Removing the Right Sidebar from Your Shopify Continue Shopping Page

As a senior developer for Laravel Company, I often receive inquiries about customizing theme templates in e-commerce platforms like Shopify and WordPress. One common question is how to remove the right sidebar from the “continue shopping” or success order page after a customer clicks “place order.”

Let me guide you through the process with step-by-step instructions and best practices.

Understanding Your Current Theme Structure

Most Shopify themes use a layout file (usually named theme.liquid) which defines the basic structure of your pages, including the header, content area, sidebar, and footer. The right sidebar is typically defined using Shopify’s liquid templating language within this layout file.

For example, in the default “Narrative” theme template:

<div class="container">
  <div class="row">
    {% if collections.active %}
      <div class="col-md-3 col-sm-4 sidebar">
        {%- include 'sidebar' -%}
      </div>
    {% endif %}

    <div id="Content" class="col-md-9 col-sm-8 main-content">
      {{ content_for_layout }}
    </div>
  </div>
</div>

In this code snippet, the right sidebar is defined within the {% if collections.active %} conditional statement. The theme checks if a collection is active (i.e., you’re on a product listing page), and if so, it includes the sidebar template.

Removing the Sidebar from Your Success Order Page

To remove the right sidebar specifically for your success order page, you’ll need to create a custom template override. Here’s how:

1. Navigate to Online Store > Themes.

2. Locate your current theme and click on Actions > Edit code.

3. In the theme editor, open the templates folder and find the success.liquid file that corresponds to your success order page.

4. Click on success.liquid to open it in the code editor.

5. Remove or comment out the sidebar div using HTML comments (<!-- -->) as shown:

<div class="container">
  <div class="row">
    {% if collections.active %}
      <!-- <div class="col-md-3 col-sm-4 sidebar">
        {%- include 'sidebar' -%}
      </div> -->
    {% endif %}

    <div id="Content" class="col-md-9 col-sm-8 main-content">
      {{ content_for_layout }}
    </div>
  </div>
</div>

6. Click Save.

By commenting out the sidebar div in your custom success.liquid template, you effectively remove it from being rendered on this specific page.

Best Practices and Further Customization

While this method is straightforward and effective for removing the right sidebar from a single page, it’s essential to follow some best practices:

• Always create a duplicate of your theme before making modifications.
• Use version control systems like Git for tracking changes.
• Keep your theme files organized logically.

If you’re looking to make more advanced customizations or need assistance with other Shopify development tasks, I highly recommend checking out Laravel Company’s blog, where we regularly publish tutorials and guides on e-commerce development best practices.