How do I add custom text and hyperlink directly under the price on the product page?

[dwassner]

This is one of my product pages:

https://wholesaleblocks.com/products/48-mini-cinder-blocks-on-a-pallet

My theme is motion

All product pages will need the same text and hyperlink. I need to link to another page on the site

thank you

[Niki_K]

Hi @dwassner,

go to online store -> edit code. Then find the file product-template.liquid.

In this file, find this class: product__price. Under this piece of code (the entire code for rendering the price), insert this piece of code: 

<a href="URL to another page">Clickable text for redirecting to another page</a>

e.g.

<a href="www.myshopifystore.com/contact">Contact</a>

Hope it helps!

[dwassner]

Thank you. I have searched in and cannot find this code anywhere in:

'product-sections-template.liquid'

'product-form.liquid'

'product-template.liquid' in sections'

'product-template.liquid' in snippets

Is there anything else it could be called?

[Niki_K]

Hi @dwassner,

I would say it has to be either in the product-template.liquid or product-sections-template.liquid (I'm not using this theme but I think it's gonna be similar). 

I used the Firefox developer tools, see the screenshot. Here I found the relevant class (you can also search for the price piece of code by searching for another part on the page and then find the relevant piece of code).

 

[dwassner]

awesome, thank you

[dwassner]

So the hyperlink is working now, but it is going to the following page:

https://wholesaleblocks.com/products/wholesaleblocks.com/pages/shipping

This is the code I have:

<a href="wholesaleblocks.com/pages/shipping">*Shipping Billed After Checkout - Click Here for Details</a>

There is a portion of the url that is automatically populating: 'https://wholesaleblocks.com/products/' and I am not sure how to remove this.

Also, is there a way to make the font blue and underline the portion that says 'click here', so it looks more like a hyperlink?

Thank you

[Niki_K]

Hi @dwassner,

the hyperlink. You should include: https://www, so that it looks like this: https://www.wholesaleblocks.com/pages/shipping.com

The font and the underline, you need to change the code to: 

<a href="www.myshopifystore.com/contact">xxxxx <span class="my_class">Contact</span></a>

And then, in the css file on Shopify, add this class and add this:

.my_class {
color: your_color;
text-decoration: underline;
}

[dwassner]

Thank you.

So I am adding the css class code to another section of code? Will this impact anything else on the site?

I added the www. to the part of code with the url, but it is still automatically adding 'https://wholesaleblocks.com/products/' to the beginning of the url.   Is this because of the ahref part of the code?

I would ideally like the text on the product page to read: 

*Shipping Billed After Checkout - Click Here for Details

Hope this makes sense.

thank you

[Niki_K]

Hi @dwassner,

css class - yes, add it to another file: assets -> theme.scss.liquid (should be the same name as in my theme, I guess).

I won’t affect anything else if you use this class only on this piece of code.

Then, you should use another syntax:

<p>*Shipping Billed After Checkout <a class=“my_class” href=“URL”>Click here </a>For detail</p>

(Sorry for not inserting the code, somehow on my phone adding the code syntax isn’t working)

Adding www still not working? Try testing another page on your site (just a test if it does the same or not). If yes, I guess there has to be something in the code causing this issue. And also use a random external link as well. Just to find out where the problem lies.