Shopify How to Add Raw Code – Easy step by step guide

Shopify Page Editor can be used to add raw code directly in the Shopify Admin. This is used app embed code like Track order app code etc.Follow these steps to add raw code using the Shopify Page Editor. You can also review Shopify’s official guide on editing online store pages for more insights.

Follow these steps to add raw code using page

Step 1: Navigate to Shopify Admin > Online Store

Step 2:  Navigate to the pages and click on it.

Step 3: Open the pre-existing page or create a new one by clicking on this Add Page button.

Step 4: Make the page visible so that you can see that on the store front or link them with the buttons using customizer.

Step 5: Click on the </> button to add the custom raw code.

Step 6: Add this code in the area for example use this.

  
    <div class="custom-raw-code">
        <p>This is my raw HTML code!</p>
        <script>
            console.log("This is raw JS inside a section.");
        </script>
    </div>
  

Step 7: Click Save.

Step 8: Click on the View Button to see how it will look on the storefront.

Also Read:  Shopify High-Risk Payment Processors for Secure Sales

Method 3: Add Raw code using custom liquid section

We’ve used this technique in client projects where they needed unique checkout experiences, similar to what we discuss in our blog about dynamic checkout button customization. Our Shopify plus experts can set this up so it works seamlessly with your theme. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Follow these steps to add raw code using Custom section

Step 1: Navigate to Online Store > Themes > Edit code

Step 2: Navigate to the sections part and create a new section called something like custom-raw-section.liquid

Step 3: Click on this icon to create a new file and add .liquid after the file name (eg, custom-raw-section.liquid).

Step 4: Add custom code into section for example add this

  
    <div class="custom-raw-code">
        <p>This is my raw HTML code!</p>
        <script>
            console.log("This is raw JS inside a section.");
        </script>
    </div>
  

Step 5: Click Save.

Step 6: Click on the View Button to see how it will look on the storefront.

Method 4: Add Raw code directly in Template

If you are a developer or comfortable with code and want to place the raw code in your desired area of the website like in the product page or cart page.If you want to add custom code directly in your template like Product Page or Cart Page you can follow these steps.

Step 1: Navigate to the Online Store > Themes > Edit code 

Step 2: Go to the template or section file like product.liquid, main-cart.liquid.

Step 3: Add the code in your desired location for example add this code where needed.

  
    <div class="my-custom-message">
        <h2>Thank you for visiting!</h2>
        <script>
            alert("Welcome to our store!");
        </script>
    </div>
  

Step 4: Click Save or Press CTRL + F for Windows or Command + F for Mac to save the changes. 

Method 5: Add Raw code Using Shopify Apps Embed Code

There are many Shopify apps that offer embed code snippets for Advanced placement of widgets like Product Reviews. This snippet can include HTML, CSS , Javascript etc. you can place this code directly into your desired template like product.liquid or you can use Shopify Theme Editor OS 2.0 to directly add code into the Theme editor. Here is the final result, check the GIF below to see how it will look before we go through the steps.

Use Code Directly in Template 

Step 1: Navigate to the Online Store > Themes > Edit code 

Step 2: Go to the template or section file like product.liquid.

Step 3: Add the code in your desired location for example add this code where needed.

  
    <div id="judgeme_product_reviews" class="jdgm-widget jdgm-review-widget" data-id="{{ product.id }}">
        {{ product.metafields.judgeme.widget }}
    </div>
  

Step 4: Click Save or Press CTRL + F for Windows or Command + F for Mac to save the changes. 

Use OS 2.0 Custom HTML block

Step 1: Navigate to Online Store > Themes > Customize

Step 2: Navigate to the page where you want to add App embed code like product page, cart page or any other page which supports OS 2.0 features.

Step 3: Click on the Add Section button.

Step 4: Search for the section named like custom liquid or custom HTML depending on the theme and add it to the page.

Step 5:  Click on the section added and open its settings.

Step 6: Add your App embed code here and click Save.

Step 7: Visit your Online store to see the changes.

Conclusion

Whether you want to insert a tracking pixel, embed a third-party widget, or add interactive elements, adding raw code in Shopify gives you the flexibility to fully customize your store. Depending on your theme and skill level, you can choose from several approaches ranging from adding raw code in pages to using app embed codes via the Shopify Theme Editor.

Need help adding custom code to your Shopify store? Contact Ecomx Agency today and we will help you integrate advanced features without breaking the design.