Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How i put a button to scroll to a specific seccion of the page

How i put a button to scroll to a specific seccion of the page

Ddsdssds
Tourist
13 0 4

I want on my product to have a button under de buy button to go to the collapsible content that have the specifications, some people say me the code but idk how to do it or how to create a button with a specific code:

alpha-titan.com 

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
9034 2160 2664

Hi @Ddsdssds 

Yes, it possible. But you will JavaScript to open the collapsible to show content for you. Which collapsible do you want the button to scroll?

 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Customize"
  • Go to the product template, and add "Custom liquid" block. Then place the code below. 

NOTE: You will need the product link and ID of the collapsible to make this work. 

 

<a class="button" href="LINK_OF_THE_PRODUCT#ID_OF_THE_COLLAPSIBLE>Go to collapsible</a>
  • And Save. 

Sample code with the said link

<a class="button" href="https://theme-bella1.myshopify.com/products/leather-anchor#Details-315eca6e-9238-4fa7-a1a0-d2fefa290927-template--15853354451044__main">Go to collapsible</a>

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

 

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Ddsdssds
Tourist
13 0 4

How do i see the id of the collapsible content

 

Made4uo-Ribe
Shopify Partner
9034 2160 2664

You have to use the inspect tool. Go to your website, and right click the collapsible. This will open the inspect tool window.  Find the <details> tag and double-click to highlight the ID and copy

 

Made4uoRibe_0-1700005957435.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.