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
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.
1 Like
what are placeholder products? you mean dummy products? can i show exactly 3 by 3 for featured products?
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) -%}
- {%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
{% render 'card-product',
show_vendor: section.settings.show_vendor,
placeholder_image: placeholder_image
%}
{%- endfor -%}
1 Like
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
Yes, trust me it will look fine 
If you mean on the “Featured collection” title yes, you can change it in the Heading setting
1 Like
Did you change 4 to 3 in the code I mentioned in sections/featured-collection.liquid ?
1 Like
no i didnt change any thing in code? what should i change in code ? in which file?
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
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.
1 Like
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?
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
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.
1 Like
thank you so much it worked great ,so kind of you ,i really appreciate the way you helping me
1 Like
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
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
kindly check my websites slider images on mobile version , there is a red line under images ,why they are not shown full?
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.
1 Like