Creating a Product Landing Page with Studio Assistant

Have Studio Assistant create a landing page for a product with images, parallax scrolling component, and texts; step-by-step guide and video.

Studio Assistant can build a landing page from scratch for a product. It finds the product in the catalog, generates scene images based on the product photo, defines a new component for the page if needed (e.g. parallax scrolling), and writes the texts. The page is created as a draft; you review and publish it. The same explanation is available in the video below.

<video controls preload="metadata" playsinline width="1920" height="1080" poster="https://files.docs.hebiar.com/videos/console/studio/pages/asistan-tanitim-sayfasi.tr.jpg" src="https://files.docs.hebiar.com/videos/console/studio/pages/asistan-tanitim-sayfasi.tr.mp4"><a href="https://files.docs.hebiar.com/videos/console/studio/pages/asistan-tanitim-sayfasi.tr.mp4">Open the video</a></video>

Before You Start

  • The assistant takes the product name, price, photos, and page link from the catalog. You may write the technical details on the product page (e.g. drop, weight, usage area) if you wish; the assistant does not fabricate information.
  • The new component defined by the assistant awaits approval. If you do not have permission to approve components, the component can be used in the draft but requires manager approval.
  • Provide the page address (e.g. /hyperion-max-4) in the request. There must be no other page at the same address.

1. Write the Request

  1. Open Pages screen and launch Studio Assistant.
  2. Write the product code, product details, sections, and desired effect. Example:

    Create a landing page with parallax scrolling for Hyperion Max 4 with code 1104981D879; let the address be /hyperion-max-4. Find the product from the catalog. Product page details: drop 6 mm, weight 286 g, for fast-paced runs and medium/long distances, suitable for runners of all levels. Sections: full-screen intro (product name, a short slogan, a 'Discover now' button linking to the product page; the title should appear on the first screen), three feature sections (lightness, 6 mm drop, fast pace), and a closing directing to the product page with price. Parallax effect: each section's background image is fixed to the screen, texts scroll over it, and the next section overlays; for readability, a dark layer stays fixed with the image. Define a component if necessary. Generate images referencing the product photo: 4 wide, atmospheric running scenes for intro and three sections. Texts should be in Turkish.

  3. The assistant finds the product, generates images, defines the component, and builds the page. This may take a few minutes.

2. Approve and Open in Editor

  1. In the Changes in this turn card, review the page, component, and images, then click Approve. This also approves the new component.
  2. Open the page with the Open in editor link in the assistant's response. You can manually edit each section in the editor.

If you switch to another page without approving, the card disappears from the panel but changes remain in the draft.

3. Preview and Publish

  1. Use Preview to open the page in the site view and scroll down: images remain fixed on the screen, texts scroll over them, and each section overlays the previous one.
  2. Return to the editor and click Publish.

Check the Result

  • Open the page address on the site; scroll on desktop and mobile.
  • You will see the component defined by the assistant in the Components screen; you can use it on other pages as well.
  • Generated images are in Media.

Common Issues

  • There is a horizontal line over the image or the dark layer scrolls with the text: Ask the assistant to keep the dark layer fixed with the image.
  • Intro title does not appear on the first screen: Specify "the title should appear on the first screen" in the request or edit the title in the editor.
  • Page exists at the same address: Provide a different address or remove the old page first.