Shopify Featured Product Slider

Question

So I have a featured section part of a Shopify website, I initially was going to set up an array of static data and have the featured product fade in/out every few seconds through that. However, my JS isn't working yet I am POSITIVE it's correct. Is this a problem with Shopify itself? If anyone could explain to me a way of fading in/out or creating a mini slider for the specific div i'd really appreciate it.

I was attempting to fade out the div ".big-product"

Here is a screenshot to further visualize. featured product

<h2 class="light">Featured Products</h2>
  {% if collections.frontpage.products.size > 0 %}
    <div class="big-product" id="featprod">

      <div class="product-image" id="product-image">
        <a href="{{ product.url | within: collections.frontpage }}" title="{{ product.title             | escape }} &mdash; {{ product.description | strip_html | truncate: 50 | escape }}"><img src=" {{ product.images.first | product_img_url: 'medium' }}" alt="{{ product.title | escape }}" />                </a>

<div class="product-info">
<h3 class="title"><a href="{{ product.url | within: collections.frontpage }}">{{ product.title }}</a></h3>
<p class="price">
  {{ product.vendor }}
</p>


<p class="description">{{ product.description | strip_html | truncatewords: 40 | escape_html }}</p>

<form action="/cart/add" method="post">
  {% if product.variants.size == 1 %}
    <!-- If there is only 1 variant, only show the purchase button -->
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" id="variant-{{ variant.id }}" />
  {% else %}
    <select name="id">
          {% for variant in product.variants %}
            {% if variant.available %}
                <option value="{{ variant.id }}" id="variant-{{ variant.id }}">             
                {{ variant.title | escape }} for {{ variant.price | money }}
                </option>
            {% else %}
              <option value="{{ variant.id }}" id="variant-{{ variant.id }}" disabled="disabled" class="disabled">              
                {{ variant.title | escape }} &mdash; SOLD OUT
                </option>
            {% endif %}
            {% endfor %}
        </select>
    {% endif %}

  <input type="submit" href="{{ product.url }}" class="button" name="add" value="add to cart" />
  <a href="{{ product.url | within: collections.frontpage }}" class="button">details</a>
</form>

<p class="tags alt">
  {{ product.tags | join: ', ' }}
</p>

Ryan Gill Ryan Gill · Accepted Answer · 2014-12-11T18:54:34

Here is a quick slider example. I'm sure there are more elegant ways to achieve the same effect. I'm just pulling the content 'template' from the features array and putting it in the feature div. And then fading in the content.

var start = 1;

function moveSlider () {  
  $feature.children('div').remove();
  $feature.html(features[start]);
  $feature.children('div').fadeIn();
  start++;

  if (start == features.length) {
    start = 0;
  }
};

setInterval(function () {
  moveSlider();
}, 3000);

Demo

Shopify Featured Product Slider

1 Answers