Appearance

Jump to Section Block ​

What This Block Does ​

Jump to Section blocks create clickable badges that smoothly scroll to specific sections on the same page. They help customers navigate long pages quickly and create a better user experience by letting them jump directly to the content they want.

Perfect for: Table of contents navigation, product specification shortcuts, FAQ quick links, feature section jumps, landing page navigation

How to Add It ​

Step 1: Add the Jump to Section Block

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Navigate to any section that supports blocks
  4. Click Add block and choose Jump to Section Block from the list

Step 2: Configure Your Jump Link

  1. Enter the link label (what customers will see)
  2. Set the section ID you want to link to
  3. Choose the badge style and optional icon
  4. Test the link to ensure it scrolls to the right section

Video Walkthrough ​

Adding ID to Target Section ​

Need More Details?

For comprehensive step-by-step instructions on creating anchor links with any button or link element, see our detailed guide: Anchor Links - Jump to Sections

Key Settings to Configure ​

Link Label: The text that appears on the clickable badge

  • Be descriptive: "View Specifications", "See Reviews", "Shipping Info"
  • Keep it short: 1-3 words work best for badges
  • Use action words: "Jump to", "View", "See" help indicate what will happen

Section ID: The target section you want to scroll to

  • Find the ID: Each section has a unique ID in the theme editor
  • Be precise: The exact section ID is required for the link to work
  • Test it: Always verify the link scrolls to the correct location

Visual Style ​

Badge Type: Choose the visual prominence of your jump link

  • Primary: Bold style for important navigation (like main sections)
  • Secondary: Subtle style for supporting links
  • Accent: Brand-colored style for featured sections
  • Custom: Choose your own colors for specific design needs

Optional Icon: Add visual elements to make links more recognizable

  • When to use icons: Helpful for different content types (info icon for details, arrow for navigation)
  • Keep it relevant: Choose icons that match the destination content

Pro Tips for Success ​

Navigation Best Practices

  • Group related links: Use multiple jump links together for easy navigation
  • Strategic placement: Put jump links near the top of long pages or sections
  • Clear destinations: Make sure the section you're linking to has a clear heading
  • Test on mobile: Ensure smooth scrolling works well on all devices

Common Mistakes

  • Wrong section IDs: Double-check that section IDs match exactly
  • Too many links: Don't overwhelm customers with too many jump options
  • Unclear labels: Vague text like "Click here" doesn't help customers understand where they're going
  • Broken links: Always test jump links after making changes to your page structure