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. 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.

In the mentioned version we've added the proper logic to make this feature easily available to you without any extra effort. 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.

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.