Shopify themes, liquid, logos, and UX
Hi there, im building my new section. I want to make something with swiper and featured-collections. It seems to work, but i want to modify something..
Right now, it shows all collections in the same row, how can i change it, and just show one collection per row. Just like desktop view.. how can i change it to mobile view
Here is a capture from desktop view, which one its showing correctly.
Here is a capture from mobile view, you can see there it's showing all categories in the same row, and i want to show just one categorie by row
Any code or everything its needed, just contact me, thanks a lot for anyone who can help me!
Solved! Go to the solution
This is an accepted solution.
yes i have update code please check
yes you have try this way code
https://www.youtube.com/watch?v=7DqtFl2KaSg
@KetanKumar i made it with another snippet different than video. That's called SWIPER. and i want to make it with collections, no products.
i can send you link and password if you need it
yes please share us
thanks for it i will check url and let you know
up!!
did you not see message?
@KetanKumar sorry i send you a pm, you're not seeing the correct place at home page, its at the top page mobile view.
yes please share code so i will update
up!!
<div id="bdr_product_faq">
<!-- Add Pagination -->
<div id="bdr_product_faq_pagination">
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
{% for block in section.blocks %}
{% if block.type == "collection" %}
<div class="grid grid--no-gutters" id="collection-list-grid" data-number-rows="{{ number_rows }}">
{% assign row_number = 1 %}
{% for block in section.blocks %}
{% if blocks_count == 5 and forloop.index > 3 %}
{% assign grid_item_width = 'medium-up--one-half' %}
{% assign height = 450 %}
{% endif %}
{% if blocks_count > 4 and forloop.index > 3 %}
{% assign row_number = 2 %}
{% endif %}
{% assign featured_collection = collections[block.settings.collection] %}
<div class="swiper-slide">
{% include 'collection-grid-item' with stretch_collection_image: section.settings.stretch_collection_image, height: height %}
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<script>
$(document).ready(function () {
let titleData = [];// Obtener la matriz de títulos
{% for block in section.blocks %}
{% if block.type == "collection" %}
titleData.push("{{ block.settings.title }}");
{% endif %}
{% endfor %}
var swiper = new Swiper('#bdr_product_faq .swiper-container', {
speed: 1000,// Tiempo de transición ms
autoHeight: true, // altura autoadaptable
pagination: { // Buscapersonas
el: '#bdr_product_faq_pagination',
bulletClass : 'bdr_swiper_pagination_bullet',
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
clickable: true
}
});
});
</script>
some thing is wrong code
if possible to add me staff account and give me just theme access so i will check direct theme code
great thanks let me ck
@KetanKumar okay ill wait till tomorrow you can send me request right now if you want. Thanks a lot
yes i'm back to work but i can't receive any email can you try again
uppp!
i have sent please check
sorry for late reply have i have check this code but theme doesn't proper its reburied to redevelop this section custom code
try this code
https://codepen.io/EllieSadler/pen/NGvrNq
@KetanKumar thanks, but i want to use swiper, not slider. Thanks anyway.
If anyone can help me, just tell me i will send every file is needed!
oh i see don't requires to slider? so wait i will update swipe code if possible access agani
@KetanKumar send me request collaborator again.. i don't know if we are in the same way to make it happen, i mean, i got it workly perfect at desktop view, but in mobile view i dont know why, all collections i used stay in the same row and there is 4xcollections and 4rows, when it will be 1 collection and 4rows (1per1).
yes i have sent please check and let me know
@KetanKumar its done sir! if you want can make it right now in live, to adjust your work!
yes please check this theme
its proper so i will move code live
@KetanKumar i think its almost perfect sir!!! can you make collection cards with more width and height? like this picture?
i have done please check
@KetanKumar i dont know how to tell you.. thanks and thanks... its almost perfect! just to make it perfect, its possible to show images correctly i mean, it seems not centered at all, or maybe resize its not working as well, but i say you again, thanks so much sir!
This is an accepted solution.
yes i have update code please check
@KetanKumar we are so close to get it working perfectly! here is desk view which one is showing correctly resize of images!
Here is mobile view, its a little bit different, i think resize is not working as well like desk view
yes aspect ratio image not portrait it lanscp
@KetanKumar can we make something to make it possible? i don't know what u mean with that.. anyway thanks a lot for your work!
it was change look asper mobile device real device look proper don't worry about it
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024