Marketing - All in One: Creating and Configuring Components

Components is a marketing module in Marketing - All in One that displays product recommendations on your storefront. You can add components to multiple pages in the Theme Editor to help customers discover more products they might be interested in. Each component connects to a data source that provides the recommended products, and you can customize its section title, layout, and product card style independently.

This guide explains how to create a component, configure its display settings, preview the results, and add the component in the Theme Editor.

Prerequisites for Creating a Component

Before you begin, make sure:

• You have created at least one data source that matches your intended placement, to provide the basis for recommendations. You can also create a new data source at the same time you create the component. For details on creating and configuring data sources, see "Marketing - All in One: Creating and Configuring Data Sources."
• Your store uses an OS 3.0 theme. Components can only be added through the Theme Editor for OS 3.0 themes.

Creating a Component

To create a new component, follow these steps:

1. Go to the Marketing - All in One app, then click Components in the left navigation.

   

2. Go to the component creation page:
   • If this is your first component: click Get started on the page.
   • If your store already has components: click Create in the top-right corner of the page.
3. In the Name field, enter a name for the component (up to 50 characters).
4. In the Type dropdown, select the type of component. Currently, only Product recommendations is supported.

5. In the Placement section, select the page where the component will be displayed. Available options include:

   

   • Home
   • Product details
   • Product listing
   • Search results
   • Cart
   • Account
   • 404 page
   • Blog
   • Custom page

   Note: The Cart drawer and Payment result placements are not yet supported and appear grayed out. Support for these will be added in a future release.

6. In the Data sources section, choose the data source the component will use as the basis for its recommendations:

   

   • Create a new data source: The system automatically creates a new data source with the same name as the component, based on the recommendation strategy you select in the next step.
   • Connect an existing data source: Select an existing data source from the dropdown. Only data sources whose placement matches the current component are shown. If no matching data source is available, the dropdown displays No Data.

   Note: For details on creating, configuring, and managing data sources, see "Marketing - All in One: Creating and Configuring Data Sources."

7. If you selected Create a new data source, choose an AI recommendation strategy in the Recommendation strategy section. The system automatically shows the strategies available for the placement you selected in the previous step, including:

   

   • AI recommendations: Analyzes the full customer profile to surface the products most likely to convert.
   • Trending now: Surfaces popular products based on views, clicks, and sales across your store.
   • Similar customers: Analyzes customer profiles and recommends products that similar customers have bought.
   • Related products: Analyzes product data across your store and recommends items similar to the product on the current page.
   • Frequently bought together: Recommends products that customers often buy together, based on past orders.
8. Click Create.

Once the component is created, you're automatically redirected to the component settings page, where you can continue configuring its display style and previewing the results.

Configuring Component Display Settings

In the settings panel on the left side of the component settings page, you can configure the component's data source, along with its section title, layout, and product card display style. Use the preview area on the right side of the page to see your changes in real time.

Basic Information

The Basic information section lets you manage the data source currently connected to the component, and gives you quick access to edit that data source.

• Data source: View or change the data source connected to the component. Click Edit to open the data source's detail page in a new tab.

Section Title

The Section title settings control the content and alignment of the component's title on your storefront.

• Text: Enter the title text displayed at the top of the component (up to 50 characters), for example, "You May Also Like."
• Text alignment: Choose how the title is aligned — Left, Center, or Right.

Layout

The Layout settings control how many recommended products are displayed per row, and how they're arranged, on desktop and mobile.

• Desktop columns: Set the number of products displayed per row on desktop (1–5).
• Desktop layout: Choose Single-row carousel or Grid.
• Mobile columns: Set the number of products displayed per row on mobile (1–2).
• Mobile layout: Choose Single-row carousel or Grid.

Product Card

The Product card settings control how each recommended product is displayed on your storefront, including its image, title, price, and discount information.

• Image border: Adjust the corner radius, border thickness, and opacity of the product image.
  • Corner radius: Set the corner radius of the product image border (0–40 px).
  • Thickness: Set the thickness of the product image border (0–12 px).
  • Opacity: Set the opacity of the product image border color (0%–100%).
• Product image: Choose the display ratio and fit for the product image.
  • Aspect ratio: Choose the display ratio for the product image — 1:1, 2:3, 3:4, or 4:3.
  • Image fit: Choose how the image fills its frame — Cover or Contain.
• Product title: Set whether the product title is shown on desktop and mobile, and how many lines it can display.
  • Show on desktop / Show on mobile: Control whether the product title is displayed on desktop and mobile independently.
  • Lines shown on desktop / Lines shown on mobile: Available only when the corresponding Show on desktop/mobile toggle is on. Choose 1 line, 2 lines, or Show all.
• Price: Set whether the sale price and compare-at price are shown, and choose the sale price format.
  • Show price: Set whether the product's sale price is shown. Turning this off hides the entire price area.
  • Price format: Available when Show price is on. Choose Lowest price, Price range, or From lowest price.
  • Show compare-at price: Set whether the compare-at (original, struck-through) price is shown. This only applies when the lowest sale price is lower than the compare-at price.
• Discount badge: Set whether a discount badge is shown, and choose the badge type and format.
  • Show badge: Set whether a discount badge is shown. This only applies when the lowest sale price is lower than the compare-at price.
  • Badge type: Available when Show badge is on. Choose Save badge or Sale badge.
  • Badge format: Available when Save badge is selected. Choose Discount amount or Discount percentage. If the discount percentage rounds to 0%, the badge is not shown.
  • Corner Radius: Set the corner radius of the discount badge (0–40 px).
• Quick add: Set whether a quick-add button is shown on the product card. When Enable quick add is on, customers can click the button to open your theme's quick-add popup.

Previewing and Saving Component Display Settings

The component settings page provides a live preview so you can check the display before publishing.

1. At the top of the component settings page, click the desktop or mobile icon to switch the preview device.
2. The preview area updates in real time based on your current display settings.
3. Once you've finished configuring the settings, click Save in the top-right corner of the page to apply your changes.

Adding a Component to a Storefront Page in the Theme Editor

Once you've configured the component, you need to manually add it to a storefront page in the Theme Editor before it can display.

1. Open Online Store > Design to enter the Theme Editor, then go to the page where you want the component to appear (for example, the home page or a product details page).

2. Click + Add component > Apps > All in One - component, in that order.

   

3. After adding the block, click into it to open the second-level settings panel.

   

4. In the Component ID field, enter the ID of the component you want to display (letters and numbers only). You can find and copy this ID from the component list or from the top of the component settings page.

   Note: This field does not validate whether the component ID you enter is correct, or whether the component's placement matches the current page. If the ID is incorrect, or the component's placement doesn't match the current page, the component will fail to render properly or will display incorrectly, with no error message shown. Be sure to double-check the ID before entering it.

   

5. Click Save in the top-right corner of the Theme Editor to apply your changes. You can then view the component's actual display on your storefront.

Managing the Component List

On the component list page, you can view, search, filter, and manage the components created for your store.

1. Click Components in the left navigation to go to the component list.

2. Find the component you need:

   • Use the search box to search by exact ID or Name.
   • Click the Placement filter to filter by one or more placements.

   

3. To manage a component, click ··· in the Actions column next to it, then select:

   • Edit: Opens the component settings page for editing.
   • Delete: Deletes the component.

   

Important Notes for Marketing - All in One Components

• Deleting a component cannot be undone.
• On the cart page, components support real-time client-side rendering: when the products in a customer's cart change, the component automatically re-renders its recommendations. Other pages do not currently support this real-time rendering.
• Section titles do not currently support multi-language settings — the displayed text is exactly what you enter.
• The component ID field in the Theme Editor does not validate whether the ID is correct or whether the component's placement matches the page. Be sure to double-check the ID before entering it.

FAQs About Marketing - All in One Components

Q1: Can the same data source be connected to multiple components?

Yes. As long as the components share the same Placement as the data source, multiple components can connect to the same data source, letting you reuse a recommendation strategy across components.

Q2: Can I add multiple components to the same page?

Yes. For the same placement, you can create and add multiple different components, each with its own independent display style and data source.

Q3: I changed a component's display settings, but I don't see the change in the preview. Why?

Make sure you clicked Save after making your changes. Also keep in mind that the preview on the component settings page is for reference only — you need to add and save the component in the Theme Editor to see how it actually displays.