why there are for products shown in 3 column

[zikriarathore]

hye

if you check my website https://37e364.myshopify.com/ and see featured products , they are shown 4.

i even put 3 product 3 column then why showing 4 product.need help 

[Laza_Binaery · Accepted solution]

Yes, dummy products. As I said, when you choose collection it will show exactly 3 products in 3 columns.

But if you want to keep dummy products and show 3 by 3, maybe just for general layout flow, then you have to edit the code

in sections/featured-collection.liquid  line 101, so instead of 4 it should be 3 in the first line of for loop 

          {%- for i in (1..3) -%}
            <li
              class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
              {% if settings.animations_reveal_on_scroll %}
                data-cascade
                style="--animation-order: {{ forloop.index }};"
              {% endif %}
            >
              {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
              {% render 'card-product',
                show_vendor: section.settings.show_vendor,
                placeholder_image: placeholder_image
              %}
            </li>
          {%- endfor -%}

[Laza_Binaery · Accepted solution]

Did you change 4 to 3 in the code I mentioned in sections/featured-collection.liquid ?

[Laza_Binaery]

Hi @zikriarathore 

It shows 4 products because that is a code for placeholder products. It is a loop of 4.

But if you choose collection in section settings, it will display correctly a maximum of 3 and 3 in a row.

[zikriarathore]

what are placeholder products? you mean dummy products? can i show exactly 3 by 3 for featured products?

[Laza_Binaery · Accepted solution]

Yes, dummy products. As I said, when you choose collection it will show exactly 3 products in 3 columns.

But if you want to keep dummy products and show 3 by 3, maybe just for general layout flow, then you have to edit the code

in sections/featured-collection.liquid  line 101, so instead of 4 it should be 3 in the first line of for loop 

          {%- for i in (1..3) -%}
            <li
              class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
              {% if settings.animations_reveal_on_scroll %}
                data-cascade
                style="--animation-order: {{ forloop.index }};"
              {% endif %}
            >
              {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
              {% render 'card-product',
                show_vendor: section.settings.show_vendor,
                placeholder_image: placeholder_image
              %}
            </li>
          {%- endfor -%}

[zikriarathore]

thanks for explaination.

actually i dont have any products added yet. you mean once i add products in my store and put them in featured products category then 3by 3 will work.do you know how to rename "featured Product" heading of the section and change its place in to the centre . if you see fujisports.com  

there are so many sections with different categories.

my website https://37e364.myshopify.com/  . i want when i add section "featured collection " as you can see on my homepage it is "Men" it should be in centre , for any collection i add ,its heading should be in centre. same like fuji sports 

[Laza_Binaery]

Yes, trust me it will look fine 🙂

If you mean on the "Featured collection" title yes, you can change it in the Heading setting

[zikriarathore]

but here it is showing 4 products i done the same setting as you did

[zikriarathore]

[Laza_Binaery · Accepted solution]

Did you change 4 to 3 in the code I mentioned in sections/featured-collection.liquid ?

[zikriarathore]

no i didnt change any thing in code? what should i change in code ? in which file?

[zikriarathore]

worked ! do you know how to add onhover effect ,border of the product should be red ,if you see fuji sports home page and put cursor on products 

[Laza_Binaery]

For the red border, you can add this code to the end of base.css

.collection li.grid__item {
    border: 4px solid rgba(0,0,0,0);
}

.collection .grid__item:hover {
    border-color: #e81c3f;
}

But that is just a start you would need to align text and price in settings. And to get the same as Fiji sports you will have some work.

So please do open a new topic, it could also help other people in future as would be easier to find.

[zikriarathore]

what do you mean by align text and price in settings, are you talking about  product page? you mean after putting this code in base.css ,is it going to effect text and price alignment in product page? 

[zikriarathore]

if you see fujisports on mobile there is no red border on mobile version,how can i disable it on mobile version and  enable on desktop

[Laza_Binaery · Accepted solution]

No, I told you to align the text and price in the product cards in the featured collection section, so that they are in the center like fuji sports.

For mobile then replace the previous code with 

@media screen and (min-width: 750px) {
	
	.collection li.grid__item {
	    border: 4px solid rgba(0,0,0,0);
	}

	.collection .grid__item:hover {
	    border-color: #e81c3f;
	}
}

That way hover will be only on bigger screens.

[zikriarathore]

thank you so much it worked great ,so kind of you ,i really appreciate the way you helping me

[zikriarathore]

hye

if you see my website on mobile ,there is something wrong with slider images it is showing half ,why there is red line under slider image.it is cover half image ,it should be full

[zikriarathore]

if you see fuji sports 

this is how featured products are shown, how can i show my products in mobile version ,

all products in a row

[zikriarathore]

kindly check my websites slider images on mobile version , there is a red line under images ,why they are not shown full?

[Laza_Binaery]

Hi @zikriarathore 

Please next time, follow the forum guidelines and create a new topic.

For the red line on mobile, that is a bit strange but it is meant to be a container for content. On desktop there is a checkbox that hides the whole box but on mobile, there is no same option and the block is displayed even if it is empty. Note you should have some text there and a button to lead customers to the pages you want.

For the mobile slider, you need to do a few things. First, you need to select a collection with more the 4 products. Then under Mobile layout enable "Enable swipe on mobile" and choose 1 or 2 column layout. Note: slider does not seems to work with dummy products, probably because number or dummy products.

Here is a screenshot: you can see two section, first with 1 column and second with 2 column mobile layout.

To make exactly the same as fuji sports there is some work or even choosing a different slider library.

[zikriarathore]

thank you i started new topic,what do you mean by choosing a different slider library , i sorted out that issue with slider images , now they are perfect