Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Good day!
I have been trying to format a promising Flickity script in order to use it to showcase my newest products. I've tried many different formats by very very carefully paying attention to the dev's instructions. Ultimately the one that worked was one that was the one I will show below.
My problem is that when I choose a collection to feature, the images are not uniform and the mobile version squashes together. The most recent attempt resulted in me trying to implement the card-product template, but when they're replaced by images, again, the images are not uniform and now I have an inconsistency in the font links as well (the product price in the image turned blue like a normal hyperlink).
I would like to have my images displayed in a uniformed manner when featuring a collection's products and I would like my mobile version to show a singular centralized image (though I'm sure the previous and next images will be partially shown at the sides, which is absolutely fine).
I am using Ride ver. 14 and I run an adult retail site (so screenshots will be hard...sorry).
I have the Flickity license, so I have the js and css files if they need to be used. So please let me know.
I commented out Product Card options because I couldn't figure them out. So if you manage to figure it out, thank you so much! If you cut it out of your corrected version, I'd be happy with that too!
I'm at my wit's end. So thank you for your help.
Here is the script I'm trying to use:
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
{% comment %}
* Make sure you have the Flickity plugin installed and the proper license for this to function on your store
* Plugin, licensing and documentation at https://flickity.metafizzy.co/
{% endcomment %}
{% comment %} This previously went within the Schema section for the settings. It can go back once the label has been translated correctly.
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:section.products.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:section.products.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:section.products.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:section.products.settings.image_ratio.label",
"info": "t:section.products.settings.image_ratio.info"
},{% endcomment %}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{% assign collection_main = collections[section.settings.collection_main] %}
{% assign collection_limit = section.settings.collection_limit %}
{% assign cell_align = section.settings.cell_align %}
{% assign wrap_around = section.settings.wrap_around %}
{% assign img_width = section.settings.img_width | append: 'x' %}
<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">
<div class="page-width">
<div>
<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>
</div>
<div class="flickity-section__carousel carousel-{{section.id }} text-center"
data-flickity='{
"cellAlign": "{{ cell_align }}",
"resize": true,
"autoPlay": 2500,
"pageDots": false,
"prevNextButtons": false,
"freeScroll": true,
"pauseAutoPlayOnHover": true,
"wrapAround": {{ wrap_around }}
}'>
{% for product in collection_main.products limit: collection_limit %}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | img_url: img_width }}" alt="{{ product.title }}">
<h4>{{ product.title }}</h4>
<p>{{ product.price | money }}</p>
</a>
</div>
{% endfor %}
{%- for product in collection_main.products -%}
<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">
{% render 'card-product',
card_product: section.settings.product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
section_id: section.id
%}
</div>
{%- endfor -%}
</div>
</div>
</div>
<style>
.flickity-section-{{ section.id }} .page-width {
max-width: 100% !important;
}
@media screen and (max-width: 749px) {
.carousel__cell {
width: 50% !important;
}
</style>
{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "collection",
"id": "collection_main",
"label": "Choose a Collection"
},
{
"type": "range",
"id": "collection_limit",
"min": 2,
"max": 50,
"step": 1,
"unit": ".",
"label": "How many products to show",
"default": 5
},
{
"type": "color",
"id": "bg",
"label": "Background Color"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "New Featured Collection Slider"
},
{
"type": "range",
"id": "img_width",
"min": 200,
"max": 600,
"step": 5,
"unit": "px",
"label": "Image Width",
"default": 200
},
{
"type": "select",
"id": "cell_align",
"label": "Slide Alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
],
"default": "center"
},
{
"type": "range",
"id": "title_mb",
"min": 30,
"max": 120,
"step": 1,
"unit": "px",
"label": "Title Margin Bottom",
"default": 48
},
{
"type": "select",
"id": "cell_width",
"label": "Choose number of slides to show on start",
"options": [
{
"value": "50%",
"label": "Two"
},
{
"value": "33%",
"label": "Three"
},
{
"value": "25%",
"label": "Four"
},
{
"value": "20%",
"label": "Five"
},
{
"value": "16.6666667%",
"label": "Six"
},
{
"value": "12.5%",
"label": "Eight"
}
],
"default": "25%"
},
{
"type": "radio",
"id": "wrap_around",
"label": "Enable Wrap Around (endless scrolling)",
"options": [
{
"value": "true",
"label": "True"
},
{
"value": "false",
"label": "False"
}
],
"default": "true"
},
{
"type": "range",
"id": "mr",
"min": 0,
"max": 48,
"step": 1,
"unit": "px",
"label": "Cell Margin Right",
"default": 16,
"info": "Save page to see changes."
}
],
"presets": [
{
"name": "New Featured Collection Slider",
"category": "Slider"
}
]
}
{% endschema %}
Hi @ToysAfter12 👋 Even if you had inspectable examples your asking someone to implement a full blown feature for you, which is beyond the scope of the forums.
Your trying to combine to many things in one go,
Step back and make a minimal reproducible test case that is only HTML,CSS,and JS so you understand the library better itself, no shopify-theme involved.
Ignore the themes underlying source-code , ignore liquid, get the rendered HTML structure from the website for the the UI your trying to utilize ; such as using view-source(ctrl+u) or a browser devtools(F12 or ctrl+shift+c to inspect elements)
Then put only the smallest amount of HTML need into sandbox tool like codepen, jsbin, etc to then work with the library.
Get something dead simple working first then add complexity.
If you just need this customization implemented for you then contact me for services
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024