Add more products, make them centred & smaller in the product recommendations section

Store Design
, ,

Topic summary

A user seeks to modify their Shopify store’s product recommendations section to display 6 products instead of the default, centered and smaller in size. Currently, adding 6 products causes them to overflow to the right side of the page.

Store Details:

  • Theme: Palo Alto
  • Issue: Products not centered when count increased
  • Goal: 6 centered, smaller product cards (shown via mockup image)

Solution Provided:

A Shopify expert outlined a two-step process:

  1. Increase product limit: Edit product-recommendations.liquid file, changing the limit: value from 4 to 6 (either in the for loop or schema section)

  2. Add CSS styling: Insert specific CSS code into theme.css to adjust product card width for screens 1440px and wider:

    @media only screen and (min-width: 1440px) {
    .one-quarter {
        width: calc((var(--wrapper-width) - var(--grid-gutter) * 3) / 6);
    }
}

The responder included a result screenshot showing the implementation. Status: Awaiting confirmation from the original poster on whether the solution works.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

Hope everyone is having a great week.

I’m hoping to get some help with putting 6 products in our ‘product recommendations’ section on our product pages, while making the section centered (currently I can add six with code but they go off to the RHS of the page and make the products smaller.

Theme: Palo Alto

URL: https://www.coffee.prestigerepairs.com.au/collections/manual-coffee-machines/products/ascaso-baby-t-zero-coffee-machine

What we currently have

MollieHammond_0-1751509001458.png
MollieHammond_0-1751509001458.png1582×767 171 KB

What we are looking for

MollieHammond_1-1751509061157.png
MollieHammond_1-1751509061157.png1405×406 108 KB

Thank you.

2 Likes
2

Hi ,

I am from Mageplaza - Shopify solution expert.

To increase the number of products in the recommendation section, you need to follow these two steps:

Step 1: Change the number of displayed products1. From your Shopify admin, go to Online Store > Themes.

  1. On the Palo Alto theme, click Actions (…) > Edit code.

  2. In the left-side folder directory, find the Sections folder and open the product-recommendations.liquid file.

  3. Use Ctrl + F (or Cmd + F on Mac) to find the code containing limit:. It is usually located within a for loop or in the schema section at the bottom of the file. You will likely see a code snippet similar to this:

    Đoạn mã

    {%- for product in recommendations.products limit: 4 -%}

    Or in the schema section:

    JSON

    {
  "type": "range",
  "id": "limit",
  "min": 2,
  "max": 4,
  "step": 1,
  "label": "Number of products to show",
  "default": 4
}

  4. Change the value:

    • If it’s in the loop, change limit: 4 to limit: 6.

    • If it’s in the schema, increase the “max” and “default” values to 6.

  5. Click Save.

Step 2: Add the following CSS code to your theme.css file to apply the desired customization

@media only screen and (min-width: 1440px) {
    .one-quarter {
        width: calc((var(--wrapper-width) - var(--grid-gutter) * 3) / 6);
    }
}

**Result: ( image with 4 product )

mageplazacs_0-1751536073465.png
mageplazacs_0-1751536073465.png1688×832 243 KB

Please let me know if it works as expected

Best regards!