> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.ordergroove.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.ordergroove.com/_mcp/server.

# Advanced Offer Customizations & FAQ

***

## Advanced Modifications to Offers

### Radio Button / Checkbox Reset

It is possible to customize radio buttons and checkboxes, but it requires adding a `<button>` element within the components before applying styles.

```html title="HTML"
<og-optout-button>
  <button slot="default" role="radio" type="radio" class="og-optout-btn">One-time purchase</button>
</og-optout-button>

<og-optin-button>
  <button slot="default" role="radio" type="radio" class="og-optin-btn">
    Subscribe to this product
  </button>
</og-optin-button>
```

```css title="CSS"
/* Subscribe & Deliver One time button */
.og-optout-btn, .og-optin-btn {
  background: transparent;
  position: relative;
  display: inline-block;
  font-family: inherit;
  border: none;
  cursor: pointer;
}

/* Resets & styles radio buttons */
.og-optout-btn::before, .og-optin-btn::before {
  content: " ";
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
}

/* Radio button selected */
.og-optout-btn::before, og-optin-button[subscribed] > .og-optin-btn::before {
  border: 1px solid black;
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 12px blue;
  -webkit-box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 12px blue;
  -moz-box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 12px blue;
}

/* Radio button not selected */
og-optout-button[subscribed] > .og-optout-btn::before, .og-optin-btn::before {
  border: 1px solid #000;
  box-shadow: inset 0 0 0 12px white;
  -webkit-box-shadow: inset 0 0 0 12px white;
  -moz-box-shadow: inset 0 0 0 12px white;
}
```

***

### Frequency Dropdown Toggle

To hide or show the frequency selector based on whether a customer has opted into a subscription, you need to restructure the HTML so the frequency selector is an adjacent sibling of the opt-in component.

```html title="HTML"
<og-when test="regularEligible" class="og-offer"><!-- PDP Offer -->
  <div class="og-default-row">
    <og-optout-button>
      <button slot="default" role="radio" type="radio" class="og-optout-btn">One-time purchase</button>
    </og-optout-button>
  </div>

  <div class="og-optin-row">
    <div>
      <og-optin-button>
        <button slot="default" role="radio" type="radio" class="og-optin-btn">
          Subscribe to this product
        </button>
      </og-optin-button>
      <div class="og-frequency-row">
        <p class="og-shipping">ship every
          <og-select-frequency>
            <option value="1_2">1 WEEK</option>
            <option value="2_2" selected>2 WEEKS</option>
          </og-select-frequency>
        </p>
      </div>
    </div>

    <og-tooltip placement="top">
      <span slot="trigger" class="og-tooltip"><span class="og-tooltip-inner">?</span></span>
      <p slot="content" class="og-tooltip-content">
        This is our tooltip, to learn more, visit our <a href="#">FAQ page</a>.
      </p>
    </og-tooltip>
  </div>
</og-when>
```

```css title="CSS"
/* Toggles the frequency to hide/show based on radio button */
og-optin-button[subscribed] + .og-frequency-row {
  display: initial;
}

og-optin-button + .og-frequency-row {
  display: none;
}
```

***

## Frequently Asked Questions

#### How do I know which template is being used on my site?

Our system seeks to find the offer template that matches what is being called on the site from within the `location` attribute inside the `og-offer` snippet. For example:

```html
<og-offer product="44358808797284" location="pdp" os-version="2" subscribed="" frequency="4287332452">
```

If no location is specified, the system will load the Default template.

#### How can I see what location, if any, is tagged on my page?

The fastest way to determine the location tagging of an offer is to inspect the page. Highlight a section of the offer, right-click, and select **Inspect**.

#### I have a lot of templates and some are even named the same. How do I know which is being used on my site?

Our system searches for templates from oldest to newest. From the Templates section, this is essentially left to right, top to bottom.

If two templates share the same name, the site will serve up the one that appears first in this order — it is the older of the two and will be found first by our system.

#### I don't see a location specified on my PDP. What does that mean?

In these instances, the Default template will be loaded by the system.

#### I don't have a template stored in Ordergroove that matches the location I'm calling on my PDP. What does that mean?

The Default template will be loaded if the system is not able to find a match to what you're calling from the `location=""` attribute.

#### I'm having trouble targeting certain sections of the offer using CSS. What are the current styling limitations?

We've worked hard to encapsulate our offers to avoid styling or functionality collisions when integrating with your site. You'll notice that some parts of the offer exist within a `#shadow-root` element.

At this time, our developers have not yet exposed some of those elements for modification. Some clients have made customizations by creating custom code on their side and adding it to their site files outside of Ordergroove.