Fluorescent
Ira
Ira
  • Ira Help Center
    • ⚠️Theme retirement
    • FAQs
    • Theme updates
      • Upgrade to OS2
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • 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
  • Theme styles
    • Theme settings
    • Style presets
    • Fonts
    • Colors
    • Animation
    • Layout
    • Quick shop
  • Pages
    • Templates
      • About page
      • Blogs page
      • Blog posts template
      • Collections list page
      • Contact page
      • Password page
      • Search page
      • 404 page
      • Home page
    • Announcement bar
    • Header
      • Logo
      • Layout and style
      • Mega navigation
      • Transparent header
      • Quick search
      • Customer account link
    • Footer
      • Links block
      • Newsletter block
      • Text block
      • Language selector
      • Country selector
      • Payment icons
      • Social media icons
      • Footer text
  • Sections
    • Theme sections
      • Blog posts
      • Collection list
      • Featured collection
      • Featured product
      • Featured products
      • Gallery
      • Image with text
      • Map
      • Mosaic grid (2 columns)
      • Mosaic grid (3 columns)
      • Newsletter
      • Rich text
      • Slideshow
      • Testimonials
      • Text columns with images
      • Video
    • Popups
  • Products
    • Product listings
  • Product pages
    • Product template
      • Pre-order template
      • Gift recipient form
    • Layout and style
    • Product page blocks
      • Default blocks
        • Title
        • Price
        • Description
        • Variant selector
        • Quantity selector
        • Buy buttons
        • Local pickup banner
        • Share icons
      • Accordion block
      • Information popup
      • Stock level indicator
      • Text block
      • App blocks
    • Product page sections
      • Product reviews
      • Recommended products
      • Complementary products
    • Variant chips
    • Variant swatches
      • Enable swatches
      • Use default colors
      • Use custom images
      • Show on product listings
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Fly-out cart
  • 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 section
  • 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 page sections

Complementary products

Product page section

Last updated 1 year ago

Was this helpful?

Theme retirement Ira is no longer available on the Shopify theme store. Theme support and updates for current users will end after May 18, 2024. .

Update | This feature was added in v4.9.0 on Jan 6, 2022. See our and to learn more.

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

This guide shows you how to set up the Complementary products block. For similar features, see guides for Recommended products section.

Set up section

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

STEPS

In your theme editor (Customize):

  1. In the Product template, click (+) Add section and select Complementary Products.

  2. Click the new Complementary products section to open the settings.

  3. Select the Posts per row using the slider: 2, 3, or 4. Select the number of Rows: 1, 2, or 3.

  4. (Optional). Select an Image aspect ratio to change the shape of the product images. Either Square, Landscape, or Portrait.

    The default Natural setting will display the original orientation of your image.

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

  6. Click Select products to manually choose what products to display.

    To show different products on different product pages, follow the instructions below to add a Product metafield to use as a dynamic source.

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

For a general introduction, see our .

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

STEPS

In your theme editor (Customize):

  1. Click on a Complementary products section 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

Product template
Recommended products
Learn more here
change log
Theme update guide
Dynamic sources and metafields tutorial