Consecutive Product Recommendations

Description

Add multiple product recommendation sliders to the product page.

Hypothesis

Implementing multiple product recommendation sliders allows us to showcase a diverse range of items aligned with different purchase intents, such as complementary products, popular trends, and seasonal favorites. 

This enhances the product page's aesthetic appeal and engages shoppers with curated options that cater to their preferences.

Prediction

Setting up the experience on Visually:

BUILD TIME: 20-30 MINUTES

Step 1 - Set the scope

Start by defining the specific conditions and parameters required to trigger the experience:

 

Audience → make sure that this parameter is set to ‘All Visitors’.

 

Pages → set to / make sure that this parameter is set to ‘Product pages’.

 

Devices → set to 'Mobile Only'.

 

Trigger → make sure that this parameter is set to 'Page Load'.

 

Step 2 - Set the changes

For this experience, we’ll create 4 consecutive product recommendations sliders:

• Same color
• Same collection
• Ai-Driven recommendations
• Recently viewed

Depending on your store, you might want to set different approaches, based on the product attributes your particular audience cares about.

As such, we recommend working with well-managed product tags, focusing on the most important collections, in order to better optimize this experience over time.

 

Clean up the product page → remove all elements below the product details section that aren’t essential to the page by hover-clicking on each element → click ‘Remove’.

 

Add the 1st slider (Same color) → select a position below the product details section → select ‘Product Recommendations’ → select ‘Product Slider’.

 

Configure & tailor the design → align the design of this slider to fit your brand identity, and name the Header (for example: “IN THIS COLOR” or “MORE IN THIS COLOR”).

We recommend saving your style for safekeeping. For more information on reusing styles, refer to this article.

 

Set the strategy for the 1st slider → scroll down and select ‘PERSONALIZED’ → click on ‘more filters’ → set the following filters:

• INVENTORY : GREATER THAN : 0
• AND : COLOR : IS : ALL PRODUCTS IN THE SAME COLOR

 

Add the 2nd slider (Same collection) → within the 1st slider’s block, click on ‘ ⋮ ‘ → click on ‘Copy CSS selector’ → click on ‘Duplicate’ → select ‘manually enter a CSS selector’ and paste → set to ‘ADD AFTER → click on continue when ready.

 

Set the strategy for the 2nd slider → change the header text to “IN THIS COLLECTION”.

 

→ Scroll down and select ‘ADVANCED RULING’

 

→ Create a rule for each collection you wish to target, with the following parameters:

• IF : PRODUCT FROM COLLECTION : IS : [collection name]
• THEN SHOW : MOST POPULAR
  • INVENTORY : GREATER THEN : 0
  • AND : PRODUCTS FROM COLLECTIONS : IS : [collection name]

Each product can belong to multiple collections, so you can choose the specificity of recommendations.

We recommend starting with broader collections and narrowing to specific sub-collections as necessary.

 

Add the 3rd slider (Personalized) → within the 2nd slider’s block, click on ‘ ⋮ ‘ → click on ‘Copy CSS selector’ → click on ‘Duplicate’ → select ‘manually enter a CSS selector’ and paste → set to ‘ADD AFTER → click on continue when ready.

Set the strategy for the 3rd slider → change the header text (for example: “you may also like”, “curated for you”, etc…) → scroll down and select ‘PERSONALIZED’ → click ‘Update’

 

Add the 4th slider (Recently viewed) → within the 3nd slider’s block, click on ‘ ⋮ ‘ → click on ‘Copy CSS selector’ → click on ‘Duplicate’ → select ‘manually enter a CSS selector’ and paste → set to ‘ADD AFTER → click on continue when ready.

Configure the 4th slider → apply the following parameters:

• WITH ADD TO CART
• WITHOUT PRODUCT REVIEWS

→ Change the header text to “recently viewed”

 

Set the strategy for the 4th slider → scroll down and select ‘Recently Viewed’ → click ‘Update’ once you’re done.

 

Polish the design → now’s the time to touch-up and polish the styling for each slider so that they’re aesthetically coherent to the brand and layout.

 

Save the experience → click on 'Save' → assign a name to your experience → provide a description (optional) → click 'Next' to confirm.

 

Step 3 - Preview & QA

To ensure that the experience functions correctly before publishing, we strongly recommend conducting a quality assurance (QA) session using our ‘Preview’ feature.

1. Click on ‘Preview’ → ‘Share’ → ‘Copy Link’
   
   
2. Use this link on the target device(s) for more accurate insights.
   For optimal results, we suggest running this QA in incognito mode to eliminate any cookies that may influence the testing process.
   
   
3. For additional guidance on performing quality assurance with Visually, please refer to this article.

 

Step 4 - Finalize & Publish

We highly recommend conducting an A/B validation to evaluate the impact of this experience on your store's performance.

To begin → click on ‘Next’.

Initiate an A/B test → navigate to section 3 and select ‘Yes, sure’.

Name your variation(s) → we suggest naming variations based on the hypothesis you’re testing and how they differ from each others, such as:

• Original / 4 SLIDERS
• Original / with ATC
• Same color / Same brand

 

Determine the allocation → we suggest starting with a 50/50 split to obtain results quickly and reliably. 

• If you prefer to conduct a preliminary sanity check, consider a 80/20 allocation for initial validation, then transition to 50/50 for comprehensive testing.
  
  
• Keep in mind that achieving statistical significance may take several days, especially with lower allocations. For guidance on analyzing and monitoring your A/B tests, refer to this article.
  
  

 

Set the metric goals → click on ‘+’ to select goals → for this experience, we recommend the following KPIs:

• Conversion Rate
• Average Order Value
• Per Session Value
• Profit
• Product Details View Rate

Set the primary metric → we recommend setting ‘Conversion Rate’.

Send metrics to GA4 (optional) → check the box for ‘Send events to Google Analytics’.

 

Publish the experience → click on ‘Publish’ and confirm when ready.