Split > Product card

Product thumbnail

You can start by choosing a media aspect ratio upon all of your product thumbnails will be resized. Choose whatever suits better for your products in order to reduce the amount of cropping you get.

We also have a Natural option which will make sure that the thumbnail will not crop, but show at it's normal aspect ratio.

Fit media inside container works when you set a fixed aspect ratio and want all the images to be resized (but not cropped!) to fit inside that specific area. This works very well with very tall images or if your product photos are not resized in the same way.

Color swatches

Split has built-in support for color swatches, based on color names when HTML valid color names are used for variants (please see this list here). However, there may be instances where a store would require more specific swatches with complex colors or patterns. In this scenario, you can upload images for your swatches, but since the functionality isn't available in the theme, you will have to do a bit of tweaking for this purpose.

First, please select the "block" variant style option from the product page theme customizer settings > variant selector type - screenshot.

For any color swatch that you want to add, you just have to upload a 32x32px png file in your store's files section, with the name exactly the same as your product's variant handle.

For example, let's say that your product has a variant called "Dark Grey". You will want to create an image file name "dark-grey.png" and upload it into the Settings > Files section of your Shopify admin. That's it!

Wait a few minutes, as the images are cached and will take a bit to show on your site.

If you want to use custom color option names but display the color swatches, please insert your product option name here in the Product card setting: https://share.zight.com/xQuoYk0k.

How to add new product badges

By default, the theme includes 4 product badges: sold out, sale, new and preorder. 

To add any other product badge text, please open  /snippets/product_badges.liquid file and add a new condition in the code -  screenshot:

{% elsif product.tags contains 'more options' %}
   <div class="product-badge right new text-size--smaller"><span>more options</span></div>

Note: please make sure to insert the code before the {% endif %}.

Then just add your tag for the product where you need the new badge. Both the tag and the text you are using in the code needs to match perfectly. 

Quick buy

In our Split 4.0 theme update we've added a "quick buy" option for the product grid. The "add to cart" icon is designed to display in the product grid only on hover and it can be enabled from the product grid theme customiser settings here: https://share.getcloudapp.com/7KuzboJK.

Please see here an example from our theme demo site - screenshot.