search
Go to app

Advanced elements

Powerful elements for product commerce, SEO structured data, social embeds, and more. Available on Pro plan.

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.

hashtag
Product elements

hashtag
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

hashtag
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

hashtag
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.

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

hashtag
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

hashtag
Content Organization

hashtag
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.

hashtag
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

hashtag
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.

hashtag
Engagement & CTA

hashtag
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

hashtag
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

hashtag
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

hashtag
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%

hashtag
Rich Content

hashtag
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

hashtag
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

hashtag
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

hashtag
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

hashtag
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

hashtag
Social Embeds

hashtag
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

hashtag
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

hashtag
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

hashtag
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

hashtag
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

hashtag
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

PreviousBasic elementsNextAI assistant

Last updated

Was this helpful?