How to use Shopify product buy now element?

The Product Buy Now element adds a direct purchase button to your page, allowing customers to buy a product instantly. It helps reduce steps in the checkout process and improves conversion rates on product and landing pages.

I. Product Buy Now Element - Content Settings

Source

The product source is Assigned by default.

This means the button is automatically linked to the current product context:

• On a product page, it connects to that product

• No manual product selection is required on the live storefront

You can change the product in the editor for preview or testing purposes.

Custom Label

Customize the button text to match your campaign or sales message.

Examples:

• Buy now

• Add to cart

• Buy this item

• Get yours today

Clear and action-oriented labels can significantly increase clicks and sales.

II. Product Buy Now Element - Basic Settings

Element ID

Each Product Buy Now button has a unique Element ID.
You can copy this ID to apply custom styling or advanced targeting.

Alignment

Control how the button is aligned within its container:

• Align left

• Center

• Align right

• Distribute evenly

This helps the button stand out and fit your layout design.

Size (X & Y)

Adjust the button’s position on the page:

• X: Horizontal position

• Y: Vertical position

Values are set in pixels (px) for precise placement.

Width & Height

• Width: Set a fixed width or adjust to your layout needs

• Height: Control the button height for better visibility and usability

A larger button often improves click-through rates on mobile devices.

Border & Radius

Customize the button’s border and corner radius to match your brand style and design system.

Text

Adjust text styling such as font size, weight, and color to make the call-to-action more noticeable.

State

Customize the appearance of the button in different states:

• Normal

• Hover

• Active

• Disabled

This helps create a polished and interactive user experience.

Best Practices

• Place the Buy Now button near product price and key benefits

• Use strong action words in the label

• Ensure the button is clearly visible on mobile devices
  

III. Product Buy Now Element – Advanced Settings

The Advanced tab allows you to control interactions, device visibility, animations, and custom styling for your text element.

Display on

Control where the text will be visible:

• Desktop – show/hide text on desktop devices.
• Mobile – show/hide text on mobile devices.

This helps you optimize the layout for different screens (responsive design).

Animation

Bring your text to life with animation effects.

• Type: Choose an animation style (e.g., fade, slide, bounce).
• Loop: Set how many times the animation repeats.
• Duration: Adjust how long the animation lasts (in seconds).
• Delay: Add a delay before the animation starts.

Custom CSS

• Turn this on to apply your own CSS code for advanced styling.
• This is especially useful for developers or advanced users who want unique effects beyond the built-in options.

=> The Advanced tab gives users more control, interactivity, and professional effects, making the text stand out and adapt perfectly to any device.

Thanks for reading! If you have any questions, please contact us via email: support@shopone.io