Changing Grid size to 1 per row in debut theme

Solved
jusk
Tourist
5 0 1

Hello Shopify--gurus,

 

we are trying to launch our online store with a single product. we are using the debut theme.

 

We are trying to figure out how to reduce the grid size from 2 to 1 per row, so we can show our single product and it would be centered in the collection section. But the slide bar only go down to 2. any help is much appreciated.

 

I understand in the collection.liquid,

it is switching cases for (section.settings.grid), but I can I make it to start with 1?

 

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = 'medium-up--one-whole' -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = 'small--one-whole medium-up--one-third' -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = 'small--one-whole medium-up--one-quarter' -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = 'small--one-whole medium-up--one-fifth' -%}
{% endcase %}

 

Thanks a lot.

 

Jue

0 Likes
Tejas_Nadpara
Shopify Partner
1034 215 504

@jusk 

 

Go to the Sections > collection.liquid file and search for the "grid" schema settings:

grid_size.png

here, you have to set min value 1 like following:

{
        "type": "range",
        "id": "grid",
        "label": "Products per row",
        "min": 1,
        "max": 5,
        "step": 1,
        "default": 3
}

then replace your switch case code with following:

{% case section.settings.grid %}
    {% when 1 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-whole' -%}
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
jusk
Tourist
5 0 1

Hello Tejas,

 

Thank you for the swift and extremely helpful response! We followed all the step you provided and it worked to center our product image on our homepage. The only issue we face now is that the "Product Name & Pricing" are not centered with the image. Is there a way to adjust that in the same collection.liquid file or is it in a separate liquid file?

 

Thank you again,

 

JUSK

0 Likes
Tejas_Nadpara
Shopify Partner
1034 215 504

@jusk 

 

Try following code to make product title and price on center:

{% case section.settings.grid %}
    {% when 1 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-whole' -%}
       <style>.grid__item--featured-collections a.grid-view-item__link > div {text-align: center;}</style>
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
jusk
Tourist
5 0 1

Thanks once again! 

 

Unfortunately, the style code doesn't seem to move the 'product title' and 'price' to the center of our homepage. I did this in the same collection.liquid we did for the image. Am I adding it to the right area? 

 

-Jusk

0 Likes
Tejas_Nadpara
Shopify Partner
1034 215 504

@jusk 

 

I think your theme has different class name or structure so, send me your store url then I will send exact css code for your store.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
0 Likes
jusk
Tourist
5 0 1

Thanks again Tejas! 

 

Here is our url: https://jusk-designs.myshopify.com

 

-Jusk

0 Likes
Tejas_Nadpara
Shopify Partner
1034 215 504

This is an accepted solution.

@jusk 

 

Use following code for your theme:

{% case section.settings.grid %}
    {% when 1 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-whole' -%}
       <style>#shopify-section-{{section.id}} .grid__item .product-card__title, #shopify-section-{{section.id}} .grid__item .price {
                    text-align: center;
                    width: 100%;
                    float: left;
                    margin: 0 auto;
                    display: block;
            }</style>
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}

Let me know if it not work for you.

 

Thank you,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
jusk
Tourist
5 0 1

Hello Tejas, 

 

This completely resolved everything - and we can't thank you enough for your patience and assistance in this matter :) ! 

 

One Final Question: You don't by any chance know a easy code to get rid of the box that forms when you surround the product image on the Homepage? It creates a funky line and cut's off between the Product Name and the Price. 

 

Once again, thank you for your help. 

 

-Jusk

susashopusa
New Member
1 0 0

can we increase the max height if yes then can you please help us with the further code

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{% endcase %}

0 Likes