Guide to Prompting

When building Shopify storefronts with Frontend, the way you phrase your prompts can significantly impact the quality of results. This guide will help you create effective prompts that lead to better outcomes.

Best Practices for Prompting

Keep Prompts Small and Concise

For the best results, focus on small, specific tasks rather than large, ambiguous ones. Breaking your storefront into manageable sections allows the AI to better understand your needs and deliver more accurate results.

Effective approach: Build your store page by page — collection grid first, then the product detail page, then the cart.

Be Specific and Clear

Clearly define what you want to achieve. Name the collection, the product fields, or the merchandising rule you have in mind.

Avoid Ambiguity

Ambiguous prompts can lead to unexpected results. “Make the shop page better” gives the AI nothing to work with; “show four products per row with the sale badge on discounted items” gives it everything.

Let Shopify Own Commerce

Products, collections, variants, inventory, cart, and checkout always come from the Shopify Storefront API — you never need to ask the AI to store products in a database or build a payment step. Prompt for the experience and let Shopify handle the transaction.

Examples of Effective Prompts

Here are some examples of well-structured prompts that will yield better results:

Storefront Pages

• “Create a collection page for Best Sellers with a four-column product grid and filters for size and color”
• “Build a product detail page with an image gallery, variant selector, quantity picker, and add-to-cart button”
• “Add a search page that queries products by title and shows results as they type”

Merchandising and Layout

• “Add a hero section to the homepage featuring the newest product from the Summer Drop collection”
• “Show a ‘Frequently bought together’ row on the product page using products from the same collection”
• “Display a sale badge and struck-through compare-at price on discounted products”

Cart and Checkout

• “Add a slide-out cart drawer that opens when a product is added, with line item quantity controls”
• “Show a free-shipping progress bar in the cart that fills as the subtotal approaches $75”
• “Send the customer to Shopify checkout from the cart’s checkout button”

Shopping Assistants

• “Add a chat widget that helps customers find products by describing what they want”
• “Give the assistant a tool to search the catalog and show product cards inline in the conversation”
• “Let the assistant add a recommended product to the cart when the customer agrees”

Shoppable Landing Pages

• “Build a landing page for our holiday gift guide with three curated product sections and buy buttons”
• “Create a single-product drop page with a countdown timer, size selector, and sticky buy bar”

Iterative Approach

Remember that building with AI is an iterative process. Start with the basic structure, then refine and add details:

1. Begin with the core page structure
2. Wire up the Storefront API data — products, collections, cart
3. Refine with specific design and brand elements
4. Add functionality and interactions
5. Fine-tune details and polish

By following these prompting guidelines, you’ll achieve better results and a more efficient workflow when building with Frontend.