How can I modify my collection page to full width?

Store Design
, ,

Topic summary

A user seeks to modify their Shopify collection page to full width and reduce gaps between product images.

Proposed Solutions:

  • PageFly-Lucas provides step-by-step instructions:

    • Navigate to Online Store → Theme → Edit code
    • Locate theme.liquid file
    • Insert CSS code before the closing </body> tag targeting .container with max-width: 100% !important

  • jackjohn1 offers alternative CSS approach:

    • Modify .collection-page width to 100%
    • Adjust margin-right values on .product-image to reduce spacing between images
    • Recommends backing up code before changes

Current Status:

The original poster tried PageFly-Lucas’s initial solution but reported no changes occurred. PageFly-Lucas then provided updated code targeting .container for a second attempt.

Note: The conversation text appears partially reversed/corrupted in the original input, but the technical guidance remains clear.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi, I want to change collection page from current looking to full width, and also make gap smaller between products image.

here is my web: www.nintty.com

code 123123

Thanks

2

Hi @zziz

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyLucas_0-1685247375886.png
PageFlyLucas_0-1685247375886.png1365×651 47.6 KB

{% if template == ‘collection’ %}

.container {

max-width: 100% !important;

}

{% endif %}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

3

To change the collection page layout to full width and reduce the gap between product images on your website, you’ll need to modify the CSS code. Unfortunately, as an AI text-based model, I’m unable to directly access or modify your website’s code. However, I can provide you with general instructions on how to achieve the desired changes.

Here’s what you can do:

  1. Access your website’s code: Log in to your website’s backend or content management system (CMS) where you have access to the code.

  2. Locate the collection page CSS: Look for the CSS file or section that controls the styling of your collection page. This file is usually named “styles.css” or similar.

  3. Adjust the page width: Find the CSS rule that sets the width of the collection page. It might look like this:

cssCopy code
.collection-page { width: 960px; margin: 0 auto; }

Change the width value to 100% to make the collection page full width:

cssCopy code
.collection-page { width: 100%; margin: 0 auto; }

Save the changes.

  1. Reduce the gap between product images: Locate the CSS rule that controls the spacing between product images. It may look similar to this:

cssCopy code
.product-image { margin-right: 20px; }

Reduce the margin-right value to decrease the gap between product images. For example:

cssCopy code
.product-image { margin-right: 10px; }

Save the changes.

  1. Test and refine: Save your modifications and preview the collection page on your website to see if the desired changes have taken effect. If necessary, adjust the CSS values further until you achieve the desired layout.

Remember to always back up your original code before making any changes, as it allows you to revert to the previous state if something goes wrong.

If you encounter specific difficulties or have further questions, feel free to ask for assistance providing more details, and I’ll be glad to help you.

Live Chat Support is available 24/7.

Optimize your store’s mobile shopping experience with the Blum theme.

4

Hi @PageFly-Lucas ,

I tried it but nothing changed.

5

You can try again with this code:

.container {

max-width: 100% !important;

}