How can I center 1 product on my page / collections section on spotlight ?

[elperro1]

Hello, 

I am trying to center 1 product on spotlight theme, It works on mobile but for desktop I cant find the solution. 

Tried to use "maximum products to show" and put it to one but 2 is miminum.

Help is appreciated thank you

[NomtechSolution · Accepted solution]

Modify the code to center a single product: Within the loop, add a conditional statement to check if it's the first product being rendered. If it is, apply a CSS class or style that centers the product. Here's an example:

{% for product in collection.products %}
  {% if forloop.index == 1 %}
    <div class="centered-product">
      <!-- Code for displaying the product -->
    </div>
  {% else %}
    <div class="other-products">
      <!-- Code for displaying other products -->
    </div>
  {% endif %}
{% endfor %}

.centered-product {
  margin: 0 auto;
  text-align: center;
}