How do I integrate the Product Card template and settings into a Flickity Slider.

Technical Q&A
, ,

Topic summary

A user is attempting to integrate Flickity slider with Shopify’s Ride theme (v14) to showcase new products from a collection. They have a valid Flickity license and access to the necessary JS/CSS files.

Main Issues:

  • Product images display non-uniformly within the slider
  • Mobile version squashes images together instead of showing a single centered image
  • Attempted to implement the card-product template, but this caused additional problems with font styling (product prices appearing as blue hyperlinks)

Code Provided:
The user shared their current Flickity implementation with commented-out Product Card options they couldn’t configure properly. The code includes schema settings for image ratio, slide alignment, image width, and collection selection.

Discussion Status:
A responder suggested the request is too complex for forum scope and recommended:

  • Creating a minimal reproducible test case using only HTML/CSS/JS
  • Testing the Flickity library independently before integrating with Shopify
  • Using browser dev tools to inspect rendered HTML

The original poster responded negatively to this advice, feeling patronized. The thread remains unresolved with no working solution provided.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
2

Hi @ToysAfter12 :waving_hand: 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.

1 Like