"Buy Now" button visible on the first screen

Store Design
1

How can I make the “Buy Now” button visible on the first screen of the product page on Shopify’s mobile site, instead of being positioned around the second screen, and have it always visible at the bottom of the screen? Are there any elegant solutions to this?

I tried the SEOant Sticky Add to Cart App, seems not work for my site.

Thanks!

2

hello there

Here are the basic steps to create a fixed “sticky” button for the “Buy Now” button:

  1. Open your Shopify theme code editor: In your Shopify admin, click on “Online Store”, then “Themes”, and then click on “Actions” and “Edit code” for the theme you want to modify.

  2. Locate the product page template: Navigate to the template file that controls the product page layout. This is typically the “product.liquid” file, but the exact file name may vary depending on your theme.

  3. Add the custom code: Add the following code to the product page template, where you want the “Buy Now” button to appear:
  1. Style the button: Use custom CSS code to style the button and position it at the bottom of the screen. Here’s an example of CSS code to get you started:
.fixed-buy-now {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

.buy-now-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 1rem;
  border: none;
  border-radius: 5px;
  background-color: #ff6600;
  color: #fff;
  font-weight: bold;
}

In this example, the .fixed-buy-now class styles the container for the “Buy Now” button, and the .buy-now-btn class styles the button itself. Adjust the styles to match your branding and design preferences.

3

Thanks! I will try