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

Technical Q&A
,
1

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

2

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 %}
    
      
    

  {% else %}
    
      
    

  {% endif %}
{% endfor %}

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