Support

This article only applies to the old designer. Not sure which designer you have? Check here.

By default both your subscription products and one-time purchase products will be displayed on your site in the order that they are created in the Merchant Portal, with the most recent product being displayed first. This means the fail proof way to rearrange products, which works one hundred percent of the time, is to hide or delete all existing products and then recreate them in the desired order, with the product meant to display LAST being created FIRST, and going down the line to the product meant to display FIRST, created LAST. This is admittedly time-consuming, and, at least in the case of subscription products, there are code-based ways to achieve largely the same goal, which will be outlined below.

It is worth nothing that at this time, rearrangement of products cannot be done through the Visual Designer. Without creating new products, delving into the code editor is the only option. This guide will do its best to elucidate the process step by step, but if you find yourself uncomfortable with HTML, you may consider hiring a custom developer to assist. Cratejoy has a document on hiring developers, linked below:

Best Practices for Hiring Designers and Developers

If you're still interested in implementing this yourself (or if you're a developer looking for reference materials), that's great! Comprehensive instructions will begin below.

Rearranging Subscription Products Through Code

*First and foremost, before making any code changes, we recommend copying your theme using the "Copy" button on the Design tab of your Merchant Portal. Make all changes to the copy, so you always have a baseline to fall back on in case things get too overwhelming.*

Cratejoy has many themes available for your website (Bold, Tasty, Fashion, etc.), and these themes have many differences under the hood, visible through the code editor. This means there is no "one size fits all" approach to rearranging subscription products, but the core functionality is the same across all themes.

Regardless of your selected theme, you will be looking for a specific line of code:

{% for product in store.visible_subscription_products %}

This line cycles through your subscription products to render them on your site, and will be found in either the file subscribe.html:

Or the file products.html, in the subscribe_flow directory:

Once you've located this line of code in your selected theme, you will want to replace it with the following code:

 {% set all_products = [] %}
  {% for product in store.visible_subscription_products %}
      {% do all_products.append({'product': product, 'price': product.calc_min_price()}) %}
  {% endfor %}
{% set product_list = all_products | sort(attribute='price', reverse=False) %}
  
{% for p in product_list %}
  {% set product=p.product %}

Shown here in subscribe.html:

And here in products.html:

The code as supplied will sort your products in ascending order of price ($10 product -> $20 product -> $30 product), generally the most requested arrangement. To sort by descending order of price, a nearly identical code snippet will be used, changing only the "reverse=False" parameter from the sort function:

 {% set all_products = [] %}
  {% for product in store.visible_subscription_products %}
      {% do all_products.append({'product': product, 'price': product.calc_min_price()}) %}
  {% endfor %}
{% set product_list = all_products | sort(attribute='price', reverse=True) %}
  
{% for p in product_list %}
  {% set product=p.product %}

What if I want to specify my own exact order, independent of any sort?

Excellent question! This is a more complex operation, but still quite doable using the following generic code snippet:

{% set my_list_hard_ordered = [] %}
    {% set initial_order = [XXXXXXXXX, XXXXXXXXX, XXXXXXXXX, XXXXXXXXX] %}
  
      {% for i in initial_order %}
        {% for p in store.visible_subscription_products %}
            {% if p.id == i %}
                {% do my_list_hard_ordered.append(p) %}
            {% endif %}
        {% endfor %}
    {% endfor %}

     {% for product in my_list_hard_ordered %} 

This code will require some alteration on your part -- those 'X' strings are placeholders. You need to replace them with the Product IDs associated with the products you're organizing, found in the Products -> Subscription Products tab of your Merchant Portal. The Product IDs MUST be placed in the exact order you wish your products to display. Once complete, this code is placed in the same spot as the ascending/descending sorts above, shown here in products.html:

This approach gives you full control over the order of your subscription products, but with a downside: after the code is in place, if you create a new subscription product, it will NOT appear on your site by default. Instead, you MUST add its Product ID to the initial_order array in the desired position relative to its fellow products. Similarly, should you wish to hide a subscription product and cease offering it, you will have to REMOVE its product ID from the initial_order array. (Under no circumstances should you DELETE a product without first removing its ID, as that will break your site.) Not a dealbreaker by any stretch, but it is worth keeping in mind that hard coding the order of your subscription products will add an otherwise unnecessary step when adding or removing a product in your store.

What if I want to arrange my one-time purchase products?

Perhaps unexpectedly, due to the way one-time purchase products are handled on our platform, this is a much more complicated proposal than arranging your subscription products. Cratejoy has a document on one-time shop customization, linked below:

Advanced One-Time Shop Customization

The problem is that there simply is no "sort" function available to one-time purchase products the way there is to subscriptions. Intuitively, one-time products also have Product IDs, so the hard-coding technique outlined in the previous section should still be available... and TECHNICALLY, it is. However, we strongly advise against hard-coding one-time products, as it creates a host of problems hard-coding subscription products does not. The approach is similar to arranging subscription products, but due to the dangers involved, we are unable to assist further. Remember, you can always hide/delete products and recreate them in your desired order, as outlined in the first paragraph of this article.

Feel free to email Cratejoy Support if you have any other questions!