> ## Documentation Index
> Fetch the complete documentation index at: https://docs.paysight.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkout Code Blocks

> Custom HTML, CSS, and JavaScript injected into checkout.

Checkout Code Blocks lets approved custom HTML, CSS, and JavaScript render in specific areas of hosted checkout.

<Info>
  Find this module in **Shopify Stores** > **Edit Checkout** > **Advanced**.
</Info>

<Warning>
  Custom JavaScript runs on checkout and can interact with page content. Only add code that has been reviewed and approved.
</Warning>

## How it works

Use this module only for reviewed snippets that cannot be configured through normal modules. Each placement has its own enabled switch and editor.

## Settings reference

<AccordionGroup>
  <Accordion title="Replace header">
    **You will set:** Placement editor

    Replaces the standard checkout header when enabled.
  </Accordion>

  <Accordion title="Before express checkout">
    **You will set:** Placement editor

    Renders custom content above express checkout buttons.
  </Accordion>

  <Accordion title="Before cart">
    **You will set:** Placement editor

    Renders custom content in the order summary column before the cart.
  </Accordion>

  <Accordion title="After cart">
    **You will set:** Placement editor

    Renders custom content in the order summary column after the cart.
  </Accordion>

  <Accordion title="After payment button">
    **You will set:** Placement editor

    Renders custom content below the payment button.
  </Accordion>

  <Accordion title="After order confirmed">
    **You will set:** Placement editor

    Renders custom content on the thank-you page after the confirmation block.
  </Accordion>

  <Accordion title="End of body">
    **You will set:** Placement editor

    Mounts custom content at the end of the checkout body after page load.
  </Accordion>

  <Accordion title="Enable placement">
    **You will set:** On/off switch

    Turns a placement on or off. You can save code while disabled for review.
  </Accordion>

  <Accordion title="Code editor">
    **You will set:** Code editor

    The HTML editor for the selected placement. It can include HTML, style, and script tags when approved.
  </Accordion>
</AccordionGroup>

## Examples

<Tabs>
  <Tab title="Trust badge below pay">
    Use After payment button for a small reviewed trust badge or reassurance snippet.
  </Tab>

  <Tab title="Custom thank-you content">
    Use After order confirmed for post-purchase instructions or campaign-specific confirmation copy.
  </Tab>

  <Tab title="Tracking snippet review">
    Prefer Pixels, GTM Events, or Attribution for tracking. Use Checkout Code Blocks only when the script cannot be represented by those modules and has been reviewed.
  </Tab>
</Tabs>

## Before saving

* Review code before enabling it.
* Keep snippets small and placement-specific.
* Preview checkout after every code change.
* Do not duplicate pixels or analytics already configured elsewhere.

## Related modules

<CardGroup cols={2}>
  <Card title="Pixels" icon="arrow-right" href="/guides/shopify-store-editor/pixels">
    Manage conversion pixels, URL matching, default behavior, and event filters.
  </Card>

  <Card title="GTM Events" icon="arrow-right" href="/guides/shopify-store-editor/gtm-events">
    Configure GTM container IDs, standard dataLayer events, and custom page-load events.
  </Card>

  <Card title="Attribution" icon="arrow-right" href="/guides/shopify-store-editor/attribution">
    Configure Hyros and WeTracked attribution scripts.
  </Card>
</CardGroup>