Buy Now button on product page

Store Design
1

Hi,
I have Ella theme v6.7.0. I have the Add to Cart button but I Can’t find the “Buy Now” button.
I only havedynamic checkout buttons that show the Shop Pay button. does anyone know if there is a built-in option or do I need to add code to the template theme?

buy now.png
buy now.png481×274 8.21 KB

2

Hey @elio ,

In the Ella theme, if the “Buy Now” button is missing, it may not be a built-in option in version 6.7.0, as some themes rely on dynamic checkout buttons like Shop Pay. You can add a custom “Buy Now” button by modifying the theme code. Here’s a simple way to add it:

Follow these steps:

  1. Online Store > Theme > Edit Code

  2. Locate the product template file (likely product-template.liquid or similar).

  3. Insert a custom “Buy Now” button below the Add to Cart button. Here’s an example code snippet:
  1. style the button by adding CSS for .buy-now-buuton in your theme’s CSS file.

This will redirect customers directly to the checkout page, simulating a “Buy Now” functionality. Let me know if you’d like further customization!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

3

Hi @rajweb . I have .json not .liquid

I don’t know if this is the place to put it. But this is what I found in the code.

},
        "f1b31d90-1e43-4948-9fe3-97ba43f6fb34": {
          "type": "buy_buttons",
          "settings": {
            "show_dynamic_checkout": true,
            "show_gift_card_recipient": false,
            "atc_animation": "none",
            "atc_color": "#ffffff",
            "atc_border_color": "rgba(0,0,0,0)",
            "atc_bg_color": "{{ shop.brand.colors.primary[0].background }}",
            "atc_bg_color_gradient": "",
            "atc_color_hover": "#ffffff",
            "atc_border_color_hover": "rgba(0,0,0,0)",
            "atc_bg_color_hover": "{{ shop.brand.colors.secondary[0].background }}",
            "atc_bg_color_gradient_hover": "",
            "bin_color": "{{ shop.brand.colors.primary[0].background }}",
            "bin_border_color": "#acacac",
            "bin_bg_color": "#ffffff",
            "bin_bg_color_gradient": "",
            "bin_color_hover": "#ffffff",
            "bin_border_color_hover": "{{ shop.brand.colors.primary[0].background }}",
            "bin_bg_color_hover": "{{ shop.brand.colors.primary[0].background }}",
            "bin_bg_color_hover_gradient": "",
            "spacing_top": 0,
            "spacing_bottom": 20
          }
4

Hey @elio ,

In Shopify themes that use JSON templates, like the Ella theme, the JSON files define the structure and sections but don’t include the HTML directly. Based on the code you shared, it looks like the dynamic checkout button is controlled by the settings under buy_buttons in the JSON file. However, adding a “Buy Now” button might require some additional customization in a different section.

To add a “Buy Now” button in a JSON-based theme, try these steps:

  1. Locate the Custom Product Page Section: Look in Sections for files like main-product.liquid or similar files that control the product page layout. If your theme only uses JSON, look for settings in the product.json file.

  2. Add a Custom Button in the Code Editor: If you find a product-related section (product.liquid, product-template.liquid, or similar), you can add an HTML button there. If you can’t locate it, look in the Snippets folder for files that render product details.

  3. Use a Custom Liquid Block If you’re in a JSON file and the theme allows Liquid blocks, you might add a custom Liquid block with your “Buy Now” button code. Here’s how it might look in JSON:

{
  "type": "button",
  "settings": {
    "text": "Buy Now",
    "link": "/checkout",
    "style": "primary"
  }
}

Note: The exact syntax may vary depending on the theme’s structure, and you may need to modify CSS to style it.

4.Alternative: Use the show_dynamic_checkout setting as a “Buy Now” button if it’s available. This typically shows a button like “Shop Pay” or other dynamic options, which can serve as a direct checkout option for users.

If you’re unable to make these changes, please feel free to email me so we can discuss this further. I’d be happy to assist

thanks