Jump to content

Can I have a call to action page only on specific pages?

Go to solution Solved by Lesum,

Recommended Posts

I'm trying to have a sticky "Order Now" button on certain pages (mostly the menu pages), but I don't know how to get it to only show on the pages that I want and not all pages. 

Link to comment
Posted (edited)

@app4qp Have you already figured out how to display the sticky 'Order Now' button? If so, please add the button, and I can provide the code to display it on certain pages.

If not, then please add a button at the bottom of the site footer. Once done, I can provide the rest of the code.

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Are you wanting to use the header button (call to action) and have it only appear on some pages?

In general that should be doable with some CSS. Two ways to go. Hide the CTA everywhere with CSS and then for the pages where you want to have it show, unhide it. The alternative is to hide it on just a few pages. Which one you use depends on the ratio. For example if you have a hundred pages and only three need the CTA then the first method would be in order. If you had a hundred pages and you want to show on 77 but hide 3 then the second method would be better.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

This is the code I have for my sticky "Order Now" Button. I have it as a code injection in the footer. 

 

<div id="btnFloatBook">
  <a style="position: fixed; z-index: 100; bottom: 1em; right: 1em;  padding: 1em 2em; background-color: #AC2929 ;color: #fff;font-family: Khand;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .02em !important;
    text-transform: uppercase;
    line-height: 1.2em !important;
    font-size: 1rem;"
   href="/order" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element">Order Now</a>
</div>

Link to comment

The general technique I described should work for a header cta button or your btnFloatBook.

What would be helpful is to have an answer to the ratio question I posed. Also the URL to a site and a description of...

I want btnFloatBook to show or not show on these pages.

We might then be able to get you some working starter code.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Solution

@app4qp Add this code under Custom CSS

#collection-65f4b17f8e6efc273e963355, #collection-65f796a82a6c68733da2d1e4 {
	div#btnFloatBook {
		display: none !important;
	}
}

You just have to add the collection ID for all the pages where you want to hide the button. In the code, I've included the collection IDs for the homepage and the 'Find Us' page.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.