Utility functions



Insert collections on any page

Tool to help create your collection - /insertcollection



Base code 



<script type="text/template" class="insertcollection">{
	"codenameOfCollection": [["SCARBLSF", "AMALFIQM", "BGL4ETQM", "CRLTONTM"], "home-page-october-14-2022-featured-products-date-october-14-2022-october-28-2022"]
}</script>

<div id="insertcollection_codenameOfCollection"></div>

There's 2 parts to inserting a base collection. The #insertcollection_codenameOfCollection div will be where the collection is inserted. This div's id needs to start with insertcollection_.

The script is located in the <script type="text/template" class="insertcollection">. You can copy the format from above, the first array is the order and skus that will be used followed by the collection handle that contains all the products you've chosen. If one doesn't exist it will need to be created.
"codename": [["sku array"], "handle"]




Homepage example 



<script type="text/template" class="insertcollection">{
"testcollection1": [["SCARBLSF:img2::pos3 img3 col2 row2", "AMALFIQM", "BGL4ETQM", "CRLTONTM"], "home-page-october-14-2022-featured-products-date-october-14-2022-october-28-2022"]
}</script>

<div id="insertcollection_testcollection1" class="cards salebadge savestory"></div>

Similar to the base code. Featured images are supported using a double colon(::) after the sku in the collection array SCARBLSF::pos3 img3 col2 row2.

By default all products will show the first image set. If you'd like to use a different image, add a single colon(:) with imgX for example SCARBLSF:img2. This must go directly after the sku (and before the double colon if it's being used for the featured section).

posX = positioned Xth spot (from top left)
imgX = uses Xth image
colX = spans X rows (horizontally) - optional (will default to 1 if not specified)
rowX = spans X rows (vertically) - optional (will default to 1 if not specified)

There is also the class="cards salebadge". "cards" will add padding and boxshadows, while "salebadge" will add the sale circle for applicable product.

When selecting the "featured image" make sure to count starting at 0. This number system aligns with how liquid calls the images for example product.images[0] is the first image.




Homepage example 2 (Mattresses) 



<script type="text/template" class="insertcollection">{
"testcollectionM": [["AMALFIQM", "BGL4ETQM", "DERBYCQM", "CRLTONTM"], "home-page-october-14-2022-featured-products-date-october-14-2022-october-28-2022"]
}</script>

<div id="insertcollection_testcollectionM" class="cards salebadge mattress"></div>

Adding the "mattress" tag will force all products pulled to use the 4th image (used for lifestyle images when only mattresses).




Add to cart support 



<script type="text/template" class="insertcollection">{
"testcollection2": [["DARBLACC", "RWOS6547"], "home-page-june-18-2022-featured-products-date-june-18-2022-june-19-2022"]
}</script>

<div id="insertcollection_testcollection2" class="addtocart"></div>

Just add the "addtocart" class to allow customers to add them to cart!




Customized template 



<script type="text/template" class="insertcollection">{
"testcollection3": [["DARBLACC", "RWOS6547"], "home-page-june-18-2022-featured-products-date-june-18-2022-june-19-2022"]
}</script>

<div id="insertcollection_testcollection3" class="cards"></div>

<script type="text/template" class="inserttemplate" for="testcollection3">
<li class="insertproduct" data-sku="##SKU">
  <div class="desc">
    <h5><a href="##LINK">##TITLE</a></h5>
    <div class="price" data-price="##TOTAL">##PRICE</div>
  </div>
  <div>
    <div class="langEN">Something custom</div>
    <div class="langFR">French and fabulous</div>
  </div>
  <a href="##LINK">
    <div class="product-image">
      ##BADGE
      <img class="lazy" src="https://cdn.shopify.com/s/files/1/2660/5202/t/376/assets/lazyPixel.png" data-src="##IMG" alt="##ALT" loading="lazy">
      <img src="##IMG" alt="##ALT" loading="lazy">
    </div>
  </a>	
</li>
</script>

The ##WORDS are dynamically replaced, these are the terms currently supported:

##ATC = Add to cart button (needs the addtocart class to show/work)
##BADGE = sale badge (needs the salebadge class to show/work)
##SKU = product sku
##TITLE = product title
##LINK = product handle/link
##ID = variant id
##IMG = featured image url
##TOTAL = unformatted price (hidden attribute in case of future scripts)
##PRICE = formatted price




Utility classes for inserted collections

The following are classes that can be added to the #insertcollection_codenameOfCollection div.

CSS only
clamp = max 2 lines of text with elipses ending
cards = box shadow and padding
nolink = disables links

Other
salebadge = sale circle on applicable product
addtocart = enables add to cart button




Initiate Flexslider on any page

Base code 



<div id="insertcollection_testcollectionFlexslider" class="utility flexslider"></div>

To initialise flexslider on an element, add the classes "utility" and "flexslider".

By default, dots and arrows (for the slider navigation) will exist and be positioned below the carousel. 4 items will show at a time on desktop, while 2 will show for tablet and mobile (max screen width of 991).

The settings can be customised by overwriting the full flexslider settings OR by adding in some attributes to the .utility.flexslider div.


Adding attribute method 


<div id="insertcollection_testcollectionFlexslider" class="utility flexslider" data-move="2" data-margin="15" data-width="115" data-sml="1" data-med="3" data-lrg="5"></div>

data-move = how many items move when navigating (default is 1)
data-margin = space between items (default is 10px)
data-width = width of items (only use for small sizes when not having a fixed number of elements)

data-sml = mobile (max screen width 768px)*
data-med = tablet (max screen width 991px)*
data-lrg = desktop (min screen width 992px)*
* Number of elements to show at a given screen width


Overriding settings 


<div id="insertcollection_testcollectionFlexslider" class="utility flexslider" settings="codenameForSettings"></div>

<script type="text/template" class="flexslidersettings" settings="codenameForSettings">{
  "animation": "slide",
  "controlNav": true,
  "animationLoop": true,
  "slideshow": false,
  "itemWidth": 200,
  "itemMargin": 15,
  "move": 2
}</script>

The unique name under the "settings" attribute will link the override settings with your flexslider.




Options for Controls 



<div id="insertcollection_testcollectionFlexslider2" class="utility flexslider centerarrows outsidearrows" data-controls="arrows"></div>

Attributes
data-controls="arrows dots" (shows arrows and dots)
data-controls="arrows" (shows arrows only)
data-controls="dots" (shows dots only)

CSS classes
centerarrows = center aligns with product
outsidearrows = aligns outside so products match up with parent div




Support for divs without flexslider formatting

White/Ivory

Beige/Taupe

Grey

Blue

Black/Brown

Red

Yellow/Orange

Pink

Green

Metallic

Multicolour

 


<div class="container-swatches utility flexslider" data-sml="2" data-med="3" data-lrg="5">
  <a>element 1</a>
  <a>element 2</a>
  <a>element 3</a>
</div>

^ Changes to: 


<div class="container-swatches utility flexslider" data-sml="2" data-med="3" data-lrg="5">
  <ul class="slides">
    <li><a>element 1</a></li>
    <li><a>element 2</a></li>
    <li><a>element 3</a></li>
  </ul>
</div>

When adding the utility flexslider classes to an element that's missing the <ul class="slides"><li></li></ul> format, the script will create the <ul class="slides"> and wrap all children elements in <li">.