Banner above buy now button

Solved
CykelHouse
Excursionist
16 0 5

Hi, I’m looking for some help. 

I want to add a disclaimer above the buy now button. Similar to the picture attached. 

I only want it to work on certain products and not on every product. How would I go about this?

any help would be greatly appreciated 

 

Regards

gavin

A54D5797-F3E9-4985-BCC3-00C8B0158BB0.jpeg

0 Likes
threed
Explorer
60 9 16

This is an accepted solution.

You can try this:

  1. Take a test product (or the product you want to try this on) and tag it as "HasDisclaimer" or whatever indicator you would like. For example "Warning" or "ShowsNote".
  2. Navigate to Online Store on the sidebar in your Shopify admin.
  3. Click Actions > Duplicate and back up your code.
  4. Click Actions > Edit code.
  5. Find product-template.liquid (or whatever template controls your product in your admin).
  6. Find the place you would like your warning to appear in the code.
  7. Paste this in:
{% if product.tags contains "HasDisclaimer" %}
    <br>
    <p>This is a warning message and can be changed to whatever you want.</p>
    <br>
{% endif %}


Then save the template, open up the product page, and see if it looks how you want it to.

Please note that tags are case sensitive in Liquid, so only "HasDisclaimer" will work but not "hasdisclaimer" or "Hasdisclaimer" etc.
Let me know if that works.

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

Hello @CykelHouse,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
CykelHouse
Excursionist
16 0 5

Thanks for that!

would I be able to change it to product.vendor instead of tag?

also what would I add in to change the colour of the font?

thanks again

CykelHouse
Excursionist
16 0 5

Hi would you know what i would need to add to that code to change the colour to red?

Thanks again for your help

threed
Explorer
60 9 16

Hello,

For your first question, I believe that can be done. I haven't tested it but I assume you could change the first line to:

{% if product.vendor == 'VENDORHERE' %}

and then replace 'VENDORHERE' with whatever your vendor is.

Regarding the second question, you can use CSS styling to change the color of the text. In your theme.scss.liquid (or maybe theme.css.liquid since I think that's a newer thing), go to the very bottom and add this text:

.disclaimer {
      color: #FF5733;
}

This is telling the theme to look for any element with the class "disclaimer" and apply a red color to the text. You can change the hex code to the exact color you want, and if you add more lines you can also tell it to do other things like italicize the text or make it bold.

Now we'll need to apply the class to the text element. This is just a small change to your code:

{% if product.vendor == 'VENDORHERE' %}
      <br>
      <p class="disclaimer">This is a warning message and can be changed to whatever you want.</p>
      <br>
{% endif %}

 

That's off the top of my head (no testing) but I'm pretty sure that will work. Let me know if it doesn't.

I also have a small design business, so if you're ever needing someone to help with adjustments on a longer-term basis for pretty cheap I'd be happy to help

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)
0 Likes