Cross-Sells Implementation Guide
Overview
This guide explains how to implement and configure cross-sells in your Shopify theme. Cross-sells allow customers to add multiple related products to their cart at once, increasing average order value and improving the shopping experience.
How Cross-Sells Work
The cross-sell system uses Shopify metafields to define which products should be offered together. When a customer views a product page, they can see related products and add multiple items to their cart with a single click.
Key Features
- Product Selection: Customers can choose which cross-sell products to add
- Dynamic Pricing: Total price updates automatically as products are selected/deselected
- Savings Display: Shows total savings when compare-at prices are available
- Variant Support: Handles products with multiple variants
- Cart Integration: Seamlessly adds selected products to cart
Setup Instructions
Step 1: Create Product Metafields
1. Go to Settings > Metafields in your Shopify admin
2. Click Products and then Add definition
3. Configure the metafield:
- Namespace and key: `custom.cross_sells`
- Name: Cross-sell products
- Description: Products to show as cross-sells
- Type: Product (List)
- Access: Storefront API
4. Save the metafield definition
Step 2: Add Cross-Sell Products
1. Go to Products in your Shopify admin
2. Select a product you want to add cross-sells to
3. Scroll to the Metafields section
4. Find the Cross-sell products field
5. Add the products you want to cross-sell
6. Save the product
Step 3: Enable Cross-Sells on Product Pages
1. Go to Online Store > Themes
2. Click Customize on your active theme
3. Navigate to a product page
4. Click Add block in the product section
5. Select Cross sells from the available blocks
6. Configure the block settings (see Configuration Options below)
Configuration Options
Metafield Settings
- Metafield namespace/key: `custom.cross_sells` (default)
- This should match the metafield you created in Step 1
General Settings
- Color scheme: Choose from available theme color schemes
- Checkbox color rotate: Adjust checkbox color (0-360 degrees)
- Container border radius: Roundness of the cross-sell container (0-100%)
Image Settings
- Image ratio: Choose aspect ratio for product images
- Adapt: Maintains original image proportions
- Square (1x1): Perfect squares
- Horizontal (4x3, 16x9): Landscape orientations
- Vertical (3x4, 9x16): Portrait orientations
- Image border radius: Roundness of product images (0-100px)
Typography Settings
- Title: Cross-sell section heading
- Title font size: Small, Medium, Large, Extra Large
- Title text style: Normal, Bold, Italic, Bold Italic
- Description: Optional description text
- Description font size: Small, Medium, Large
Button Settings
- Button style: Choose from available button styles
- Button text: Customize the "Add to cart" button text
Best Practices
Product Selection
1. Complementary Products: Choose products that complement the main product
2. Price Range: Keep cross-sell products in a similar price range
3. Availability: Ensure cross-sell products are in stock
4. Relevance: Select products that make sense together
Cross-Sell Strategies
1. Bundle Deals: Create product bundles with discounts
2. Accessories: Offer accessories for main products
3. Upgrades: Suggest premium versions of products
4. Complete the Look: Offer products that complete a set
Testing
1. Mobile Experience: Test cross-sells on mobile devices
2. Loading Speed: Monitor page load times with cross-sells
3. Conversion Rate: Track how cross-sells affect sales
4. User Experience: Ensure the interface is intuitive
0 comments