shopify - Displaying Collection thumbnails by matching Variant -


one of collections on shopify theme i'm editing uses settings: products must match - variant's title contains red

how go tweaking collection-loop.liquid template (or other snippets?) have collection use relevant variant product images associated red thumbnails, without messing other collections?

a: make alternate template , apply collection(s) in question

shopify allows make multiple templates each of main types of pages , set 1 want use in admin.

step 1: open theme editor live theme

  • go [your-shopify-store].myshopify.com/admin/themes
  • the top half of admin screen should showcase of live theme. click 'actions' (right above main preview) , select 'edit html/css'

step 2: create 'red' template

  • in folder list on left-hand side of editor, open 'templates' folder , click 'new template'
  • select 'collection' type , give name makes sense.

step 3: make desired updates file show off redness.

  • eg: images being displayed, first loop through variants on product , image of first variant 'red' option value.
  • depending on how theme set up, may need edit and/or duplicate-and-change 1 or more snippets. can find one(s) following 'include' , 'section' tags. 'include' tag points files in 'snippets' folder, , 'section' tag points files in 'sections' folder.
  • for drastic changes, recommend creating new snippets , including in alternate template instead. minor changes, though, can find out if you're on alternate template through liquid variable template.suffix
  • for example, loop through variants find 1 variant.title contains template.suffix - make collections.blue, collections.green, etc. , not need make further edits snippet.

step 4: preview alternate template make sure want

  • if collection called 'shirts' , alternate template called 'red', preview template as: /collections/shirts?view=red - view=red part tells shopify load alternate template.

step 5: repeat steps 3 & 4 until you're happy results.

step 6: apply new collection template collection(s) want default cool (hot?) new style.

  • in shopify admin, select (from left-hand navigation) 'products' 'collections'
  • select collection want apply template to
  • now have @ least 1 alternate template, template selector should visible in right-hand column.
  • change template default new one, click save, kick , relax!

finding appropriate image show

this part vary in complexity depending on how products set up. going assume there option on each product named 'color', 'color' can of 3 option columns on product (ie, can't assume first option colour option)

step 1: make new snippet contain image-finding logic (it keeps our code clean , reusable)

  • in theme editor, make sure 'snippets' folder expanded in right-hand pane
  • click 'add new snippet' link
  • give file meaningful name (such 'find-color-image')

step 2: in alternate collection template, find product loop , include new snippet

  • first, find product loop. should {% product in collection.products %}

  • immediately after above line, add {% include 'find-color-image', color: template.suffix, product:product %}(assuming template name matches colour looking - otherwise, change template.suffix colour want (wrapped in quotes), such 'red')

step 3: build find-color-image snippet. following code should you're looking for.

{% comment %} find-color-image.liquid: given product , colour,  set variable named color_image first variant image matches specified colour {% endcomment %}  {% comment %} clear leftover variables previous includes {% endcomment %} {% assign color_image = nil %}  {% comment %} loop through variants find 1 matching our colour {% endcomment %} {% variant in product.variants %}   {% comment %} don't care variants without featured image - skip using continue {% endcomment %}   {% unless variant.featured_image %}{% continue %}{% endunless %}    {% comment %}make sure comparison case-insensitive. variable named color expected passed when snippet included {% endcomment %}   {% assign opt1 = variant.option1 | downcase %}   {% assign opt2 = variant.option2 | downcase %}   {% assign opt3 = variant.option3 | downcase %}   {% assign target_color = color | downcase %}    {% comment %} check see if 1 of above options matches our target colour {% endcomment %}   {% if opt1 == target_color or opt2 == target_color or opt3 == target_color %}     {% assign color_image = variant.featured_image %}     {% break %}   {% endfor %}  {% endfor %}

step 4: update image links in collection template

  • change references product's image color_image variable set in above snippet.

hope helps!


Comments

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more