Search code examples
javascriptjqueryflexsliderbigcommerce

Bigcommerce Image Variables- Making a product-page-productimage-slideshow

i need two things:

  1. a great resource that goes into detail about all the various template variables....i finally found a resource that lists all of the variables on springmerchant...but it doesnt speak about what they do and/or how they do it.

secondly, this is for switching the bigcommerce-standard cloudzoom feature for something like a flexslider slideshow; therefore, i would love some insight into product images and what variables i can use....i know there is a variable that will output a specific products' tinyimages/thumbnails dynamically based on unknown method...i would like to know if there is a variable that does this except with full-size images.

what i am trying to accomplish:

something similar to coton-colors product-slider http://coton-colors.com/black-chevron-dinner-plate

Solution

  • Why not just grab the data that is already part of the product page? The tiny thumbnails have data attached to them pointing to the full res images(you should be able to find those variables, too). You can just use a script to create an array based on each full size image, then pass the values into your slider.

    For the best list of variables and where the can be used, take a look at https://developer.bigcommerce.com/themes/snippets and https://developer.bigcommerce.com/themes/panels

    By clicking on each panel or snippet they show you the variables that can be used.

    Best of luck!