You want to create a section with settings that can be toggled on and off:
- Create the 'related-products.liquid' as a section file.
- In the product template file, add the following section inclusion:
{% section 'related-products' %}
right beneath the{% section 'product-template' %}
line.
Hi, at step 7 it explains how to add randomness to the recommended related products, but the explanation is for a snippet. How do we add it for a section? These are the snippet instructions if it helps at all:
Step 7. Configuring (optional) and adding randomness
At the top of the snippet file, you'll find this:
{% assign number_of_related_products_to_show = 3 %}
{% assign image_size = 'compact' %}
{% assign heading = 'Other fine products' %}
By editing the above lines of code, you can change: heading text, number of product recommendations, and size of the recommended product image. Valid values for size are: 'small', 'compact' or 'medium'. How big are those sizes? Check here.
If you are a designer, and are thinking of integrating related products in a theme, consider creating settings on the Customize theme page to toggle recommendations on and off.
You can output all products from the relevant collection and pick a limited number of products randomly using this jQuery plugin: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js
If you do that, remove the limit from the related-products.liquid snippet.
Change this line:
{% for product in collection.products limit: number_of_related_products_to_fetch %}
To this:
{% for product in collection.products %}
Then, upload the file jquery.pick.js to your Theme Assets. (You will find that file here: https://github.com/carolineschnapp/jquery-pick/blob/master/jquery.pick.js)
Then, add the following code at the bottom of your related-products snippet:
{{ 'jquery.pick.js' | asset_url | script_tag }}
<script type="text/javascript" charset="utf-8"> // li').pick(howMany); }); //]]> </script>