# Advanced elements Advanced elements unlock the full potential of the SEO On Blog editor. While Basic elements cover everyday content needs, Advanced elements let you embed products, drive conversions with CTAs, and integrate social media - turning your blog into a sales and SEO machine.
### Product elements #### Product Display products from your Shopify store directly in your blog post. Select up to 20 products per block and customize how they appear with content and button settings.
**How to use:** 1. Add a Product element or type `/product` 2. Search and select products from your Shopify store (up to 20) 3. Configure content display and button settings **Best practices:** * Show **3-5 products per block** for optimal layout * Blog product blocks convert **3-5x better** than homepage grids * Best for: product roundups, gift guides, "Editor's Picks", seasonal collections *** #### Product Details Show the full details of a selected product - description, price, images, and variants. A complete product page experience inside your blog post.
**How to use:** 1. Add a Product Details element or type `/productdetails` 2. Search and select one product 3. The full product view renders inline **Best practices:** * Use for **dedicated product posts** (reviews, launches, deep dives) * Don't use multiple Product Details in one post - too heavy * Best for: product reviews, new product announcements *** #### Product Card Display a compact product card that shows key information in a popup-style view. Readers see product details without leaving the blog post. {% embed url="" %} **How to use:** 1. Add a Product Card element or type `/product card` 2. Select a product from your store 3. A compact card renders inline **Best practices:** * Keep to **1-3 cards per row** for clean layout * Best for: brief product mentions, "shop the look" callouts *** #### Text & Product
A two-column layout pairing text content on one side with a product display on the other. Magazine-style editorial commerce. **How to use:** 1. Add a Text & Product element or type `/text & product` 2. Write editorial text on the left 3. Select a product to display on the right **Best practices:** * Text left, product right is the standard reading pattern * Best for: Editor's Pick sections, product spotlights, story-driven selling *** ### Content Organization #### Table of Contents
Automatically generates a clickable table of contents from the headings (H2, H3, H4, H5) in your post. Updates automatically as you add or change headings. **How to use:** 1. Add a Table of Contents element or type `/toc` 2. (Optional) Customize the title 3. The TOC auto-populates from your post headings **Best practices:** * Place **after the intro paragraph**, not at the very start * Use for posts with **3+ headings** (1,500+ words) * Reduces bounce rate by \~30% on long-form content * Can appear as **sitelinks** in Google search results > **SEO Tip:** For best results, use consistent heading levels throughout your post. The TOC updates automatically. *** #### Related Posts
Display posts related to the current article, matched by tag or category. Keeps readers on your blog longer. **How to use:** 1. Add a Related Posts element or type `/relatedposts` 2. Posts are automatically matched by tag/category 3. Place at the end of your post **Best practices:** * Show **3 related posts** for optimal layout * Reduces bounce rate by keeping readers engaged * Place near the end of the post *** #### Recent Posts
Display your most recently published blog posts. Signals fresh content to both readers and Google. **How to use:** 1. Add a Recent Posts element or type `/recent posts` 2. The element automatically shows your latest published posts **Note:** Requires at least 3 published posts to appear correctly. *** ### Engagement & CTA #### Button Add a customizable call-to-action button. Direct readers to product pages, collections, signup forms, or any URL.
**How to use:** 1. Add a Button element or type `/button` 2. Set the button text, link URL, and style 3. Configure alignment **Best practices:** * Use **action verbs**: "Shop Now", "Get Yours", "Learn More" * One primary CTA per section * Place **after compelling content** that motivates action *** #### Checkout Button A buy button that lets readers purchase a product or add it to their cart directly from your blog post. Connected to a specific Shopify product.
**How to use:** 1. Add a Checkout Button element or type `/checkout` 2. Select a Shopify product to connect 3. Choose mode: "Buy Now" (direct checkout) or "Add to Cart" (multi-item) **Best practices:** * "Buy Now" for impulse purchases, "Add to Cart" for multi-item shopping * Pair with a **product image** above for context * Zero-friction purchase path - reader goes from blog to checkout in one click *** #### CTA Banner Create an eye-catching call-to-action banner combining a headline, description text, and a button.
**How to use:** 1. Add a CTA Banner element or type `/cta` 2. Write a headline (max 8 words) 3. Add description (1-2 sentences) 4. Configure the button text and link **Best practices:** * 50%+ CTR lift vs plain text links * Place **mid-post and at the end** for maximum exposure * Best for: newsletter signups, sale promotions, product launches *** #### Testimonials Display customer reviews or testimonials with avatar, name, title, and star ratings.
**How to use:** 1. Add a Testimonials element or type `/testimonials` 2. Fill in: review text, reviewer name, title, and profile URL 3. Upload reviewer's image 4. Set star rating **Best practices:** * Use **real reviews** from verified customers * **3 testimonials** is the sweet spot * Place near product elements or checkout buttons * Customer testimonials improve conversion by \~34% *** ### Rich Content #### FAQs Add a frequently asked questions section. Write Q\&As manually or use AI to generate them from your post content. Supports FAQ schema (structured data) for Google rich snippets.
**How to use:** 1. Add a FAQs element or type `/faq` 2. Write questions and answers manually, or click **AI Generate** to auto-create from your content 3. FAQ schema is automatically generated when published **Best practices:** * **5-8 FAQs per post** is optimal * Keep answers to **2-3 sentences** - concise and direct * FAQ schema gives you **2-3x more SERP real estate** with dropdown snippets in Google *** #### Gallery Display a collection of images in a grid or slider layout. Configure aspect ratios, card layouts, alt text, and captions.
**How to use:** 1. Add a Gallery element or type `/gallery` 2. Upload or select multiple images 3. Choose layout: Grid or Slider 4. Configure aspect ratios and captions **Best practices:** * **3-9 images** per gallery * Add alt text to every image * Use **consistent aspect ratios** for a clean look *** #### Text & Image A two-column layout combining text and images. Supports multiple images for a carousel effect and inline buttons.
**How to use:** 1. Add a Text & Image element or type `/text & image` 2. Write text on one side 3. Add images on the other (supports carousel) 4. (Optional) Add a button within the layout **Best practices:** * Text left, image right is the standard pattern * Best for: product storytelling, feature showcases, tutorials *** #### Custom HTML Insert custom HTML code directly into your post. Use for embedding third-party widgets, custom styling, or content that requires raw HTML.
**How to use:** 1. Add a Custom HTML element or type `/html` 2. Paste your HTML code 3. Preview to ensure it renders correctly **Supported use cases:** Klaviyo forms, Typeform surveys, Google Maps, Calendly embeds, custom CSS styling. **Best practices:** * Keep HTML **minimal and clean** * Test thoroughly before publishing * Avoid conflicting JavaScript *** #### Decoration Add decorative visual elements to your post using AI-powered templates.
**How to use:** 1. Add a Decoration element or type `/decoration` 2. Describe the style you want with specific bullet points (colors, materials, lighting style, mood) 3. AI generates the decorative visual **Best practices:** * Use **sparingly**: 1-2 per post max * Be specific in your descriptions for better results * Best for: brand identity visuals, seasonal theming, hero sections *** ### Social Embeds #### Instagram Embed Instagram posts or Reels directly in your blog post.
**How to use:** 1. Add an Instagram element or type `/instagram` 2. Paste the Instagram post or Reel URL 3. The content appears inline **Best practices:** * Limit to **1-3 embeds** per post (each adds external scripts affecting load time) * Ensure the post is **public** - private posts won't display * Best for: user-generated content (UGC), influencer collaborations *** #### TikTok Embed TikTok videos in your blog post.
**How to use:** 1. Add a TikTok element or type `/tiktok` 2. Paste the TikTok video URL 3. The video embeds inline **Best practices:** * Limit to **1-2 per post** (external scripts impact load time) * Ensure the video is **public** * Best for: product demos, tutorials, trend content, Gen Z audience *** #### X (Twitter) Embed tweets from X (formerly Twitter) in your blog post.
**How to use:** 1. Add an X element or type `/x` 2. Paste the tweet URL 3. The tweet embeds inline **Best practices:** * **1-3 tweets per post** * Add your own commentary before the embed for context * Best for: expert authority, social proof, news references, announcements *** ### Recipe Elements Format cooking or preparation instructions with full Google Recipe schema compliance. When published, this generates rich results in Google search with cooking details, ratings, and images.
**How to use:** 1. Add a Recipe element or type `/recipe` 2. Fill in: recipe title, description, prep/cook/total time 3. Add ingredients list and step-by-step instructions 4. Set servings, calories, and nutrition info 5. Recipe schema is automatically generated **Best practices:** * Link to your products in the ingredients list (e.g., link "olive oil" to your store's olive oil) * Recipe content has the **highest click-through rates** of any content type in Google *** #### Image Compare Create an interactive before-and-after comparison slider. Readers drag a handle to reveal two overlapping images.
**How to use:** 1. Add an Image Compare element or type `/imagecompare` 2. Upload the "before" and "after" images 3. Choose slider orientation: horizontal or vertical 4. Configure aspect ratio and optional custom CSS **Best practices:** * Use **consistent lighting and angle** for both images * Label images clearly ("Before" / "After") * Best for: product demos, skincare results, home improvement, design transformations *** #### Event Countdown Add a countdown timer for upcoming events, product launches, sales, or promotions.
**How to use:** 1. Add an Event Countdown element or type `/countdown` 2. Set: event title, description, countdown date and time 3. Add a link to the event page or product 4. (Optional) Set a custom message for when the countdown expires **Best practices:** * Creates **FOMO urgency** that drives action * **Remove or update** after the event ends * Best for: product launches, flash sales, seasonal events, webinars *** #### Map Embed a Google Maps location directly in your blog post. Useful for store locators, travel guides, event venues, or any location-based content.
**How to use:** 1. Add a Map element or type `/map` 2. Search for a location in the **Search location** field 3. The map renders inline with a Google Maps pin **Settings:** * **Alignment:** Left, Center, or Right * **Aspect Ratio:** 16:9 (default), or custom * **Width:** Adjust percentage width * **Zoom:** Control map zoom level * **Custom CSS:** Add custom styling if needed **Best practices:** * Use for **store locations, event venues, travel guides** * Set a reasonable **zoom level** - too close loses context, too far hides the pin * 16:9 aspect ratio works best for most layouts --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.seoon.io/element/advanced-elements.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.