Re: How to create a custom link call to action button?
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 (
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 
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
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 (
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
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
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?
Hi May
I used your advice to add a linked button to one of my Pages in Shopify to great effect, except that the vertical alignment for the text in my button is off, and I can't work out how to fix it. Can anyone advise? Here what it looks like:
Here's what I used:
Many thanks
Hi @AlexOnShopify,
I've got a great suggestion for you to make managing your documentation files on your product pages a whole lot easier. Instead of just adding a text or button link to your product description, why not try using the Free Ease Product Attachments app?
This app is perfect for uploading, managing, and updating all kinds of files, and it's super easy to use. You can upload unlimited files in different formats and assign them to specific products, product groups, or even all products. And if you ever need to update a file, just edit the attachment - it's as simple as that!
On the frontend, your files will be displayed in a separate section that's separate from the product description, so your customers won't miss it. And when they click on a file, they can easily preview and download it in a new tab.
Best of all, the app is totally free and doesn't require any coding knowledge to use. I really think it could be a game-changer for your business, so give it a try and see how it works for you!
Thank you I used this code it worked great! Plus I was able to customize my button to match my existing buttons. Thank you soo much
