By default, if your theme has a "Related Items" feature and you have installed and configured some Cross Sells for a product, both your "Related Items" and "Cross Sells" will appear together on the product's page. This may not always be ideal for some customers which is why we have written a small snippet of code that toggles on or off your product's "Related Items" IF that product has Cross Sells assigned.

If you are interested in us verifying if this is a viable option for your store's theme, please email us at support@csell.co with the subject 'Toggle'.

Alternatively, if you want to set this up yourself, follow the instructions below.

STEP 0: BACKUP -> This step is optional, but highly recommended if it's your first time editing your theme's code. Go to your Themes section, and then on your Current theme, click on Actions and then Duplicate.  This will be your backup theme in case you delete something you should have not. Rename this copy to something like "Backup 17-10-12 live theme"

STEP 1: EDIT CODE -> Go to your Themes section, and then on your Current Theme, click on Actions and then Edit Code.

STEP 2: LOCATE YOUR PRODUCT TEMPLATE: Go to your TEMPLATES folder and locate the product.liquid file. This file will usually be the main template set up for your products. Sometimes though, especially in themes with Sections, you'll see code that references another template as a section. In this case, we need to follow the code trail and go to our SECTIONS folder and then look for our respective "product template" file.

STEP 3. LOCATE RELATED PRODUCTS CODE BLOCK ->  Once you've found the right template file, you'll need to locate the block of code in charge of displaying the Related Items. Usually, this block of code will start with something like

{% if section.settings.related_products_enable %}

and will usually end with a respective {% endif %} statement.

Long story short, this section of code basically just checks if you have the Related Items feature from your theme enabled and then displays your Related Items by using the code between those lines. What we're going to do now is create an IF statement that basically checks if you have Cross Sells configured for your product and then shows your Cross Sells, BUT if you have Cross Sells, this code code will NOT show your "Related Items". And if you don't have Cross Sells, it will show your "Related Items" (if enabled). Neat, right?

STEP 4. Let's copy and write some code!

Copy the following piece of code below and paste it above or below your Related Items code snippet:

{% if product.metafields.productDetails.crosssell != null %}
{% comment %}This product has cross-sell items{% endcomment %}
     

       {% include 'cross-sell-custom' %}
{% else %}
{% comment %}Show Related Items instead {% endcomment %}
{% comment %} YOUR RELATED ITEMS CODE GOES IN THE SPACE BELOW THIS LINE{% endcomment %}

       {% comment %} YOUR RELATED ITEMS CODE GOES IN THE SPACE ABOVE THIS LINE{% endcomment %}
{% endif %}

Then cut the code block labeled 1, and paste it where it says HERE.

Your code should now look something like this:

Proceed to make a note of what the circled code refers to ( above labeled 2). What that circled piece of code does, is just refer to the cross-sell.liquid file in your Snippets folder in order to show your Cross Sells on your product page.  If that said something different like, {% include 'cross-sell-custom' %} then that would refer to the cross-sell-custom.liquid file, which is a file our team usually creates when doing customizations for themes.

Finally, just make sure to (a) delete the circled code above, and (b) that the code below points to the correct file in your Snippets folder. This could either be 'cross-sell' or it could be 'cross-sell-custom', depending on whether our team has made a customization for you or not.

Save your work and test! Let us know if you run into problems. We'll be happy to help!

‍