-> 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 -> Cross Sell Theme (see image below). If your Shopify theme is there, you might want to choose that instead.

If your Shopify Theme is not there, you can use one of our universal Cross Sell styles (e.g. Cross Sell - Modern, Basic, Slick & Landscape).

Feel free to let us know if you need any changes to colors, fonts, image sizing, or changing the locations of cross sells.

*NOTE: do not use "Custom" in Display Settings unless you are using an override file like detailed below.

Cross Sell Themes

Curious to know what our universal themes look like? Scroll below to see what our styles will look like on your theme. Remember that all of our universal themes work with our Upsell Popup, Quickview buttons, carousel and that they can be modded via CSS by your team or us.

Cross Sell Basic

Cross Sell - Modern

Cross Sell - Slick

Cross Sell - Landscape

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 -180519' (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) Copy the file named cross-sell.liquid from your live theme's Snippets folder, to the Snippets folder of the theme you wish to work on (let's call this theme the DUPLICATE).

4) Embed our snippet  {% include 'cross-sell' %} into the DUPLICATE's product & cart templates with our theme install instructions: https://help.csell.co/a/solutions/articles/67558

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 tag in your theme's theme.liquid file (or main theme file):

{%include 'cross-sell-custom'%}

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 if you need help ;)

‍