Creating and Managing Buy Buttons

This guide covers how to create, edit, and manage your buttons.

Creating a Product Button

  1. From the dashboard, click the "Create button" button.

  2. Select "Product" when prompted for the button type.

  3. A product selector will appear showing your Shopify products.

  4. Select the product you want to create a button for.

  5. The button editor will open with default settings applied.

  6. Give your button a meaningful name to easily identify it later.

  7. Customize the button appearance (see Customization).

  8. Click "Save" to create your button.

Creating a Collection Button

  1. From the dashboard, click the "Create button" button.

  2. Select "Collection" when prompted for the button type.

  3. A collection selector will appear showing your Shopify collections.

  4. Select the collection you want to create a button for.

  5. The button editor will open with default settings applied.

  6. Give your button a meaningful name to easily identify it later.

  7. Customize the button and collection layout (see Customization).

  8. Click "Save" to create your button.

Managing Your Buttons

Viewing All Buttons

The dashboard shows a list of all your created buttons. You can:

  • Filter buttons by type using the tabs at the top (All, Products, Collections)

  • See at a glance which buttons are active

  • View basic performance statistics for each button

Editing a Button

  1. From the dashboard, find the button you want to edit.

  2. Click on the button name to go to its detail page.

  3. On the button detail page, click "Edit button".

  4. Make your changes in the button editor.

  5. Click "Save" to update the button.

All changes to your button will be immediately applied to anywhere the button is embedded.

Button Details Page

The button details page provides:

  • A preview of how your button looks

  • Performance statistics and analytics

  • The embed code for adding the button to your website

  • Options to edit or delete the button

Activating/Deactivating Buttons

You can control whether a button is active:

  1. Navigate to the button details page.

  2. Find the status toggle (Active/Inactive).

  3. Switch the toggle to change the button's status.

When a button is inactive, it will not display on any website where it's embedded.

Duplicating a Button

To create a similar button based on an existing one:

  1. Go to the button details page.

  2. Click the "Duplicate" option.

  3. A new button editor will open with all settings copied from the original.

  4. Make any desired changes.

  5. Save as a new button with a unique name.

Deleting a Button

To permanently remove a button:

  1. Go to the button details page.

  2. Click the "Delete" button.

  3. Confirm the deletion when prompted.

Warning: Deleting a button cannot be undone, and the button will no longer function on any website where it was embedded.

Button Settings Overview

Each button has several settings categories:

  • General Settings: Button name, product/collection association

  • Button Appearance: Colors, size, text, shadows

  • Layout Settings: Product information display, alignment

  • Cart Settings: Cart appearance, checkout button styling

  • Collection Layout (Collection buttons only): Grid/carousel layout, spacing, product card styling

For detailed information about each setting, see the Customization guide.

Best Practices

  • Give buttons descriptive names that include the product or collection name

  • Test your buttons on different devices to ensure they look good at all screen sizes

  • Regularly review button analytics to optimize performance

  • Update button styles to match your website's design changes


← Back to Getting Started | Customization →

Last updated