With Buttonizer it's possible to scroll to a specific section on your page. It's important to know that the element where you want to scroll to is
unique and cannot appear twice on your page. Otherwise it will be impossible to link to your element.
You can link to an element with:
- an unique ID attribute
- an unique classname attribute
- a section (such as
Tip: Buttonizer will only search for selectors on the current page. It's not possible to reffer to an element on another page. You can use Page Rules to only show buttons on specific pages.
Finding the first element matching a class
In this example, the first element in the document with the class
mysection is returned
In the following example, you can use complex selectors to select a specific section on your page. In this example, scroll to the login section
In the following example, Buttonizer will search for an ID on the page
Custom site or theme
Are you using Buttonizer on a custom website or theme? In this case, you'll identify the element manually using the
<div id="demosection">The section where Buttonizer will scroll to</div>
If you want to use a class instead, the element could look like the following if it has multiple classnames:
<div class="originalclasses demosection">The section where Buttonizer will scroll to</div>
Finding an element to scroll to on a Shopify store
If you're using a custom theme, you can add the
class attribute where you need Buttonizer to scroll to.
If you're not using a custom there, it's not possible to enter a custom ID or classname to a section through the customizer. In this case, you'll need to open your website, open the developer tools (for Windows users, F12) and find the element you want Buttonizer to scroll to.
For the section, you'll find elements with an unique
id, for example
shopify-section-template--15567834251522__image_banner. Enter this value inside Buttonizer. Since you're reffering to an ID, use the hastag as explained earlier. Example:
Using Page or Theme builders
If you're using Buttonizer on a platform, then you'll likely using a page builder. In this example we'll explain how you can create a section where Buttonizer will scroll to.
First, select a page where you want to identify an element and open the page via your pagebuilders editor.
In most cases, the ID-attribute is most suitable to set up since an ID should always unique on a page. For this example, enter
demosection for the ID attribute. Now publish the changes you've made in your page builder.
Now, open Buttonizer, select the button, select the
Scroll to section action and enter the following text:
# reffers to the
ID attribute. If you have chosen for the
CSS Class instead, you'll need to reffer to
.demosection to reffer the class-attribute.
Publish your Buttonizer changes as well and wait for the changes to become visible on your site.
WordPress post (WordPress)
First, open a WordPress Post, create a section (such as a paragraph), select
Advanced and enter the value inside
ADDITIONAL CSS CLASS(ES). Inside Buttonizer, make sure to use the classname refferer you have set up.
First, open a page via Elementor and select the section you want to scroll to. Select the
Advanced tab. You'll find
CSS ID and