Numeric indexing works and I have not seen any shuffle, but I have only experimented with the json type metafield  in liquid a couple of times. ... View more

I installed Ventura and it does not include the feature you are looking for.  You can look for another theme that does, or you can add that functionality by modifying this Theme's code.  First you would need to determine how you want it to work.  One approach is to disable options in the select list based on the selection of another option.  Size 7 in this example using the Ventura theme:   This approach assumes the user will first pick a color then a size since there is now no way to pick size 7 and see the available colors.   The more complex way is to visually show a range of possibilities based on the currently selected options:     This allows the user to select whichever options is most important to them first (size or color in this example) and allows you to give visibly of the other possibilities.   If you are not fully invested in the Ventura theme then I suggest exploring the other options out there see if there is one that better meets your needs in this area.   Good luck with your store.   ... View more

I don't believe liquid supports looping through the associative keys.  I recommend changing the json structure so that you can loop through an array instead.  If you need a list of keys then save that in the json_string as well: { "keys":[ "material", "colors" ], "options":[ { "material":"linen", "colors":[ "black", "white", "red" ] }, { "material":"leather", "colors":[ "black", "white", "red", "natural" ] } ] } www.leftfootsoftware.com   ... View more

Which theme are you using?  This functionality would be part of the theme's feature set.  You should be able to find a theme that supports this, but probably not a free one.    If you are already invested in a theme and need it customized to add this functionality then let us know.  You may also find you need a solution to overcome the 100 variant limitation on a product. www.leftfootsoftware.com ... View more

Shopify has filters that will create an anchor link with a tag added or removed from the current url: https://help.shopify.com/en/themes/liquid/filters/url-filters#link_to_add_tag https://help.shopify.com/en/themes/liquid/filters/url-filters#link_to_remove_tag   It is easier to use these than to attempt the same in liquid.  If you have your tags grouped into categories it is likely you will want to switch the tag in that category when a user select a different option.  Unfortunate link_to_replace_tag is not a Shopify filter so we are back to our own devices to accomplish the replace.  Looking at the free Shopify Supply theme I see their developer opted to use a combination of liquid and javascript to accomplish the replace but I believe it can be done using just liquid.  Maybe their method handles edge cases that I am unaware of.  The liquid example below uses a common a naming convention, category_value, for the tags to group them into categories.  It adds the new tag using the link_to_add_tag filter, then uses the replace filter to accomplish the remove.  It also replaces the title so that it doesn't include the category portion of the tag is not displayed.  Two additional replaces are needed to remove the lingering "+" in the url.   {% assign color_tag = '' %} {% for tag in current_tags %} {% if tag contains 'colors_' %} {% assign color_tag = tag %} {% endif %} {% endfor %} {% for tag in collection.all_tags %} {% if tag contains 'colors_' %} {% assign tag_text = tag | remove_first: 'colors_' %} {% assign title_text_remove_tag = "Remove tag " | append: tag %} {% assign title_text_add_tag = "Narrow selection to products matching tag " | append: tag %} {% if current_tags contains tag %} {{ "" | link_to_remove_tag: tag | replace: title_text_remove_tag, tag_text }} {% else %} {{ "" | link_to_add_tag: tag | replace: title_text_add_tag, tag_text | remove: color_tag | replace: '++', '+' | replace: '/+', '/' }} {% endif %} {% endif %} {% endfor %} www.leftfootsoftware.com   ... View more

I am not sure this will help you, but I will share my perspective which is based on some experience in this problem domain. Shopify was designed for retail.  Anytime you try to use a tool for something it was not designed to do there will be a price to pay.  Shopify can be used to capture wholesale orders, but additional effort is required to fill in the gaps.  Using the same Shopify store for retail and wholesale adds additional complexity, but it can also work in the end: 1. The system cannot manage price levels It also doesn't handle payment terms very well.  If you want to create a wholesale site that accepts orders in advance that are not charged immediately, you will want to create you own checkout page.  Once you commit to that endeavor prices levels are not too difficult to implement using tags and/or metafields associate with the customer.   2. It does not allow you to login to a wholesale customer from the admin side to place an order for them. As admin I believe you can place an order for any customer.  That said, why would you want to.   The point of using a Shopify wholesale site for us was to allow the customer to place  orders themselves.  Most wholesale order management systems do not have this functionality.  If you have a wholesale system you are integrating with Shopify then it is better to enter the order directly into that system if the customer is not placing the order themselves.  Again, Shopify is not designed to be a wholesale system.  If you are attempting to use it as a wholesale order management system you may not be happy with the result.  If you are using it to pull wholesale orders into a wholesale management system then you can succeed.  There are other application designed for wholesale sales that integrate with order management systems that may be more more suited for your requirement (JOOR, NuOrder, Handshake, etc.).  Shopify can be a lower cost alternative if you are willing to put in the effort upfront.   3. You have to authenticate/activate the account via an email going to the customer, instead of just creating an account on the fly or uploading a batch list of customers. You can add customers through the API or import them from the customer screen in Shopify.  If you want the customer to login and place order then sending them an email to set their password is a good thing in my opinion.    4. The system is incapable of handing bundling and discounting properly. Even with the third party apps that are present, it is highly problematic. I agree.  You will need custom code and potentially a custom app to make it work the way you want.  With a custom check out page the discounts are not difficult to overcome.  Bundling is always complicated but manageable with custom code. 5. The changes to the system could be done in a week with a few developers or any developer walking down the street of Austin. Everything is difficult until you understand how to do it.  Even so, it will take more than a week with an experienced developer to make Shopify work as a wholesale website with the features you need.  The API and metafield structures in Shopify make it very customizable and powerful.   As with any software  platform there are limitations and aspects that I find frustrating, but overall it is a strong platform and I prefer it to any other e-commerce solution I have worked with or explored (including 3dcart).    Good luck with your venture.  Let us know if you need assistance.   www.leftfootsoftware.com ... View more

Hi Dan, If I understand the situation correctly your company is "drop shipping" to the consumer on your client's behalf.  The ideal solution your are looking for will require API access to the client's store.  The client's store will need a "location" that represents the inventory available from you as a supplier.  https://help.shopify.com/en/manual/locations/setting-up-your-locations Note the text on that page: "Apps that stock inventory or fulfill orders for you are considered to be locations but don't count towards those limits. When you add such an app to your store, or when you first enable locations, the app is automatically added as a location."   I searched but did not find a published App that meets you needs, however it would be straight forward to create a custom app to integrate with your client's store that would make your available inventory visible to your client's store.  I am assuming your system can provide this information.   We could also pull orders (or partial orders) for the products that need to be shipped from you as a supplier and send tracking information when you ship if your system supports those interfaces. www.leftfootsoftware.com   ... View more

You can get the html page for each filter tag to determine whether the no products message is shown.  Add this to one of the collection page templates or snippets: <script> $(document).ready(function() { $filters = $('li.advanced-filter'); $filters.each( function() { var filter_url = $(location).attr('href') + '+' + $(this).attr('data-handle'); $.get(filter_url, function( data, status ) { var a = data.split('Sorry, there are no products matching your search.'); if (a.length == 3) { var b = this.url.split('+'); var handle = b[b.length - 1]; $("li[data-handle='" + handle +"']").css("opacity", "0.5"); } }); }); }); </script> There is a slight delay as the pages are fetched and processed, but a solution to have that information available in advance is much more complicated.  There is a way to prevent the page from displaying until all the pages are processed by using fetch and promises instead of get, but its probably not worth the effort.   ... View more

For each color  or flavor you need to identify the image associated with a variant of that color.  This code assigns variable featured_image to the image for each color as it loop through the values: {% for product in collection.products %} {% assign featured_image = product.featured_image %} {% assign values = null %} {% if product.options contains "Color" or product.options contains "Flavor" %} {% assign values = product.variants | map: "option1" | uniq %} {% endif %} {% if values %} {% for value in values %} {% assign variant = product.variants | where: "option1", value %} {% if variant[0].featured_image %} {% assign featured_image = variant[0].featured_image %} {% else %} {% assign featured_image = product.featured_image %} {% endif %} {% include 'product-grid-item' with grid_item_width, featured_image %} {% endfor %} {% else %} {% include 'product-grid-item' with grid_item_width, featured_image %} {% endif %} {% else %} <div class="grid-item"> <p>{{ 'collections.general.no_matches' | t }}</p> </div> {% endfor %} Once you identify the the image you replace product.featured_image with featured_image in the html output. Note this example code makes the assumption that Color or Flavor is always the first option. ... View more

I have done it both ways and I find creating a separate product for each color (like the koio.co site) works better.  Having a separate product for each color is advantageous when filtering by color because the customer sees the image that matches the color they are searching for.  Additionally this approach gets around the 100 variant limitation on a product which comes into play easily with shoes.  If you have 13 sizes per color a single product can only support 7 colors.  If you add an option for width with medium and wide you are down to 3 colors.  The koio.com implementation is one way of getting all the products on a page, but there are others that do not require a page reload every time a different color is selected.  Regardless of the approach the first step is to group the related color-products together into a collection so that we know what to show together.  You can use tags or other attributes of the product to create the collections.  Showing them together: Shopify themes convert the product liquid object to JSON in a script to make it accessible to the code javascript code that controls options selection.  Look for code like this in the product.template.liquid or product.liquid file: <script type="application/json" id="ProductJson-{{ section.id }}"> {{ product | json }} </script> Shopify adds product variants to the cart using the variant_id. Published themes are required to use the OptionSelector callback functionality to implement the option selection. This means that for most any theme we can add variants to the product JSON and the DOM that the Shopify code uses to display and navigate options without breaking that functionality.  Start by identifying the collection associated with the product that defines the group.  This code looks for a collection that has a description starting with the word style: {% for collection in product.collections %} {% assign a = collection.description | downcase | truncate: 5, '' %} {% if a == 'style' %} {% assign product_collection = collection %} {% break %} {% endif %} {% endfor %} Next create arrays of variants and images in the group: {% assign variants = product.variants %} {% assign images = product.images %} {% if product_collection %} {% for p in product_collection.products %} {% if p.id != product.id and p.available %} {% assign variants = variants | concat: p.variants %} {% endif %} {% endfor %} {% for p in product_collection.products %} {% if p.id != product.id and p.available %} {% assign images = images | concat: p.images %} {% endif %} {% endfor %} {% endif %}   Go through the code in the file and replace loops that use product.variants and product.images with variants and images variables.     Replace {{ product | json }} with code to recreate a product JSON that contains all variants and images: {"id":{{product.id | json}},"title":{{product.title | json}}, "handle":{{product.handle | json}}, "description":{{product.description | json}}, "published_at":{{product.published_at | json}}, "created_at":{{product.created_at | json }}, "vendor":{{product.vendor | json}}, "type":{{product.type | json}}, "tags":{{product.tags | json}}, "price":{{product.price | json}},"price_min":{{product.price_min | json}}, "price_max":{{product.price_max | json}}, "available":{{product.available | json}}, "price_varies":{{product.price_varies | json}}, "compare_at_price":{{product.compare_at_price | json}},"compare_at_price_min":{{product.compare_at_price_min | json}}, "compare_at_price_max":{{product.compare_at_price_max | json}}, "compare_at_price_varies":{{product.compare_at_price_varies | json}}, "variants":[ {% for variant in variants %} {{variant | json}}{% unless forloop.last == true %},{%endunless%} {% endfor %} ], "images":[ {% for image in images %} {{image | json}}{% unless forloop.last == true %},{%endunless%} {% endfor %} ], "featured_image": {{product.featured_image | json}}, "options":{{product.options | json}}, "content":{{product.comntent | json}} }   Additional effort is required to show only the images associated with the "color-product" for the selected variant.   ... View more

I am relatively new to both Shopify and to Angular.js so maybe this is obvious to the more experienced.  I found it very useful to pass a Shopify "product" object directly to my Angular module so that it could be used by the controllers.  Shopify supports output to json for some "objects."  Angular supports passing a value to the Angular module.  Put it together and you can pass the Shopify json representation of the object to your controller.  This reduces the need for Shopify template variables because the information can be accessed through the the controller. A liquid template is needed to pass the product to the angular module.  I used theme.liquid: {% if template contains "product" %} <script> // <![CDATA[ ShopifyApp.value("product", {{ product | json }} ); // ]]> </script> {% endif %} liquid is not required for Angular App.  I added this as a .js asset. var ShopifyApp = angular.module('ShopifyApp', []) .config(function ($interpolateProvider) { // Change the symbols used to mark Angular code so they do not conflict with Shopify $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); }) .controller('VariantSelector', function($scope, product) { $scope.optionselector = new ShopifyOptionSelector(product); }); The file with your Angular App needs to be included priory to assigning a value to the module in the liquid template. I hope this helps others as much as your post helped me.  Thank you.   ... View more