How do I style my cross-sell recommendations?

Each Shopify store is unique and may have been customised by a developer to deliver additional functionality, therefore it's likely that the out-of-the-box markup used by Cross-Sell will not match your store's layout/design.


Never fear! We are here to provide a FREE installation and customisation service to match Cross-Sell to your theme's default 'Related-Items' section. If you would like us to help you style Cross-Sell to fit in with your theme, then please submit a support ticket and we will be in touch request access to your store and get cracking.


If you're a developer or handy with the HTML, you might be keen to style the layout yourself. Cross-sell contains basic styles that are used to display the selected cross-sell items. It is more than likely that this will not fit in with the styling of your theme, therefore an option would be for you to amend the styles using CSS. 


The roadmap for Cross-Sell does include a styling feature that will allow you to pick fonts, colours, images sizes etc for the display of your Cross-Sell items, but I'm not sure how long down the line that will be.  The roadmap also includes changes to the default markup to allow for a responsive layout of Cross-Sell items.


The CSS styles can be found at the top of the 'cross-sell.liquid' snippet that was created when you installed the cross-sell app. The styles defined are as follows:


<style type="text/css">
 #cross-sell {float:left;clear:both;width:100%;}
 h3.crossselltitle {margin:25px 0;}
 .cross-sell {overflow:hidden;list-style-type:none;margin:0;padding:0;clear:both;}
 .cross-sell * {font-size:13px; text-align:center; padding:0;}
 .cross-sell h4 {border:none;margin:5px 0 0 0;line-height:1.5;}
 .cross-sell div.image {height:180px;}
 .cross-sell li {float:left; padding:0 0 10px 0;margin:0 14px 30px 0; position:relative;width:174px;}
 .cross-sell li:last-child {margin-right:0;}
 .cross-sell li .image {}
 .cross-sell li .image img {margin:0px 0 10px 0px;float:left;width:100%;}
 .cross-sell li .producttitle {float:left;padding:5px 0;width:100%;min-height:56px;}
 .cross-sell li a {text-decoration:none;font-size:115%;line-height:20px;padding:5px;}
 .cross-sell li .money a {font-size:180%;float:left;text-align:center; padding:5px 0;width:100%;}
</style>



To edit the styles, you can either edit the snippet file directly, or you can override them by adding the same styles declarations to your shops main stylesheet.

Did you find it helpful? Yes No

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