Quick Views

Add Shopify Quick View on Product Cards.

  1. Shopify Liquid based Quick Views can be easily integrated with Frenzy Product Cards.

  2. Save your Quick View in a Product based Shopify template file like product.quick_view.liquid.

  3. Update the Frenzy Product Card and add a button/link to this Quick View.

  4. Add an event call back function to open the Quick View (like product_url?view=quick_view), when the Quick View Button is selected. This will render the Shopify Quick View when the Button is Clicked.

  5. Incase you do not have a Quick View, reach out to Frenzy Support for smart Quick View integrated with Analytics Dashboard.

  6. In case you find any issues during the integration, feel free to reach out to Frenzy Support.

Below is an Example for setting up Quick Views on Frenzy AI Product Cards

Step 1 - Setting up Quick View button on Product Card

Button Activation for Quick View on Product Card

This button activates the Quick View on the Product Card. For setting up test product cards without impacting production, refer to the Testing Product Card guidelines.

<button class="frenzy_mobile-popup frenzy_quickView_btn" onclick="frenzyQuickView(this)" data-handle="[[product_handle]]"><svg width="16" height="16" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" data-acsb-hidden="true"><circle class="text-white lg:hover:text-black transition-all duration-300" cx="7.5" cy="7.5" r="7.25" stroke="black" fill="currentColor" stroke-width="0.5"></circle><path class="pointer-events-none" d="M7.43242 4.7998H8.06842V7.4998H10.7684V8.13581H8.06842V10.8358H7.43242V8.13581H4.73242V7.4998H7.43242V4.7998Z" fill="currentColor"></path></svg></button>

  • frenzy_quickView_btn - class is used to show/hide the quick view button.

  • onclick="frenzyQuickView(this)" - is used to open the quick view popup on button click event.

  • onclick="frenzyQuickView(this)" - is used to open the quick view popup on button click event.

  • data-handle - is used to pass the product handle to get the template data.

  • Add button in frenzy portal

Step 2 - Create Template file

  • Create a template file named product.frenzy-quickview and add the following code to display the Quick View Modal.

  • This code displays all available options for a product on the Quick View.

  • For stores using additional logic to connect different products, update the code as needed. 

{% layout none %}
<div class="frenzy-modal">
 <script  type="application/ld+json" id="frenzy_procut_feed_data">
   {{ product | json }}
 </script>
 <div class="frenzy-modal-backdrop frenzyModalCloseTrigger"></div>
 <div class="frenzy-modal-dialog">
   <div class="frenzy-modal-content">
     <button type="button" class="frenzy-modal-close frenzyModalCloseTrigger"><svg viewBox="0 0 20 20"><path d="m11.414 10 4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"></path></svg></button> 
     <div class="frenzy-modal-right-column">
       <div class="frenzy-middle-container">       
         {% assign seletedVariant = product.selected_or_first_available_variant.title | split:' / ' %}
         <div class="frenzy-option-selectors">              
           {% for option in product.options %}
             {% assign option_index = forloop.index0 %}             
             <fieldset class="frenzy-option-fieldset frenzy-option-{{ option | handle }}" data-frenzy-option="{{ option_index }}">
               <legend class="frenzy-option-label">{{ option }}</legend>
               <ul class="frenzy-option-selector-btns">
                 {% assign values = '' %}
                 {% for variant in product.variants %}
                 {% assign value = variant.options[option_index] %}
                 {% unless values contains value %}
                 {% assign values = values | join: ',' %}
                 {% assign values = values | append: ',' | append: value %}
                 {% assign values = values | split: ',' %}            
                 <li>
                   <input class="frenzy-osb-input" type="radio" {% if seletedVariant[option_index] ==  value %}checked{% endif %} data-option="{{ option_index }}" name="frenzy-selector-{{ option_index }}" id="frenzy-selector-{{ option | handle }}-value-{{ value | handle }}" value="{{ value }}" {% unless variant.available %}disabled{% endunless %}>
                   <label class="frenzy-osb-label" data-swatch="{{ value }}" for="frenzy-selector-{{ option | handle }}-value-{{ value | handle }}">
                     <span class="opt-label__text">{{ value }}</span>
                   </label>
                 </li>
                 {% endunless %}
                 {% endfor %}             
               </ul>
             </fieldset>
           {% endfor %}
         </div>
         <div class="frenzy-payment-buttons">
           <button type="submit" class="frenzyQuickViewAddToCart" data-product_id="{{ product.id }}" {% unless product.selected_or_first_available_variant.available %}disabled{% endunless %} data-id="{{ product.selected_or_first_available_variant.id }}" >{% if product.selected_or_first_available_variant.available %}Add to cart{% else %}Out of Stock{% endif %}</button>
         </div>
       </div>
     </div>
   </div>
 </div>
</div>

  • frenzyModalCloseTrigger class is used to close the popup modal.

  • For Body Click Event-

    • <div class="frenzy-modal-backdrop frenzyModalCloseTrigger"></div>

  • frenzy-osb-input class is used for variant change events.

  • frenzy-osb-input class and data-option attribute is mandatory on input tag for variant change event.

  • frenzyQuickViewAddToCart class is used to call event API.

  • Passing the data-id attribute is mandatory for adding the product to the cart, and it is the first available variant ID that gets passed.

Step 3 - Add css in frenzy-css.css file

Copy this CSS to your theme to add basic styles. Customize the styling to suit your store's needs.

@media(max-width: 767px){
 .frenzy_grid .frenzy_product_item figure .frenzy_mobile-popup.frenzy_quickView_btn {
     display: block;
     bottom: 10px;
     right: 10px;
     left: auto;
     background: transparent;
     z-index: 9;
     padding: 0;
 }
 .frenzy_mobile-popup svg path {
     color: #000;
 }
 .frenzy-modal-dialog {a
     top: auto;
     bottom: 0;
     transform: none;
     left: 0;
     right: 0;
     max-width: 100%;
     border-radius: 0;
     min-height: auto;
 }
 .frenzy-option-fieldset .frenzy-osb-input:disabled+label {
   opacity: .5;
   border: 1px solid rgba(28, 28, 28, .2);
   pointer-events: none;
 }
 .frenzy-option-fieldset .frenzy-osb-input:disabled+label:before {
   display: block;
   content: "";
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   transform: rotate(-45deg);
   border-left: solid 1px #1c1c1c;
 }
}

PreviousWishlist IconsNextSwatches

Last updated

Was this helpful?