Skip to navigation
The Subscription LifecycleEnrollmentAdvanced Enrollment

Advanced Offer Customizations & FAQ

Custom HTML and CSS patterns for offer components, plus answers to common template questions
View as Markdown

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.

<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>

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.

A customized storefront offer under the banner The Subscription Event: 25% off forever, with the one-time purchase option selected at $188.00 and the Subscribe + Save: 25% option unselected at $141.00. No frequency dropdown is visible. The same offer after opting in: Subscribe + Save: 25% is selected at $141.00, and a Deliver Every dropdown set to 6 weeks = 1 product duration appears below it, followed by a See all perks + benefits link. One-Time Purchase at $188.00 is unselected. 
<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>

Frequently Asked Questions

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:

<og-offer product="44358808797284" location="pdp" os-version="2" subscribed="" frequency="4287332452">
Browser DevTools on a Shopify storefront juice product page. The offer is outlined in red, with a red line to the og-offer element in the Elements panel, where its location attribute, pdp, is outlined.

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

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.

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

The Subscription enrollment page in RC3, showing four offer template cards in order: Default, cart, radio and radio-1. Each card lists its Name and Location, and the Location of radio and radio-1, both new-pdp, is outlined in blue.

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.

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

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.

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.

Browser DevTools Elements panel with the og-offer element expanded to show nested og-when elements and #shadow-root (open) nodes, one of them selected, alongside slots and divs such as og-option__wrapper and og-frequency__wrapper.

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.