Solved

why there are for products shown in 3 column

zikriarathore
Excursionist
78 1 7

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 

Accepted Solutions (3)
Laza_Binaery
Shopify Partner
69 19 29

This is an 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 -%}

 

Kind regards
Laza
www.binaery.com

View solution in original post

Laza_Binaery
Shopify Partner
69 19 29

This is an accepted solution.

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

Kind regards
Laza
www.binaery.com

View solution in original post

Laza_Binaery
Shopify Partner
69 19 29

This is an 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.

Kind regards
Laza
www.binaery.com

View solution in original post

Replies 20 (20)

Laza_Binaery
Shopify Partner
69 19 29

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.

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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

Laza_Binaery
Shopify Partner
69 19 29

This is an 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 -%}

 

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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.sc.PNGsc2.PNG

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
Shopify Partner
69 19 29

Yes, trust me it will look fine 🙂

 

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

screenshot-admin.shopify.com-2024.02.01-12_41_39.png

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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

products.PNG

zikriarathore
Excursionist
78 1 7

product1.PNG

Laza_Binaery
Shopify Partner
69 19 29

This is an accepted solution.

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

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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

zikriarathore
Excursionist
78 1 7

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
Shopify Partner
69 19 29

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.

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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
Excursionist
78 1 7

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
Shopify Partner
69 19 29

This is an 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.

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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

zikriarathore
Excursionist
78 1 7

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
Excursionist
78 1 7

if you see fuji sports schotimage.PNG

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

all products in a row

zikriarathore
Excursionist
78 1 7

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

Laza_Binaery
Shopify Partner
69 19 29

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.

screenshot-admin.shopify.com-2024.02.03-20_30_14.png

 

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

Kind regards
Laza
www.binaery.com
zikriarathore
Excursionist
78 1 7

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