How To Relocate Your Shopify Collection Descriptions for Better Page Flow

Hey there! So, you've decided to mix things up on your Shopify store and move the collection descriptions to the bottom of the page? Great choice! This tweak can help focus customer attention more on the products first and the descriptive text later, improving overall user interaction and aesthetics of the site. Let’s dive into how we can make this change step-by-step.

Understanding the Why

Moving a collection description to the bottom isn't just about changing locations; it's about improving the shopping experience. When customers land on a collection page, their primary focus is to see the products, right? By default, Shopify places the description at the top, which can distract or even delay the actual shopping process. By flipping this setup, you provide a streamlined path to browsing, while still offering all the necessary information after they've seen what’s available.

Getting Your Hands Dirty

First up, let’s make sure you’re all set to dive into some basic coding. Don’t worry, I’ll walk you through it, and you don’t need to be the next Zuckerberg to pull this off.

Step 1: Access Your Theme Code

Log in to your Shopify admin dashboard.
Go to Online Store > Themes. Find the theme you're using and click on Actions.
Select Edit code from the dropdown menu. This might sound a bit techy, but all you’re doing is accessing the back end where all your site’s visual elements are controlled.

Step 2: Locate the Right Files

Here your detective hat comes in handy. You need to find the file that controls the layout of your collection pages. Typically, this file is called collection.liquid, but it can vary based on the theme.

In the sidebar under the Templates folder, look for collection.liquid or a similarly named file.
Click on it to open the file in the editor.

Step 3: Understand the Layout

Before you move anything, try to understand the structure of the code you see. Usually, Shopify uses HTML (for structure), CSS (for style), and Liquid (Shopify’s templating language) in these files.

Look for tags like:

<div class="collection-description">
  {{ collection.description }}
</div>

This part of the code is usually responsible for displaying the collection description. The exact class name (collection-description in this case) might differ depending on your theme.

Step 4: Make Your Move

Now, you want to move this block of code so that it appears at the bottom of the page.

Cut the entire block of code.
Scroll down in the file to find the end of the product grid section, which might look like this:
```
<div class="product-grid">
  
</div>
```
Paste the description code you cut earlier right after this block.

Important: Preview Your Changes

Before making anything live, always preview. On the top bar of the code editor screen, you’ll see a button named Preview. Click on it to see how the changes look in real-time. If something looks off, this is your chance to tweak it without affecting what your customers see.

Backup, Always!

Quick tip: Always, and I mean always, duplicate your theme before making changes. Go to Themes, then Actions, and Duplicate. This safeguards you against any oopsies that might happen along the way.

Commit When Ready

Happy with the preview? Click Save on the top right corner of the code editor to apply the changes. Voilà, your description now comfortably sits at the bottom of the page, making your product the first thing customers see.

Wrapping Up

Great job! You’ve successfully moved the description on your Shopify collection page. This simple switch can significantly enhance visual flow and customer experience by showcasing what’s most important first — your products.

Feel free to play around—maybe you’ll find other tweaks that can enhance your store even further. Remember, every small change is a step towards a bigger improvement in how your customers interact with your site. Keep experimenting, keep learning, and most importantly, keep making your e-commerce journey uniquely yours.