Beauty Finder & Routine Builder by F2

Create personalized beauty routines and product recommendations for your Shopify store using Theme App Blocks.

Help customers discover suitable beauty products and build personalized routines based on their needs. Easily configure the finder and recommendation settings from the Shopify Theme Editor.

Available App Blocks

– Beauty Finder
– Routine Builder

Quick Actions

[Open Theme Editor]

[Installation Guide] [Beauty Finder Guide]

How It Works

1. Open the Shopify Theme Editor.
2. Add the Beauty Finder & Routine Builder by F2 app block to your desired page or section.
3. Configure the finder questions, options, and recommendation settings.
4. Add your beauty products and customize the routine experience.
5. Save your theme and publish the changes.

Everything you need to install, configure, and use the Beauty Finder & Routine Builder is provided below.

Installation Guideline

Beauty Finder & Routine Builder by F2 – Installation Guideline

Beauty Finder & Routine Builder by F2 uses structured data to power its recommendation blocks. For the Foundation Shade Finder and Skincare Routine Builder, merchants need to provide data in JSON format.

1. Create Your JSON Data

You can create JSON data in several ways:

Use the CSV to JSON Converter available inside the app.
Use the Data to JSON Converter available inside the app.
Convert your existing CSV or data into JSON using ChatGPT or another JSON conversion tool.
Manually create JSON by following the demo templates provided in the app.

The easiest option is to use the built-in generators or converters available from the App Home.

2. Follow the Required JSON Structure

When creating your own JSON, you must keep the required field IDs exactly the same as shown in the demo template.

For example, if a required field ID is:

skinType

you must use:

skinType

Do not change it to:

skin

type

skin_type_name

or any other custom name.

The app reads these exact IDs to understand your data. If an ID is changed, the app may not be able to display the correct result.

3. Use the Demo JSON Templates

Demo JSON templates are provided to help you understand the required format.

You can:

Copy a demo JSON.
Paste it directly into the corresponding app block to test the app.
Edit the demo values with your own data.
Add more JSON objects by following exactly the same structure.

You may create as many additional entries as needed, as long as the same field names and structure are maintained.

Demo JSON Testing Code for Foundation Shade Finder Block

				
					[
  {
    "skinTone": "Very Fair",
    "undertone": "Cool",
    "coverage": "Light",
    "finish": "Natural",
    "shade": "Porcelain 01",
    "alternativeShade": "Ivory 02",
    "shadeColor": "#F3D8C8",
    "description": "A very light porcelain shade with cool pink undertones.",
    "products": ["porcelain-foundation", "daily-skin-tint"]
  },
  {
    "skinTone": "Very Fair",
    "undertone": "Cool",
    "coverage": "Medium",
    "finish": "Matte",
    "shade": "Porcelain 01",
    "alternativeShade": "Rose Ivory 02",
    "shadeColor": "#F0D0C1",
    "description": "A cool-toned porcelain shade with a soft matte finish.",
    "products": ["porcelain-matte-foundation", "longwear-foundation"]
  },
  {
    "skinTone": "Very Fair",
    "undertone": "Neutral",
    "coverage": "Light",
    "finish": "Natural",
    "shade": "Ivory 02",
    "alternativeShade": "Porcelain 01",
    "shadeColor": "#F2D7C4",
    "description": "A balanced ivory shade suitable for very fair neutral skin.",
    "products": ["ivory-foundation", "daily-skin-tint"]
  },
  {
    "skinTone": "Very Fair",
    "undertone": "Warm",
    "coverage": "Medium",
    "finish": "Dewy",
    "shade": "Warm Ivory 03",
    "alternativeShade": "Light Beige 04",
    "shadeColor": "#F0D2B7",
    "description": "A warm ivory shade with golden undertones and a radiant finish.",
    "products": ["warm-ivory-foundation", "glow-foundation"]
  },

  {
    "skinTone": "Fair",
    "undertone": "Cool",
    "coverage": "Light",
    "finish": "Dewy",
    "shade": "Rose Beige 05",
    "alternativeShade": "Cool Beige 06",
    "shadeColor": "#EBC5B5",
    "description": "A light beige shade with subtle rosy undertones.",
    "products": ["rose-beige-foundation", "glow-foundation"]
  },
  {
    "skinTone": "Fair",
    "undertone": "Cool",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Cool Beige 06",
    "alternativeShade": "Rose Beige 05",
    "shadeColor": "#E6BBAA",
    "description": "A cool beige shade designed for full coverage with a matte finish.",
    "products": ["cool-beige-foundation", "full-cover-matte"]
  },
  {
    "skinTone": "Fair",
    "undertone": "Neutral",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Light Beige 07",
    "alternativeShade": "Neutral Sand 08",
    "shadeColor": "#E9C5AE",
    "description": "A versatile light beige shade for neutral undertones.",
    "products": ["light-beige-foundation", "natural-finish-foundation"]
  },
  {
    "skinTone": "Fair",
    "undertone": "Warm",
    "coverage": "Light",
    "finish": "Dewy",
    "shade": "Golden Ivory 08",
    "alternativeShade": "Warm Beige 09",
    "shadeColor": "#EBC19F",
    "description": "A warm golden ivory shade with a luminous finish.",
    "products": ["golden-ivory-foundation", "glow-foundation"]
  },

  {
    "skinTone": "Light",
    "undertone": "Cool",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Cool Sand 10",
    "alternativeShade": "Soft Beige 11",
    "shadeColor": "#DDB49F",
    "description": "A light cool sand shade with subtle pink undertones.",
    "products": ["cool-sand-foundation", "natural-finish-foundation"]
  },
  {
    "skinTone": "Light",
    "undertone": "Neutral",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Soft Beige 11",
    "alternativeShade": "Neutral Sand 12",
    "shadeColor": "#DDB89F",
    "description": "A balanced beige shade designed for light neutral skin tones.",
    "products": ["soft-beige-foundation", "daily-foundation"]
  },
  {
    "skinTone": "Light",
    "undertone": "Warm",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Warm Sand 12",
    "alternativeShade": "Golden Beige 13",
    "shadeColor": "#D9AE8D",
    "description": "A warm sandy shade with golden undertones and full coverage.",
    "products": ["warm-sand-foundation", "full-cover-matte"]
  },

  {
    "skinTone": "Medium",
    "undertone": "Cool",
    "coverage": "Light",
    "finish": "Natural",
    "shade": "Cool Beige 14",
    "alternativeShade": "Rose Tan 15",
    "shadeColor": "#C99A82",
    "description": "A medium beige shade with cool rosy undertones.",
    "products": ["cool-beige-medium", "daily-skin-tint"]
  },
  {
    "skinTone": "Medium",
    "undertone": "Neutral",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Neutral Beige 15",
    "alternativeShade": "Medium Sand 16",
    "shadeColor": "#C79578",
    "description": "A natural medium beige shade with balanced undertones.",
    "products": ["neutral-beige-foundation", "natural-finish-foundation"]
  },
  {
    "skinTone": "Medium",
    "undertone": "Warm",
    "coverage": "Medium",
    "finish": "Dewy",
    "shade": "Golden Beige 16",
    "alternativeShade": "Warm Tan 17",
    "shadeColor": "#C8916C",
    "description": "A medium golden beige shade with warm undertones and a radiant finish.",
    "products": ["golden-beige-foundation", "glow-foundation"]
  },
  {
    "skinTone": "Medium",
    "undertone": "Warm",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Warm Tan 17",
    "alternativeShade": "Golden Tan 18",
    "shadeColor": "#BE8766",
    "description": "A rich warm tan shade offering full matte coverage.",
    "products": ["warm-tan-foundation", "full-cover-matte"]
  },

  {
    "skinTone": "Tan",
    "undertone": "Cool",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Rose Tan 18",
    "alternativeShade": "Cool Caramel 19",
    "shadeColor": "#A8755F",
    "description": "A tan shade with subtle cool rosy undertones.",
    "products": ["rose-tan-foundation", "natural-finish-foundation"]
  },
  {
    "skinTone": "Tan",
    "undertone": "Neutral",
    "coverage": "Light",
    "finish": "Dewy",
    "shade": "Neutral Caramel 19",
    "alternativeShade": "Medium Caramel 20",
    "shadeColor": "#A97559",
    "description": "A neutral caramel shade with a lightweight radiant finish.",
    "products": ["neutral-caramel-foundation", "glow-foundation"]
  },
  {
    "skinTone": "Tan",
    "undertone": "Warm",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Golden Caramel 20",
    "alternativeShade": "Warm Caramel 21",
    "shadeColor": "#A66D4E",
    "description": "A warm golden caramel shade for tan skin tones.",
    "products": ["golden-caramel-foundation", "daily-foundation"]
  },
  {
    "skinTone": "Tan",
    "undertone": "Warm",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Warm Caramel 21",
    "alternativeShade": "Deep Caramel 22",
    "shadeColor": "#986247",
    "description": "A deep warm caramel shade with long-lasting matte coverage.",
    "products": ["warm-caramel-foundation", "longwear-foundation"]
  },

  {
    "skinTone": "Deep",
    "undertone": "Cool",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Cool Cocoa 22",
    "alternativeShade": "Deep Rose 23",
    "shadeColor": "#754C3D",
    "description": "A deep cocoa shade with cool undertones and a natural finish.",
    "products": ["cool-cocoa-foundation", "natural-finish-foundation"]
  },
  {
    "skinTone": "Deep",
    "undertone": "Neutral",
    "coverage": "Medium",
    "finish": "Dewy",
    "shade": "Neutral Cocoa 23",
    "alternativeShade": "Deep Neutral 24",
    "shadeColor": "#714A39",
    "description": "A balanced deep cocoa shade with a luminous finish.",
    "products": ["neutral-cocoa-foundation", "glow-foundation"]
  },
  {
    "skinTone": "Deep",
    "undertone": "Warm",
    "coverage": "Medium",
    "finish": "Natural",
    "shade": "Warm Cocoa 24",
    "alternativeShade": "Rich Caramel 25",
    "shadeColor": "#6D4332",
    "description": "A warm deep cocoa shade with golden undertones.",
    "products": ["warm-cocoa-foundation", "daily-foundation"]
  },
  {
    "skinTone": "Deep",
    "undertone": "Warm",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Rich Espresso 25",
    "alternativeShade": "Deep Cocoa 24",
    "shadeColor": "#4D3027",
    "description": "A rich espresso shade created for deep warm skin tones.",
    "products": ["rich-espresso-foundation", "full-cover-matte"]
  },

  {
    "skinTone": "Deep",
    "undertone": "Neutral",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Deep Neutral 26",
    "alternativeShade": "Rich Espresso 25",
    "shadeColor": "#56382E",
    "description": "A deep neutral foundation shade with smooth full matte coverage.",
    "products": ["deep-neutral-foundation", "full-cover-matte"]
  },
  {
    "skinTone": "Medium",
    "undertone": "Neutral",
    "coverage": "Full",
    "finish": "Matte",
    "shade": "Medium Neutral 27",
    "alternativeShade": "Neutral Beige 15",
    "shadeColor": "#B87F63",
    "description": "A medium neutral shade with buildable full coverage.",
    "products": ["medium-neutral-foundation", "full-cover-matte"]
  },
  {
    "skinTone": "Light",
    "undertone": "Neutral",
    "coverage": "Light",
    "finish": "Dewy",
    "shade": "Light Neutral 28",
    "alternativeShade": "Soft Beige 11",
    "shadeColor": "#E0BBA4",
    "description": "A lightweight neutral shade with a fresh dewy finish.",
    "products": ["light-neutral-foundation", "daily-skin-tint"]
  }
]

Demo JSON Testing Code for Skincare Routine Builder Block

				
					[
  {
    "skinType": "Oily",
    "concern": "Acne",
    "age": "18-25",
    "budget": "Medium",
    "title": "Acne Control Routine",
    "description": "A daily routine to reduce excess oil and help prevent breakouts.",
    "morning": [
      "Salicylic Acid Cleanser",
      "Niacinamide Serum",
      "Oil-Free Moisturizer",
      "SPF 50 Sunscreen"
    ],
    "night": [
      "Foaming Cleanser",
      "Salicylic Acid Serum",
      "Gel Moisturizer"
    ],
    "tips": [
      "Wash your face twice daily.",
      "Avoid touching your face.",
      "Always wear sunscreen."
    ],
    "products": []
  },
  {
    "skinType": "Dry",
    "concern": "Dehydration",
    "age": "26-35",
    "budget": "High",
    "title": "Deep Hydration Routine",
    "description": "Restore moisture and strengthen the skin barrier.",
    "morning": [
      "Hydrating Cleanser",
      "Hyaluronic Acid Serum",
      "Ceramide Moisturizer",
      "SPF 50 Sunscreen"
    ],
    "night": [
      "Cream Cleanser",
      "Hydrating Essence",
      "Rich Night Cream"
    ],
    "tips": [
      "Drink enough water.",
      "Avoid harsh cleansers.",
      "Use moisturizer immediately after cleansing."
    ],
    "products": []
  },
  {
    "skinType": "Combination",
    "concern": "Large Pores",
    "age": "18-25",
    "budget": "Low",
    "title": "Balanced Skin Routine",
    "description": "Control oil while keeping dry areas hydrated.",
    "morning": [
      "Gentle Cleanser",
      "Niacinamide Serum",
      "Light Moisturizer",
      "SPF 30 Sunscreen"
    ],
    "night": [
      "Gentle Cleanser",
      "Pore Refining Serum",
      "Gel Moisturizer"
    ],
    "tips": [
      "Use lightweight skincare.",
      "Exfoliate once a week.",
      "Avoid over-cleansing."
    ],
    "products": []
  },
  {
    "skinType": "Sensitive",
    "concern": "Redness",
    "age": "36-45",
    "budget": "Medium",
    "title": "Sensitive Skin Routine",
    "description": "Soothe irritation and protect the skin barrier.",
    "morning": [
      "Gentle Cleanser",
      "Centella Serum",
      "Barrier Cream",
      "Mineral Sunscreen"
    ],
    "night": [
      "Gentle Cleanser",
      "Soothing Serum",
      "Barrier Repair Cream"
    ],
    "tips": [
      "Avoid alcohol-based products.",
      "Patch test new products.",
      "Use fragrance-free skincare."
    ],
    "products": []
  },
  {
    "skinType": "Normal",
    "concern": "Anti-Aging",
    "age": "46+",
    "budget": "High",
    "title": "Anti-Aging Routine",
    "description": "Support firmer, smoother and healthier-looking skin.",
    "morning": [
      "Gentle Cleanser",
      "Vitamin C Serum",
      "Firming Moisturizer",
      "SPF 50 Sunscreen"
    ],
    "night": [
      "Gentle Cleanser",
      "Retinol Serum",
      "Peptide Night Cream"
    ],
    "tips": [
      "Use sunscreen every day.",
      "Introduce retinol gradually.",
      "Keep skin moisturized."
    ],
    "products": []
  },
  {
    "skinType": "Oily",
    "concern": "Dark Spots",
    "age": "26-35",
    "budget": "Medium",
    "title": "Brightening Routine",
    "description": "Reduce the appearance of dark spots and improve skin tone.",
    "morning": [
      "Foaming Cleanser",
      "Vitamin C Serum",
      "Oil-Free Moisturizer",
      "SPF 50 Sunscreen"
    ],
    "night": [
      "Gentle Cleanser",
      "Alpha Arbutin Serum",
      "Gel Moisturizer"
    ],
    "tips": [
      "Never skip sunscreen.",
      "Avoid picking acne.",
      "Be consistent with brightening products."
    ],
    "products": []
  }
]

4. Add Product Handles

If you want recommended Shopify products to appear in the result, add the correct Shopify product handles inside the products field.

Example:

"products": [
  "product-handle-one",
  "product-handle-two"
]

The handle must match the product handle used in your Shopify store.

For example:

yourstore.com/products/hydrating-cleanser

Product handle:

hydrating-cleanser

5. Add the App Block to Your Theme

Go to:

Shopify Admin → Online Store → Themes → Customize

Then:

Open the page or template where you want to display the tool.
Click Add block or Apps.
Select the required Beauty Finder & Routine Builder block.
Paste your JSON data into the block’s JSON data field.
Configure the available labels and design settings.
Click Save.

6. Test Your Data

Before publishing, test the block on your storefront.

Make sure:

All dropdown options appear correctly.
The correct recommendation is displayed.
Morning and night routines display properly.
Product recommendations load correctly.
Product handles are valid.
All required JSON field IDs remain unchanged.

If the app shows an invalid JSON or no-match message, compare your data with the demo JSON template and confirm that the structure and field IDs are correct.

Important Note

The demo JSON templates are designed to show the exact structure required by the app. You can change the values and add more records, but do not rename the required IDs or change the JSON structure.

Using the provided templates is the safest and easiest way to prepare your own data successfully.

CSV JSON Tool

CSV to JSON Generator

Upload a CSV file and convert every row into clean JSON data. Preview and format the generated JSON directly inside your browser.

The CSV is processed locally in your browser. Its content is not uploaded to an external server or saved in a database.

Client-side processing No backend required Maximum file: 10 MB

CSV ↓ JSON

Upload CSV File

Drag and drop a CSV file or select a file from your computer. Only one CSV file can be selected at a time.

Select CSV file

Accepts .csv

CSV File Information

Review the selected file before converting it into JSON.

ⓘ

No CSV file selected

Upload a CSV file to view its name, size, type, row count and conversion status.

Converted Data Preview

Preview the first converted rows before reviewing the complete JSON output.

ⓘ

No converted data yet

Upload a CSV file and select Convert to JSON to display the converted row preview.

Generated JSON

Use Pretty JSON for a readable result or Minified JSON for a compact output.

ⓘ

JSON output will appear here

Upload and convert a CSV file to generate Pretty or Minified JSON output.

How to Use the Generated JSON

1

Upload & Convert

Upload a valid CSV file and select Convert to JSON.

2

Review

Check the converted rows and switch between Pretty and Minified formats.

3

Copy or Download

Copy the generated JSON or download it as a JSON file for use in your application.

ⓘ Private client-side conversion

The uploaded CSV file is processed entirely inside the user's browser. CSV content is not uploaded to an external server or stored in the WordPress database.

Data JSON Tool

Data to JSON Generator

Enter simple key and value data and convert it into clean JSON instantly. Numbers, booleans, null values, arrays, JSON objects and normal text are detected automatically.

All conversion happens inside your browser. The entered information is not uploaded to an external server or saved in the WordPress database.

Automatic type detection Client-side conversion No backend required

name = Product One price = 25 available = true ↓ JSON

Input Format

Add one key and value on each line. Use an equal sign or colon between the field name and its value.

Equal sign

Equal Sign Format


                        name = Product One

Colon

Colon Format


                        price: 25

Comma separated

Array Format


                        tags = shirt,summer,new

ⓘ

Supported value types

Text, numbers, true, false, null, comma-separated arrays, JSON arrays and JSON objects are recognized automatically.

Enter Your Data

Enter one field per line. Empty lines and lines beginning with the # character are ignored.

Key and value data

Data lines 0

Characters 0

Comment lines 0

Converted Field Preview

Review the detected field names, values and JSON value types before using the generated output.

ⓘ

No converted fields yet

Enter key and value data, then select Convert to JSON to view the field preview.

Field	Value	Detected Type

JSON Preview

Switch between readable Pretty JSON and compact Minified JSON.

ⓘ

JSON output will appear here

Convert the entered key and value data to generate Pretty or Minified JSON.

How to Use the Generated JSON

1

Enter Data

Add one key and value on each line using an equal sign or colon.

2

Convert and Review

Convert the data and check each detected value type before using the result.

3

Copy or Download

Copy the generated JSON or download the result as a JSON file.

ⓘ Private browser-based conversion

Entered data is converted entirely inside the user's browser. The content is not uploaded to an external server or stored in the WordPress database.

App Features

Help shoppers find the right skincare routine and beauty products with personalized recommendations.

Beauty Finder & Routine Builder by F2 helps merchants provide personalized beauty recommendations using interactive quizzes and smart matching tools. Customers can discover their skin type, find suitable foundation shades, and receive customized skincare routines based on their preferences. The app supports flexible data management, integrates with Shopify products, and helps merchants improve the shopping experience with personalized product recommendations.

Features:

Personalized skin type and beauty recommendations

Smart foundation shade matching for every shopper

Custom skincare routines based on customer preferences

Flexible JSON data support for unlimited recommendations

Shopify product integration with personalized suggestions

Apps Demo Screenshots

Support Helpline

If you need Support, please message us on WhatsApp. We will give you a response just in one minute. Or mail to us, Amzadhossen420360@gmail.com Or Contact Our Support Website : https://friends2a-technology.com/fhopify/contact-us/

Whatsapp Number: +8801602438393

Website: https://friends2a-technology.com/