How to create a custom link call to action button?

Solved
Shopify Partner
3 0 1

I'm selling a range of items that come with lots of documentation from the manufacturer. I could just download the documentation from the manufacturer website and add it to my files section but they are updated at different times and it takes a lot of work to be up to date. So I want to create a button on the product page that when clicking will open a new tab and open the PDF from the manufacturer website. I'm pretty sure I can create the link (which thankfully does not change) as a custom meta field but how do I display it ?

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
33 0 5

Hi there Alex,

My name is Evan, I’m a Guru here with Shopify.

A button to bring your customer to the proper document page is a great idea! That will make for a clear process, and it means they won't have to reach out to you whenever they want the documents.

I have two options for you here! The first one requires some coding. If that's something your comfortable with you can take a look at our blog on Call-to-Action Buttons. That will walk you through the steps of creating that functionality. You can also use the BestButtonGenerator to help you create that button.

The other options are using the ShoGun App to create a custom page, or hiring a Shopify Expert to create that button and functionality for you!

While I have you here Alex, how have you been managing your products and inventory from those manufacturers? Have you come across any issues that you need a hand with? I would be more than happy to help out with any issues that have some your way! If you have any other questions or concerns, please don't hesitate to let me know! I'll be more than happy to help!

Evan | Shopify Guru

0 Likes

Success.

Shopify Staff
Shopify Staff
335 31 76

Hi, Alex!

This is May from Shopify.

Those are some great suggestions from Evan! I did some testings on my test store, and found a different way to add this button to your product page. It is by editing your product description! Check out the steps below to achieve this.

    1. From your admin, go to ‘Product’ and select the product you wish to put a button on.

    2. Under the ‘Description’, add a text. For example: ‘Click here for PDF Manual’.

    3. Highlight the text and click on the link icon (). Then, you will see this box:

    4. Insert your link under ‘Link to’. Please make sure to include http://’, since you will be linking a document from the manufacturer’s website. You can put the title under ‘Link title’, however, this is optional.

    5. To open the link on a new window, change the dropdown ‘a new window’.

    6. Click ‘Insert link’.

    7. Click ‘Save’.

You have successfully created a link that links to the manufacturer’s PDF website. Now, let’s turn this into a button!

    1. On your produce page, click on , located on the top right corner of the ‘Description’.

    2. Locate your link, and add ‘class=”button”’ inside your <a> tag. Your <a> tag should look like:

<a class = "button" href="http://shopify.com" target="_blank" rel="noopener noreferrer">Click here for PDF manual</a>

    3. On the bottom of the description content, add the styling by copying the code below:

<style>
.button {
   background-color: #3f6e7c;
   color: #fff;
   font-size: 16px;
   padding: 10px 30px;
   text-align: center;
   display: inline-block;
   text-decoration: none;
}
.button:hover {
   background: #335c68;
   color: #fff;
}
</style>

    4. Click ‘Save’.

After you save this, you should see a blue button on your product page like this:

You can change your button’s color, size, font color or font size by editing the code above. For reference, I used Google’s hex color picker to choose the color of the button. If you would like dive deeper into the CSS styling, please visit W3School’s website on CSS Buttons.

If this isn't quite what you were after, or if you have any questions, let us know and we can continue with our support!

Kind Regards,

May

Shopify Support

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

4 Likes
Shopify Partner
3 0 1

Thanks will have a look.

0 Likes
Shopify Partner
3 0 1

May, This is even better! Thank you so much :) I think I will even integrate the links with the bit.ly link management dashboard to easily update whenever manufacturers update their manuals/product specs!

1 Like
Shopify Staff
Shopify Staff
335 31 76

Hi again, Alex!

 

Thank you for keeping us in the loop. It's my pleasure! That is so awesome to hear! I'm happy to know that you can even integrate this with Bitly for easier updates of the PDF manual.

 

Let me know if you have any other questions. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help.

 

Cheers,

May

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
1 0 0

Hi May!

I just used your suggestion and it works! It's just in my case I wanted to add a button which takes clients to my none commercial website. But actually I'm still facing a problem... So I've inserted the link and the button and it works perfectly, but when I try to apply the styling it works in the editor but not the product page. I mean I do have a button which works, but it doesn't look like the same as in the editor. It looks like my "add to cart" button that already exist on the page.Do you have any idea why this is happening? 
Thank you very much! 

0 Likes
New Member
4 0 0

Hey

 

I want to make the exact same button set (1 -pack 2 pack etc) for my store could you please explain how to as in the screenshot?Screen Shot 2019-11-05 at 15.31.39.png

0 Likes