Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  1. Fundamentals
  2. How to Guides

How to jump/ link to another section on the SAME page

PreviousHow to GuidesNextHow to forward a contact form in Shopify to a different email with Gmail filters

Last updated 7 months ago

Linking to another part of a website on the same page is often referred to as creating an "anchor link" or "in-page link." This is a hyperlink that directs you to a specific section within the same webpage, rather than to a different page or an external site.

This technique is useful for long pages with multiple sections, like FAQs, terms and conditions, or detailed articles, allowing users to navigate directly to the information they are interested in.

Here's how it works:

  • Link anchor id: Fill out the setting named "Link anchor id" with a unique name (no spaces and only use dashes) Add a # symbol at the beginning. eg. #new-releases We've found it works best to avoid capital letters, don't start with a number and use dashes to separate words

  • This Link anchor id acts as a marker that you can link to.

2. Linking to the Anchor:

  • To create a link that jumps to this specific section, use the "Link" setting in any other section. You can use the richtext editor links or button links. Anywhere that you would normally link to another page. For example:

3. User Interaction:

  • When a user clicks on the link, the browser automatically scrolls to the part of the page with the matching Link anchor id.

4. Adding Smooth Scrolling with CSS

To enable smooth scrolling for anchor links on your webpage, you can use CSS.

You can enable smooth scrolling by adding the following CSS to your stylesheet or custom global CSS (must be global, this will not work in section scoped CSS fields) You can also use our "CSS Styles" section.

html {
  scroll-behavior: smooth;
}
Helpful hint! Not seeing this setting in the section under "Advanced"? Re-install your section from the Design Packs app and it will appear. Contact at us at support@design-packs.com if you still can't find it. :)
Make sure to include the # at the beginning of your anchor id