### Accessing Product Lists with Zero-Based Indexing

Source: https://docs.revenuehunt.com/how-to-guides/send-leads-to-klaviyo

When looping through products, the count starts at 0. This example shows how to display the names of three products in a slot.

```html
<p>{{ person|lookup:'SLOT-dbqHqN - product_0_name'|default:'' }}</p>
<p>{{ person|lookup:'SLOT-dbqHqN - product_1_name'|default:'' }}</p>
<p>{{ person|lookup:'SLOT-dbqHqN - product_2_name'|default:'' }}</p>
```

--------------------------------

### Shopify Results Styling Examples

Source: https://docs.revenuehunt.com/reference/css-structure

CSS examples for customizing result headings, container layout, and slot list spacing in Shopify.

```css
/* Style result heading text */
.heading.results-heading h1,
.heading.results-heading h2,
.heading.results-heading h3 {
    color: #007bff;
    font-weight: 600;
}

/* Results container styling */
.results-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* Slot layout customization */
.results-slot_list-stacked {
    gap: 1.5rem;
}
```

--------------------------------

### Highlight recommended products

Source: https://docs.revenuehunt.com/how-to-guides/add-javascript

Logs the title and price of recommended products to the console.

```javascript
Object.values(quiz.resultContext.slotItems || {}).forEach(item => {
        console.log('Recommended product:', item.title, item.priceRange?.minVariantPrice?.amount);
        });
```

--------------------------------

### Track quiz events with callback functions for Shopify Legacy

Source: https://docs.revenuehunt.com/how-to-guides/track-ad-to-purchase-funnel

Add this script to the page where the quiz is embedded to manually track quiz start and results page view events. Ensure GA4 gtag.js is installed and loads before the quiz embed.js.

```html
<script>
var prqStarted = false;

// Fires each time a customer answers a question
function prqSlideCallback(event) {
    if (!prqStarted) {
        prqStarted = true;
        gtag('event', 'quiz_started', { event_category: 'quiz' });
    }
}

// Fires once, when the customer reaches the results page
function prqQuizCallback(quizResponse) {
    gtag('event', 'results_page_viewed', {
        event_category: 'quiz',
        quiz_name: quizResponse.quiz.attributes.name
    });
}
</script>
```

--------------------------------

### CSS Styling for Question Blocks

Source: https://docs.revenuehunt.com/reference/css-structure

Example CSS demonstrating how to style question headings, containers, specific heading sizes, and buttons using the provided selectors.

```css
/* Style all question heading text */
.heading.question-heading h1,
.heading.question-heading h2,
.heading.question-heading h3 {
    color: black;
    font-weight: bold;
}

/* Style heading container */
.heading.question-heading {
    margin-bottom: 2rem;
    padding: 1rem;
}

/* Target specific heading size */
.heading__medium.question-heading__medium h2 {
    font-size: 2rem;
    color: #333;
}

/* Customize question buttons */
.question_button {
    border-radius: 8px;
    padding: 12px 24px;
}
```

--------------------------------

### Example Tags JSON

Source: https://docs.revenuehunt.com/how-to-guides/send-leads-to-zapier

Example of the tags array sent to Zapier, used for segmenting leads or filtering automations.

```json
"tags": ["30s", "dry_skin"]
```

--------------------------------

### Example Answer Structure JSON

Source: https://docs.revenuehunt.com/how-to-guides/send-leads-to-zapier

Example of the answersByBlock object, showing how each question block is represented with its type and value.

```json
"answersByBlock": {
"qbi-6c4248f5": {
    "type": "first_name",
    "value": "Loretta"
},
"qbc-e8cf3180": {
    "type": "multiple_choice",
    "value": [
    "Fine lines and wrinkles",
    "Hyperpigmentation and discoloration",
    "Enlarged pores"
    ]
}
}
```