Advanced Offer Customizations & FAQ

Advanced Modifications to Offers

Radio button/checkbox reset

It is possible to customize the radio buttons/checkboxes themselves but requires some added HTML before we can style. Putting a element within the components will allow us to apply styling to that.

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

/* 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 drop down toggle

To hide/show the frequency selector based on whether a customer has opted into a subscription or not also requires some reconfiguration of the HTML so that the frequency selector is an adjacent sibling of the Opt-In component.

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"><!-- og-subscription-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-subscription-row -->
</og-when> <!-- PDP Offer -->

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 will seek to find the offer template that matches what is being called on the site from within the location tag contained inside the og-offer snippet.

<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 and right-click, 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 will search for templates from Oldest to Newest created. From the Templates section this will basically be Left to Right, Top to Bottom.

So in this example, there are 2 identical templates named new-pdp. The site will serve up the template in the top right corner of this screenshot because 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 that 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=”” tag.

I’m having trouble targeting certain sections of the offer using CSS. What are the current styling limitations of styling OG hosted offers?

We’ve worked hard to encapsulate our offers to avoid styling or functionality collisions when we integrate with your site. You’ll see 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. We have had clients make customizations to those elements by creating custom code from their side and adding it to their site files outside of Ordergroove.