Jump to content

Two buttons on bottom of screen MOBILE

Go to solution Solved by paul2009,

Recommended Posts

  • Solution
On 5/14/2022 at 9:42 AM, KasperBed99 said:

I want to always have two buttons on the bottom of the screen on mobile exactly as shown on the screenshot. Is this possible to do in Squarespace with some code?

Yes, you can add some HTML through code injection to achieve this. The simplest approach is to create the buttons with some HTML and then use a little CSS to style those buttons to:

  • only appear on mobile
  • match other buttons on the site
  • remain fixed to the bottom of the page, and
  • (optionally) save valuable screen estate by sliding the buttons out of view as the user scrolls down the page, but make it available whenever they scroll up.

However, to do this you'll need to be on a Business Plan or above.

 

Here's a guide that I wrote showing how to add a CTA bar with two buttons to mobile:

Mobile CTA footer for Squarespace 7.1

Screenshot of mobile CTA buttons on a Squarespace website

 

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009
Added link to guide

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

One solution you can try following steps:

- Edit the footer

- Add a space block at the end

image.thumb.png.b4e60db3bee1edc3a162e1b6f3570fd1.png

- Add 2 button block after the space block

- Hold and drag the button into 2 columns: https://recordit.co/2xparpJ4fz

- Use the space block id to selector the buttons to set the Css style as you wish

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, KasperBed99 said:

Hi @bangank36,

Thanks for your reply. Isn't there required some code to only show on mobile and make them fixed or?

It can be accomplished via some Css code:

- media query to set style only on mobile

- position with fixed to set it buttom-fixed on mobile

@media only screen and (max-width: 767px) {
  /*style for mobile*/
  You selector {
    position: fixed;
    bottom: 0;
  }
}

@media only screen and (min-width: 768px) {
  /*hide these buttons for the device with the larger width than mobile*/
  You selector {
    display: none;
  }
}

Here is the combination of media query and setting position

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

In addition to that, you can use the this extension to get the right id:

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@bangank36 this is the code I did

/* buttons footer on MOBILE */
@media only screen and (max-width: 767px) {
  /*style for mobile*/
#block-yui_3_17_2_1_1652521959585_13957, #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316 {
    position: fixed;
    bottom: 0;
}
}
@media only screen and (min-width: 768px) {
  /*hide these buttons for the device with the larger width than mobile*/
#block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316, #block-yui_3_17_2_1_1652521959585_13957 {
    display: none;
  }
}

 

Link to comment
44 minutes ago, KasperBed99 said:

@bangank36 this is the code I did

/* buttons footer on MOBILE */
@media only screen and (max-width: 767px) {
  /*style for mobile*/
#block-yui_3_17_2_1_1652521959585_13957, #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316 {
    position: fixed;
    bottom: 0;
}
}
@media only screen and (min-width: 768px) {
  /*hide these buttons for the device with the larger width than mobile*/
#block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316, #block-yui_3_17_2_1_1652521959585_13957 {
    display: none;
  }
}

 

This code make your elements hidden 

image.thumb.png.08518af544bbe6290b465df4de6f8352.png

Try replacing yours with the following one

/* buttons footer on MOBILE */
@media only screen and (max-width: 767px) {
  /*style for mobile*/
  #block-yui_3_17_2_1_1652521959585_13957 + .row {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    width: 100% !important;
    z-index: 99999;
  }
}

@media only screen and (min-width: 768px) {
  /*hide these buttons for the device with the larger width than mobile*/
  #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316, #block-yui_3_17_2_1_1652521959585_13957 {
    display: none;
  }
}

/*fix for the hidden section*/
@media screen and (max-width: 1000px){
  section[data-section-id="6267ae66a6bcb36a42a24e46"] {
    display: block;
  }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

image.thumb.png.9cd71c2bfd6d32a57e4ba5ae7c90ffa1.png

Still need more css style to make these button fit your desire

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 hours ago, KasperBed99 said:

You know a code?

I’ll write some for you when I’m at the computer. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

Hi @paul2009,

I did it for desktop with one button. Maybe we could use kind of the same code? There is some custom css for the look of the buttons as well. Here is the code:

/* Fixed button on bottom of screen */
@media screen and (min-width: 768px) {
.page-section[data-section-id="6280ae4e215cde1811b8597c"] {
  position: fixed;
  background: transparent;
  bottom: 0px;
  left:0;
  right:0;
  z-index: 9999;
  min-height: 30px!important;
  .section-background {
      background: transparent;   
  }
  .content-wrapper {
    padding: 0px!important;
  }
  .sqs-block-button-element--large {
    border-radius: 0px;
    border-top-left-radius: 50px 50px;
    font-size: 1.3rem;
    background: #b98b82 !important;
    box-shadow: inset 0 0 0 0.09px #ceaea8 !important;
    padding: 20px 55px 18px 60px !Important;
    filter: drop-shadow(10px 10px 30px rgba(0,0,0,.30)) !important;
  } 
  .sqs-block-button-element--large:hover {
    box-shadow: inset 400px 0 0 0 #ceaea8 !important;
  } 
}
}
@media screen and (max-width: 767px) {
.page-section[data-section-id="6280ae4e215cde1811b8597c"] {
  display: none;
}
}

 

Link to comment
On 5/14/2022 at 9:42 AM, KasperBed99 said:

I want to always have two buttons on the bottom of the screen on mobile exactly as shown on the screenshot.

I have drafted a quick guide that explains how to add a CTA bar with two buttons as you described:

Mobile CTA footer for Squarespace 7.1

Please take a look and let me know how you get on.

Note that if you've already added any button code to the site, you'll want to remove this before you get started.

image.gif.ed46e50e8f8cd10f10747c5544e420ef.gif

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 11 months later...
45 minutes ago, ElineBredesen said:

Thank you for the code. It worked perfectly. But I need to edit the fonts on the buttons. Do you have a code for that as well? 

The buttons will use the site styles for 'Secondary Buttons', so the easiest way to set them is via the Site Styles panel. However, if you want to use some CSS to change these independently of other secondary buttons, you should be able to use the custom CSS below, using your font name instead of the example:

.sf-mobile-cta-btn a.sqs-block-button-element {
  font-family: ltc-bodoni-175;
}

I hope this helps!

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 4 months later...
20 minutes ago, HOMENCREATIVE said:

Is there a way to turn off the "slide in and out" as you scroll up and down?

Yes, sure. When you paste the code in step 1.2, don't include the section that starts and ends with a script tag (rows 19 to 34).

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
  • 5 months later...

@paul2009 I used your code successfully, however I had to increase the height of the button and add padding to the text to center it because it was showing up very narrow! Just FYI. 

Secondly, for some reason, it's showing a fill behind the text of the button even though I've updated both the "color" and "background-color" correctly.

Any idea why this is happening? The code I have is:

/*MOBILE STICKY FOOTER CTA */
/* Mobile CTA bar - Squarespace 7.1   */
/* Left (secondary) button colours */
.sf-mobile-cta-btn:nth-of-type(1) {
  background-color: #000000;
  color: #fffff;
  font-family: "Futura-PT";
  font-size: 1.2rem !important; //size
  font-weight: 600 !important; //
  padding-top: 13px!important;
}

/* Right (primary) button colours */
.sf-mobile-cta-btn:nth-of-type(2) {
  background-color: #006837;
  color: #ffffff;
  font-family: "Futura-PT";
  font-size: 1.2rem !important; //size
  font-weight: 600 !important; //
  padding-top: 13px!important;
 
}

@media only screen and (max-width:800px) and (orientation: portrait) {
  .sf-mobile-cta-wrapper {
    display: block!important;
  }
}

.sf-mobile-cta-wrapper {
  background: #ebebeb;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: bottom .3s;
}
.sf-mobile-cta {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  height: 50px;
}
.sf-mobile-cta-btn {
  flex-grow:1;
  flex-basis: 0;
  text-align: center;
}
/* End of navigation hover effect    */

image.thumb.png.58257286e8edf26af4139bde9f97a972.png

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.