To embed the BeatStars or Airbit player directly within the Liquid code of your Shopify theme using the live editor, follow these steps:

Step 1: Access the Live Editor

1. Log in to your Shopify admin panel.
2. In the left sidebar, go to “Online Store” and select “Themes.”
3. Under the “Live theme” section, click on the “Customize” button to open the live editor.

Step 2: Add a New Section

In the live editor, you’ll need to create a new custom section to hold your BeatStars or Airbit player. Here’s how:

1. On the left-hand menu, click on “Sections.”
2. In the Sections panel, click “Add section.”
3. Give your new section a name (e.g., “Beat Player”).

Step 3: Add the Embed Code

Within the newly created section, you can add the embed code for the BeatStars or Airbit player. Here’s an example of how to structure the code:

liquid

<div id="beats" style="text-align:center;"> <iframe src="https://player.beatstars.com/?storeId=143098" width="100%" height="500" style="max-width:1224px;"></iframe> </div>

Ensure you adjust the width, height, and other styles to match your preferred dimensions and styling.

Step 4: Place the Custom Section

After adding the code to your custom section, you need to place this section where you want the player to appear on your store’s pages. Follow these steps:

1. In the live editor, go to the page where you want to add the BeatStars or Airbit player.
2. Within the page editor, look for the “Add section” button or a similar option. This allows you to insert the custom section you created earlier.
3. Select the “Beat Player” (or the name you gave your custom section) from the list of available sections.

Step 5: Save and Preview

After placing the custom section, save your changes. You can then preview your page to see how the BeatStars or Airbit player appears within your content.

Step 6: Publish Your Changes

Once you’re satisfied with the placement and appearance of the player, click the “Publish” button in the live editor to make your changes live on your Shopify store.

Now, the BeatStars or Airbit player is embedded within your Shopify theme using the live editor, allowing you to see the changes in real-time and customize the player’s location within your store’s pages.