Fluorescent
Spark
Spark
  • Spark Help Center
    • Start using Spark
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 headings tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
      • Upgrade to OS2
  • Theme styles
    • Theme settings
    • Style presets
    • Fonts
    • Colors
    • Animation
    • Buttons
  • Pages
    • Templates
      • About page
      • Blogs page
      • Blog posts template
      • Collections list page
      • Contact page
      • FAQ page
      • Lookbook page
      • Password page
      • Search page
      • 404 page
      • Home page
    • Sections
      • Blog posts
      • Collection list
      • Countdown banner
      • Events
      • Featured collection
      • Featured collection row
      • Featured product
      • Image with features
      • Image with text
      • Inline features
      • Logo list
      • Map
      • Mosaic grid
      • Newsletter
      • Questions and answers
      • Quotes
      • Rich text
      • Shoppable feature
      • Shoppable image
      • Slideshow
      • Social proof
      • Testimonials
      • Text columns with images
      • Video
      • Video hero
    • Popups
  • Header
    • Header
      • Logo
      • Layout and style
      • Transparent header
      • Customer account link
    • Announcement bar
    • Quick search
  • Footer
    • Footer
      • Links block
      • Newsletter block
      • Text and image block
      • Payment icons
      • Language selector
      • Country selector
      • Social media icons
      • Footer text
  • Products
    • Product listings
    • Hover add-to-cart
  • Cart
    • Cart page
    • Fly-out cart
  • Product pages
    • Product template
      • Pre-order template
      • Alternate product template
    • Layout and style
      • Breadcrumbs
      • Navigation buttons
      • Media gallery
      • Quick purchase bar
      • Gift recipient form
    • Product overview blocks
      • Default blocks
        • Title
        • Price
        • Description
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
      • Accordion block
      • Complementary products
      • Custom text field
      • Information popup
      • Payment accordion
      • Security accordion
      • Shipping accordion
      • Stock level indicator
      • Text block
      • App blocks
    • Product page sections
      • Product reviews
      • Recommended products
    • Variant options
      • Variant chips
      • Variant swatches
        • Use default colors
        • Use custom colors
        • Use custom images
        • Show on product cards
        • Dynamic option availability
      • Sibling product swatches
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up block
  • Add dynamic content for different products
  • 1. Create product list metafield
  • 2. Add products to metafield
  • 3. Insert metafields as dynamic sources

Was this helpful?

  1. Product pages
  2. Product overview blocks

Complementary products

Product page block

Last updated 11 months ago

Was this helpful?

Tip | Want to make your product pages even more powerful? Check out our new app to create high-converting product bundles that will increase your average order value!

In the Product template, the Complementary products block shows customers related products that they can purchase in addition to the current product. Create a custom product list that pair well together.

For similar features, see the section.

Set up block

Follow the steps to add a complementary products block with a custom product list. You can customize the heading and layout of the block.

STEPS

In your theme editor (Customize):

  1. Under Product overview, click (+) Add block and select Complementary Products.

  2. Click on the new Complementary products ("Pairs well with") block to open the settings.

  3. Change the Heading to a short title of a few words.

  4. Select which Column to display the Text block: Either the Right (in the product form) or the Left (beneath the product media).

  5. Change the Maximum products to show using the slider.

  6. Select the Columns per row using the slider: 1, 2, or 3.

  7. To make all product media a uniform shape, set the Image aspect ratio to crop your images to Square, Landscape, or Portrait.

    The default Natural setting displays the original orientation of your product media.

  8. Under Products to show, choose to use a Custom product list or Search & Discovery app recommendations.

  9. (For custom product list) Click Select products to manually choose what products to display.

    Tip: Complementary products are ideally the same cost or lower as the original product.

  10. Choose whether to Enable swipe on mobile.

  11. Choose the Layout to display the products in a Slider or Grid.

  12. Click Save.

Add dynamic content for different products

If you want to show different complementary products on specific product pages, you can use Shopify's metafields and dynamic sources. These features allow you to store custom information for each of your products and automatically display that information on the correct product pages.

Watch the video or follow the steps below to create metafields for your products, add complementary products to those metafields, then use Dynamic sources to connect those metafields to the complementary products block.

1. Create product list metafield

Create a Product metafield to add multiple complementary products to each product page in your Shopify Admin.

Shopify's Metafields lets you store additional information about your products. You can create custom fields to hold different types of information in your Shopify admin, and enter unique content for each of your products.

The steps below tell you how to add a metafield for storing text that you want to display in the collapsible rows block.

STEPS

In your theme editor (Customize):

  1. Click the Complementary products block to open the settings.

  2. Next to Custom product list, click the Insert dynamic source button and select (+) Add Metafield.

    Alternatively, go to Settings > Custom data in your Shopify admin.

  3. Click the Products tab.

  4. Click the Add definition button in the top-right.

  5. Enter a Name that describes what information the metafield will contain. For example: "Related products".

  6. Click (+) Select type button and select List of products.

  7. Click Save.

2. Add products to metafield

Once you've created a product list Metafield, you can now add multiple products to those fields by going to your products in the Shopify admin.

STEPS

In your Shopify Admin:

  1. In the Shopify admin:

  2. Go to your Product inventory in your Shopify admin and open one of your Products.

  3. Scroll down to the Metafields section and find your product list metafield, then click on the field to Select products.

  4. Click Save.

  5. Repeat steps 1 - 3 to populate the product list metafield for each of your products.

3. Insert metafields as dynamic sources

You can go to the theme editor to insert a Dynamic source in the Complementary products block.

STEPS

In your theme editor (Customize):

  1. Click on a Complementary products block to open the settings.

  2. Click the Insert dynamic source button next to Customer product list

  3. Select the Metafield that you created.

  4. You can now preview your store to confirm the correct product list appears when viewing different products.

  5. Click Save.

\


Related links

Editing a template changes all pages that use that template. To edit specific pages, you can or .

To show different products on different product pages, follow the steps below to add a .

(For Search & Discovery recommendations) Download Shopify's Search & Discovery app to use and customize automated recommendations. .

For a general introduction, see our .

Learn more here ↗
Dynamic sources and metafields tutorial
Product template
Recommended products section
Product metafield as a dynamic source
Flash Bundles
Try it for free
Recommended products
insert dynamic content with metafields
create new templates