New Shopify Certification now available: Liquid Storefronts for Theme Developers

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

Ddsdssds
Tourist
12 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
4243 981 1196

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!

 

 

 

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Ddsdssds
Tourist
12 0 4

How do i see the id of the collapsible content

 

Made4uo-Ribe
Shopify Partner
4243 981 1196

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

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com