Product Recommendation Row

Add a dynamic product recommendation row using Shopify's native recommendation API.

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Generate the Liquid, JavaScript, and CSS for a product recommendation row section that I can paste into my theme as a custom section for product pages, using Shopify’s Product Recommendations API (/recommendations/products.json?product_id=[PRODUCT_ID]&limit=[LIMIT]). The section should fetch recommendations dynamically via JavaScript after the page loads. Display recommended products in a horizontal scrollable row with [VISIBLE_PRODUCTS] visible at a time on desktop. Each product card should show: product image, title, price, and a Quick Add button. Add navigation arrows on desktop and support swipe on mobile. Include a section heading [SECTION_HEADING] (e.g., You May Also Like) and a fallback message or alternative collection display if the API returns no results. Use the intent parameter set to [INTENT] (options: related, complementary). The section should not block page load – load asynchronously. Generate the Liquid section, JavaScript for API fetching and rendering, and CSS.

Where to add this: In Shopify admin, go to Online Store > Themes > Edit code, create a new section file at sections/product-recommendations.liquid, and paste the generated Liquid/CSS/JS (including the schema block) in. Save, then open the theme customizer on a product page template and add the “Product Recommendations” section.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions