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.

1<og-optout-button>
2  <button slot="default" role="radio" type="radio" class="og-optout-btn">One-time purchase</button>
3</og-optout-button>
4
5<og-optin-button>
6  <button slot="default" role="radio" type="radio" class="og-optin-btn">
7    Subscribe to this product
8  </button>
9</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.

1<og-when test="regularEligible" class="og-offer"><!-- PDP Offer -->
2  <div class="og-default-row">
3    <og-optout-button>
4      <button slot="default" role="radio" type="radio" class="og-optout-btn">One-time purchase</button>
5    </og-optout-button>
6  </div>
7
8  <div class="og-optin-row">
9    <div>
10      <og-optin-button>
11        <button slot="default" role="radio" type="radio" class="og-optin-btn">
12          Subscribe to this product
13        </button>
14      </og-optin-button>
15      <div class="og-frequency-row">
16        <p class="og-shipping">ship every
17          <og-select-frequency>
18            <option value="1_2">1 WEEK</option>
19            <option value="2_2" selected>2 WEEKS</option>
20          </og-select-frequency>
21        </p>
22      </div>
23    </div>
24
25    <og-tooltip placement="top">
26      <span slot="trigger" class="og-tooltip"><span class="og-tooltip-inner">?</span></span>
27      <p slot="content" class="og-tooltip-content">
28        This is our tooltip, to learn more, visit our <a href="#">FAQ page</a>.
29      </p>
30    </og-tooltip>
31  </div>
32</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:

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

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.

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.

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.