How do I customize and match cross sells to my store theme on version 2.1 and above?

-> Before continuing, please make sure the Cross Sell snippet is added to your product and/or cart templates, otherwise cross sells will not display on your theme.

Theme Matching

Cross Sell v2+ includes Shopify Theme styles. You can find them under Settings -> Display Settings (see image below)If your Shopify theme is there, you might want to choose that first.

If your Shopify Theme is not there, you can either use one of our universal Cross Sell styles (e.g. Cross Sell - Modern, Basic, Slick). Feel free to reach out and let us know if you need any changes to the styles (within reason) -> colors, fonts, etc.

Theme Customization (Advanced)

If you want to modify Cross Sells to either change colors, fonts, add review sections or integrate with other apps, please follow these instructions:

1) Create a duplicate of the theme you wish to modify and rename it to something like 'csell-test -180517' (we highly advise working on a duplicate theme to avoid disruptions and issues on your live store)

2) Remove the {%include 'cross-sell'%} snippet reference from any and all product/cart templates of your current live theme (this is done to avoid problems on your live store/theme while mods are being made)

3) Create a file named 'cross-sell-custom' inside your Snippets folder of the duplicate theme. It should show up as "cross-sell-custom.liquid" (the liquid extension is added on creation)

4) If you wish to just change CSS, replace the contents of the cross-sell-custom.liquid file with the following file's: https://github.com/cross-sell/diy-themes/raw/master/v2plus-themes/_xs-custom-css.liquid

5) If you wish to change the output of cross sells (e.g. pricing, ads JS, etc), replace the contents of the cross-sell-custom.liquid file with the following file's: https://raw.githubusercontent.com/cross-sell/diy-themes/master/v2plus-themes/_xs-custom-output.liquid (Also, and this is VERY important, make sure to choose "Custom" in Settings -> Display Settings if you use this custom output file. If you only need to do CSS changes, just leave the theme as whatever Cross Sell Theme you wish to use and just use the file in step 4 above, to do CSS overrides on the styles.

6) Add the following 3 lines of code before your closing </head> tag in your theme's theme.liquid file (or main theme file):

<!-- Cross Sell custom code start. Do not change -->
{%include 'cross-sell-custom'%}
<!-- Cross Sell custom code end. Do not change -->

7) Make your modifications in the 'cross-sell-custom' file via CSS, HTML, liquid or javascript. Preview and test your changes before deploying live. 

Reach out to us at support@csell.co if you need help ;)

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.