Forums
Engage with the Storenvy community to get help when you need it—or just to have a good time. Start with any of the categories below.
On the blog, i noticed there is a post about a cool product slider for your shop. it is linked to a page that has code that you can put onto your page. Now, my knowledge of HTML is extremely EXTREMELY limited, so... is there anyone out there who can help me with this? i would like this slider on my page!!!
http://blog.storenvy.com/2011/06/26/new-use-your-own-javascript-flash-etc-plus-cool-product-slider/
42 Replies
i want that too!
There's an instruction here:
https://gist.github.com/1048169
I just added it to my friend's store. (slightly different code)
http://momospiggery.storenvy.com/
Lissie, woah that's amazing! (Yeah I don't understand any code) Do you know of a way to put a welcome page and from there you could get to the homepage of the store?
@Jordan, Thanks! You could update your homepage code to have welcome message and have it point to your "All Products" page.
maybe i need to pick up a book like 'CSS for Dummies', because i tried to put it into the code with no luck. :( like i said, my knowledge of HTML is limited, and i have no idea about CSS or Javascript.
I literally need something that goes:
Step 1: blah blah blah
Step 2: blah blah blah... etc.
haha @CuriousCrow me too! I think a book for dummies might still confuse me though! >.<
@Lissie hmmm ok, that's a good idea! I think I might enlist the help of my uncle. Whether I like to admit it or not he is a computer genius!
Step 1: Go to your "Store Admin".
Step 2: Click on "Design" tab.
Step 3: Click on "Edit Styles".
Step 4: Click on "CSS MODE".
Step 5: Scroll all the way to the bottom of CSS code.
Step 6: Go to https://gist.github.com/1048169
Step 7: Copy the code from "product_showcase.css" box.
Step 8: Paste the code in your CSS page.
Step 9: Click "Save Changes"
For the javascript and html code, you can put both on homepage.
Step 1: Go to your "Store Admin".
Step 2: Click on "Design" tab.
Step 3: Click on "PAGES".
Step 4: Click on "Home".
Step 5: Click on "Using Custom HTML".
Step 6: Go to https://gist.github.com/1048169
Step 7: Click on "embed" on the same line as "product_showcase.js"
Step 8: Copy the <script> tag that shows up.
Step 9: Paste it in your "Home" code.
Step 10: Go back to copy the code from "product_showcase.liquid" box.
Step 11: Paste it in your "Home" code.
Step 12: Click "Save Changes".
how come it didn't work for me? :(
Hmm... okay.. for the home code, change step 8 to this code:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase.js" type="text/javascript" charset="utf-8"></script>
@lissie yay i got mine to work thanks for the help
@lissie okay check out my store, it's not sliding :( LOL!
@Kohana
this is what i did
for the product_showcase.css
I copied the code from 5 - 135 and pasted it in css mode
the for product_showcase.js
I copied the code from 6 - 156 and pasted it at the bottom of costume html
and for product_showcase.liquid
I copied all of it a pasted it at the top of costume html
I hope this helped and thanks for the follow I did the same -^_^-
@Kohana, Looks like my code got chopped off by the forum software.
I looked at your store code, this should not be part of CSS.
<script src="http://code.jquery.com/jquery-1.6.1.min.js&quot; type="text/javascript" charset="utf-8"></script>
Try copy the CSS again. You can go to this link for CSS and copy all.
https://raw.github.com/gist/1048169/04e86436e47aa16a8ba6d1943f2375264cd86ffe/product_showcase.css
Looks like you got the liquid HTML correct.
You'll need to add script to homepage or layout page.
Copy all the code from https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase.js
Then put it in your home or layout.
Then delete // in front of <script> and in front of </script>
@songinthesnow, You're welcome. Your products are very cute!
i dont know whats wrong but still not sliding, not sure if im doing something wrong,
https://raw.github.com/gist/1048169/04e86436e47aa16a8ba6d1943f2375264cd86ffe/product_showcase --- I Put this cose in the CSS section.
https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase --- I put this in my Layout Page with the // deleted.
Not sliding
You've got the liquid html and CSS right.
You just need to put the script in the right place.
- Delete the code you put at the end of layout page.
- Go to https://raw.github.com/gist/1048169/74075cb4687d9ae323715b700fef96489143facb/product_showcase
- Copy from line 6 down to the bottom
- Go to your layout
- Look for </head>
- Paste the code before </head>
- Remove // in front of <script> and </script>
- Save changes
there you go it worked! YAY!!!!! Thank you so so so much lissie!!!
Kohanadesign I checked your store but didnt see the slide thingy...
aww, i don't know what happened
Kohana,
I can see your slider.
Tested on IE7, Firefox 5 and Chrome.
aww good Thank you lissie :)
You're welcome :)
I really need to keep up with the blog posts. I had no idea they'd implemented this! So. Awesome.
I am really love the slider will bookmark this for later implementation.
i have spent a few hours on this, and it is driving me NUTS. i have tried everything on this list in this forum. i have tried copying and pasting the code on successful slider sites... i think it is just that i don't know enough about coding to fix the issue. when i type the coding into the custom HTML part of my admin page, there is a certain part of the code that turns red, and makes the rest of the code turn red. now, i am assuming that it is letting you know there is something wrong. when i save it, and go to look at my page,.... no slider, just code. :( i am ready to say F it and not have a slider on my page... will someone message me and help?!! cacheofacuriouscrow@yahoo.com
curious, the red means that you forgot to close a tag, or that storenvy's coding doesn't know what you mean.
it's no big deal, really.
i'll email you, ok?
it'll come from yoboseiyo @ gmail
ok so I got finally got it placed where I wanted and ran into same problem disabled did :(
so I followed lissie's directions and reposed code 6 to bottom before </head> and got rid of // in front of <script> and </script> ....
but it's not working... and all the codes below code 63 which is
'<span></span>');
control.attr({
'data-storenvy-for': i,
'class': (i === 0) ? controlCurrent : ''
}).html(controlContent);
all the way down to the end is red....
help? :(
I have almost no idea on how to do anything, my head's too thick, need severe help LOL
I tried to do it and it wasn't working. Very sad I couldn't get it to work.
ok i made a mess, and does not slide.
yeah... this took me all night last night to get it to that point ...
please help us.... :)
Ok, mine's all screwy. I get the slider to slide, but it looks weird, and the admin/design panel is all messed up. When I paste the code into the layout page, everything after
jQuery('<span></span>');
control.attr({
'data-storenvy-for': i,
'class': (i === 0) ? controlCurrent : ''
}).html(controlContent);
Turns red all the way down the page. Any help at all would be greatly appreciated.
I'm totally lost too. I get a huge white line of text down my page lol.
http://simplyenchanted.storenvy.com/
bump again, same as MonkeyMinion, I turn read after the part he/she pointed out and as you can see, my slider isn't as it should be
http://simplyenchanted.storenvy.com/
OMOGOODNESS this is amazing. How did I miss that blog post?!?!?! So cool!
anyone still updating this/helping users? :)
For those who wants to see the actual outcome of it: you can visit my store http://bloomiful.storenvy.com/ or lissie: http://momospiggery.storenvy.com/
I took lissie's instructions but modified it. This is what I did:
Like what lissie wrote:
[Part 1: product_showcase.css #]
Step 1: Go to your "Store Admin".
Step 2: Click on "Design" tab.
Step 3: Click on "Edit Styles".
Step 4: Click on "CSS MODE".
Step 5: Copy this (or go to https://gist.github.com/1048169 and copy from 5-135):
.product_photo_slider {
background: #fff; /*: Product Slider Background :*/
border: 5px solid #eaeaea; /*: Product Slider Border :*/
color: #555; /*: Product Slider Product Description :*/
display: block;
margin-left:8px;
overflow: hidden;
position: relative;
width: 651px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 0 0 20px #ccc;
-moz-box-shadow: inset 0 0 20px #ccc;
-webkit-box-shadow: inset 0 0 20px #ccc;
}
.product_photo_slider .slide_inner {
margin-left: 80px;
position: relative;
width: 530px;
z-index: 5;
}
.product_photo_slider ul {
width: 9999em;
}
.product_photo_slider li {
float: left;
overflow: hidden;
position: relative;
padding: 20px;
width: 628px;
}
.product_photo_slider .product_photo_slider_bg {
bottom: -100px;
height: 200%;
left: 0;
position: absolute;
z-index: 0;
width: 100%;
}
.product_photo_slider dl {
float: left;
margin-left: 20px;
width: 260px;
}
.product_photo_slider dt {
color: #333; /*: Product Slider Product Name :*/
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
.product_photo_slider dt p {
padding-bottom: 0;
}
.product_photo_slider dd {
font-size: 11px;
line-height: 18px;
padding-top: 10px;
}
.product_photo_slider .product_slider_price {
color: #000; /*: Product Slider Price Color :*/
font-size: 36px;
font-weight: normal;
margin: 10px 0;
}
.product_photo_slider img {
float: left;
}
.product_photo_slider .slider_controls {
background-color: #ccc; /*: Product Slider Controls Background :*/
color: #a3a3a3; /*: Product Slider Controls Color :*/
cursor: pointer;
font-size: 28px;
padding: 5px 0;
text-align: center;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
}
.product_photo_slider .slider_controls span {
margin-right: 2px;
}
.product_photo_slider .slider_controls_current {
color: #333; /*: Product Slider Controls Current Color :*/
}
.product_photo_slider form {
margin-top: 10px;
}
.product_photo_slider select {
display: block;
margin-bottom: 7px;
}
.slider_add_to_cart {
background: -webkit-gradient(linear, left top, left bottom, from(#f8bb3d), to(#f89804));
background: -moz-linear-gradient(top, #f8bb3d, #f89804);
background: -o-linear-gradient(top, #f8bb3d, #f89804);
background-color: #f89804;
border: 1px solid #c57816;
color: #4e3227;
cursor: pointer;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 12px;
letter-spacing: .01em;
overflow: visible;
padding: 7px 18px;
text-align: center;
text-shadow: rgba(255, 255, 255, .3) 0 1px 0;
text-transform: uppercase;
width: auto;
zoom: 1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2);
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .2);
}
.slider_add_to_cart:active {
box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
}
.clear {
clear: both;
}
Step 6: Paste the code in your CSS page.
Step 7: Click "Save Changes"
[Part 2: product_showcase.js # & product_showcase.liquid #]
Step 1: Go to your "Store Admin".
Step 2: Click on "Design" tab.
Step 3: Click on "PAGES".
Step 4: Click on "Home".
Step 5: Click on "Using Custom HTML".
Step 6: Copy all of this (or go to https://gist.github.com/1048169 and copy from product_showcase.js # 6-156 & product_showcase.liquid # 4-39)
(Make sure the codes go between <head> & </head>)
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
(function () {
// Plugin requires jQuery
//var $ = jQuery.noConflict():
jQuery(function () {
var
/**
* STUFF YOU CAN CHANGE
*/
// Time between slides in milliseconds
delay = 3000, // 3000 / 1000 = 3 seconds,
// Sliding animation speed
speed = 300,
// Specify the html contents of your slider controls
controlContent = '•',
/**
* !!STUFF YOU SHOULDN'T CHANGE!!
*/
// Timer object placeholder
timer,
// The slider list element
slider = jQuery('.product_photo_slider ul'),
// The slider controls element
controls = jQuery('.slider_controls'),
// Classname for the slider controls
controlCurrent = 'slider_controls_current',
// Cache all the slides within the slider
slides = slider.find('li'),
// Cache the slides total
total = slides.length,
// How wide is a slide?
slideWidth = slides.first().outerWidth(),
// Keep track of which slide we are on currently
currentSlide = 1
;
// Initiate our first slide action
timer = _delaySlide();
// Create the controls at the bottom
function _createControls() {
for (var i = 0, l = total; i < l; i++) {
var control = jQuery('<span></span>');
control.attr({
'data-storenvy-for': i,
'class': (i === 0) ? controlCurrent : ''
}).html(controlContent);
// Make sure clicks on a control send the slider to the right slide
control.bind('click', function (e) {
var el = jQuery(this);
controls.find('.' + controlCurrent).removeClass(controlCurrent);
el.addClass(controlCurrent);
_slide(el.attr('data-storenvy-for'));
return false;
});
controls.append(control);
}
};
// Move the slider left or right
function _slide(exact) {
var distance, to;
// If we've specified an exact slide to go to, use that instead of the current slide.
to = exact || currentSlide;
// How far are we sliding, in pixels
distance = (to * slideWidth) + 'px';
// We are going to a specific slide
if (exact !== undefined) {
currentSlide = exact;
_animate('-' + distance);
return true;
}
// Looks like we are at the end of the list, we should go back to the start.
if (currentSlide === total) {
distance = '0';
currentSlide = 0;
} else {
// We want to slide left, so we have to use negative values
distance = '-' + distance;
}
_animate(distance);
};
// Animate the slider movement
function _animate(distance) {
controls.find('.' + controlCurrent).removeClass(controlCurrent);
controls.find('[data-storenvy-for="' + currentSlide +'"]').addClass(controlCurrent);
// Animate the slider, increment the current slide, and set a timer
slider.animate({ 'margin-left' : distance }, speed, function () {
currentSlide++;
timer = _delaySlide();
});
};
// Delay our sliding actions
function _delaySlide() {
clearTimeout(timer);
return setTimeout(function () {
_slide();
}, delay);
};
function _createBackgroundImages() {
slides.each(function () {
var el = jQuery(this), img = el.find('img'), src = img.attr('src');
var bg = new Image();
bg.src = src;
bg = jQuery(bg).addClass('product_photo_slider_bg');
el.append(bg.fadeTo(0, .2));
});
};
function _setupSlider() {
_createControls();
_createBackgroundImages();
};
_setupSlider();
// Pause sliding on hover and resume on hover off
slides.hover(function () {
clearTimeout(timer);
}, function () {
timer = _delaySlide();
});
});
})();
// </script>
<div class="product_photo_slider">
<ul>
{% for product in products.current limit:6 %}
<li>
<div class="slide_inner">
<img src="{{product.image.medium_url}}" alt="{{product.name | h}}">
<dl>
<dt>
<p><strong>{{product.name}}</strong></p>
<p class="product_slider_price">$<strong>{{product.price | money}}</strong></p>
</dt>
<dd>
{{product.description | truncate:140}}
<a href="{{product.url}}">Read More</a>
<form action="http://www.storenvy.com/cart" method="post">
{% if product.variants_in_stock.size > 1 %}
<select name="variant_id">
<option value="" selected="selected">Please select...</option>
{% for variant in product.variants_in_stock %}
<option value="{{ variant.id }}">{{ variant.name }}</option>
{% endfor %}
</select>
{% else %}
<input type="hidden" name="variant_id" value="{{ product.variants_in_stock.first.id }}" name="variant_id" />
{% endif %}
<input type="submit" name="submit" value="Add to Cart" class="slider_add_to_cart">
</form>
</dd>
</dl>
<div class="clear"></div>
</div>
</li>
{% endfor %}
</ul>
<div class="slider_controls"></div>
</div>
Step 7: Paste it in your "Home" code. (The code might appear "red", just ignore it. Mine did appear red, but it worked fine for me.)
Step 8: Click "Save Changes".
Once the slider works, go back to the code and change the color and customize it in your style.
bloomiful
Could you please look at my shop and see what I did wrong.
I believe that I did the first half just fine. It was the last part that confused me when you said to make sure the cold goes between <head & head>
http://rarejewels.storenvy.com/
Of course with me not having a banner yet - this may be why it is not working.
Jo
Rarejewels: when you add Part 2 into Step 5: Click on "Using Custom HTML", you will see that <head> is the first code. That is the beginning. (I tweaked my HOME page. So, I forgot how the original hmtl template is). You paste the code after <head>. Make sure </head> is at the bottom. For instance, it should look something like this:
<head>
(paste all of the codes for the slider)
</head>
i can get it to slide, but the style sheet is not activating. Maybe the script isnt finding the style sheet??
I've tried everything too, exactly how the steps 1-10 are said. No such luck. Have reset my CSS code.
thanks, it work. :))
Please log in to comment.