[steph-sharp]

It looks like the step you’re missing is the first line here:

{% assign collection = collections.all %}

You’re iterating over the current collection, so as you’ve noticed when you click on a tag the results change.

If you don’t have a collection with the handle all, you can create one by following this process:

1. Go to Products > Collections.
2. Click Add a collection.
3. Create the collection:
   1. Give your collection the Title All.
   2. In the Conditions section, select “Automatically select products based on conditions”.
   3. Set the product condition “Product price is greater than $0”.
4. Save

Edit:

This fixes the issue where the product count changes when you click on a tag link:

{% for tag in collection.all_tags %}
    {% assign products_count = 0 %}
    {% for product in collections[collection.handle].products %}
        {% if product.tags contains tag %}
            {% assign products_count = products_count | plus: 1 %}
        {% endif %}
    {% endfor %}
    <a class="filter__link" href="/collections/{% if collection.handle != blank %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handleize }}"{% if current_tags contains tag %} selected="selected" id="tag_active"{% endif %}>{{ tag }} ({{products_count }})</a>
{% endfor %}

The key part is:

{% for product in collections[collection.handle].products %}

It looks like when you’re filtering by tag with a URL like collections/collection_1/tag_1 then collection.products is also filtered by the selected tag. The line above looks a bit messy, but it appears to return the full set of products.

[steph-sharp]

Create a string containing the variable name, then use the square bracket notation to access the setting with that name. For example:

{% capture var %}dropdown-{{ loop_index }}-select{% endcapture %}
{% if settings[var] %}

[steph-sharp]

Multiple conditions in if statements don’t work so well in liquid. See a similar question here.

One option is to use nested if statements:

{% if template == "index" or template == "page" %}
  {% if settings.slideshow_enabled %}
    <div class="container main content">...</div>
  {% endif %}
{% endif %}

Or something like this:

{% if template == "index" or template == "page" %}
  {% assign correct_template = true %}
{% endif %}
{% if correct_template and settings.slideshow_enabled %}
  <div class="container main content">...</div>
{% endif %}

[steph-sharp]

products_count is an attribute of collection, not tag.

I believe you would need to manually loop through the products and count the number with the specified tag.

For example:

{% assign collection = collections.all %}

<ul>
    {% for tag in collection.all_tags %}

        {% assign products_count = 0 %}
        {% for product in collection.products %}
            {% if product.tags contains tag %}
                {% assign products_count = products_count | plus: 1 %}
            {% endif %}
        {% endfor %}

        <li>
            <a href="https://mystore.myshopify.com/collections/all/{{ tag }}">
                {{ tag }}
            </a>
            ({{ products_count }})
        </li>
    {% endfor %}
</ul>

See these similar discussions on the Shopify forums:

• Show item count associated with a tag
• Collection Tag Product Count (non-current view)
• Getting Products By Tags When in a Collection

[steph-sharp]

If I understand correctly, the asset_url filter is what you are looking for.

To include a JS file in a .liquid file, you use:

{{ 'script.js' | asset_url | script_tag }}

And a CSS file:

{{ 'style.css' | asset_url | stylesheet_tag }}

[steph-sharp]

I would suggest checking out this discussion on the Shopify wiki: Mixing dropdown and radio buttons on product page

Caroline posted this answer:

That’s a difficult one, because you need to use option_selection.js to
‘descramble’ variants into options, and option_selection.js generates
drop-downs, one for each option. Personally, I would keep that.

You can add radio buttons for your colors — while keeping your Color
drop-down on the page and hide it with CSS — then update the selected
option in the drop-down when a radio button is checked.

In the following example, anchor elements are used instead of radio
buttons, but the method is the same:
http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify

The lastest version of that color swatch tutorial is available on the Shopify Wiki here, and I’ve used it before with success (although only with the default code, not radio buttons).

If that doesn’t work for you, I think you’re looking at a much more complicated thing to implement… See these other discussions about using radio buttons for variants I found on the Shopify wiki:

• Radio Buttons for product variations?
• Change to Radio Buttons
• Use radio button instead of drop down for Multi-Select
• product variants as radio buttons javascript

EDIT:

In comments below:

…still unsure if I can assign the buttons to custom variant titles using javascript elements.

I had a play around with this idea, and I’m not sure if this is exactly what you are after, but it might give you some ideas on where to start.

My variants are:

• Standard Shipping
• 3 Day Express Shipping. Additional $15
• 2 Day Express Shipping. Additional $25

I added a span below the variants in product.liquid where I display the estimated delivery date, and some jQuery that updates the estimated delivery date text in the span depending on the shipping date selected in the datepicker.

I used the code from Caroline Schnapp in this discussion to create radio buttons for the variants (the same as you did). I modified the code slightly by adding a Line Item Property in a hidden input field just before the end of the form:

<input type="hidden" id="delivery-date" name="properties[DeliveryDate]" /> 

And added 2 lines to the end of this jQuery function to update the hidden line item property when a radio button is clicked:

jQuery("input[type='radio']").click(function() {
  var variant_price = jQuery(this).attr("data-price");
  jQuery(".price-field span").html(variant_price);
  var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
  jQuery(".price-field del").html(variant_compare_at_price);

  var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
  jQuery("#delivery-date").val(delivery_date);
});

Then when the user clicks the Purchase button to add the item to their cart, it shows the variant and line item property something like this:

Not sure if that’s exactly what you’re after, but hopefully some of it is helpful!

EDIT 2:

Here’s the gist: https://gist.github.com/stephsharp/6865599

[Author]

Posts