Add Preview tabs for Manual installation

Overview:

Completing the manual installation does not include the buttons to swap between the live preview, and the original product photo slider. The tutorial below will assist in adding this code.

Please keep in mind that this is an advanced Javascript/Html/Liquid tutorial and may require knowledge of all 3 to accomplish.

---

Step 1: Paste The Code - Theme.liquid

Insert the following snippet just before the closing </body> tag inside of your theme.liquid file.

<script type="text/javascript">
    $(function() { 
        $(".po-customizer-tabs a").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            var a = $(this);
            var href = a.attr("href");
            $(".po-customizer-tabs a").removeClass("tab-active");
            a.addClass("tab-active");

            if (href == "#tab-1") {
                $(".live-preview-tab").show();
                $(".existing-slider").hide();
            } else {
                $(".live-preview-tab").hide();
                $(".existing-slider").show();
            }
            $(window).trigger('resize'); 
            window.dispatchEvent(new Event('resize'));
        });
      }); 
</script> 

---

 

Step 2: Add The Buttons/Product Tag Snippet

Insert the following liquid tag at the top of your product template file. This snippet will take the tags on your product, and save them to a variable that we will be able to reference in just a moment. That way, the buttons will only show on the products you intend to have the image customizer on.
(This should have been completed already when you did the manual installation.)

{% assign productTags = product.tags | join:',' %}

Now that we have the Product tags saved to a variable, we are going to replace the Customizer snippet that was added during the manual installation. Navigate to where you placed the snippet, and delete the If productTags all the way through to the Else. Then scroll down to where you pasted the EndIF tag, and remove that as well.

Then, paste the following snippet where you previously had the If productTags code that you just removed.

{% if productTags contains 'W3-Product-Customizer' %}
 <div class="po-customizer-tab-wrapper">
     <div class="po-customizer-tabs">
         <a href="#tab-1" class="po-customizer-tab-1"><img src="https://productoptions.w3apps.co/images/live-preview.svg"><span>Live Preview</span></a>
         <a href="#tab-2" class="po-customizer-tab-2 tab-active"><img src="https://productoptions.w3apps.co/images/photos.svg"><span>Product Photos</span></a>
     </div>
     <div class="po-customizer-tab-content">
         <div class="live-preview-tab" style="display:none;">
             <div class="product-options-image-customizer" data-product-id="{{ product.id }}"></div>
         </div>
     </div>
 </div>
{% endif %}

---

Step 3: Add Class to Image Slider

We will need to add a class of "existing-slider" to the current product photo slider. Find the Gallery Wrap div and simply add the text existing-slider inside of the class attribute.

---

Step 4: Add CSS to Stylesheet

Next, we will want to add the following styles to the very bottom of your stylesheet to ensure that the buttons are styled properly.

If you are not sure how to find the stylesheet, please refer to the following tutorial:
https://w3trends.zendesk.com/hc/en-us/articles/115003516432-How-do-I-find-my-Stylesheet-

/*---W3Trends Image Customizer Buttons---*/

.po-customizer-tab-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    text-align: center;
}
.po-customizer-tab-wrapper a {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 25px;
    margin-right: 5px;
    color: #fff;
    background-color: #888;
    text-decoration: none !important;
    font-size: 18px;
    line-height: 1.0 !important;
    position: static !important;
    top: initial !important;
    left: initial !important;
    width: auto !important;
}
.po-customizer-tab-wrapper a img {
    float: left;
    width: 20px !important;
    filter: invert(100%);
    background: none !important;
    position: static !important;
    top: initial !important;
    left: initial !important;
}

.po-customizer-tab-wrapper a.tab-active {
    color: #fff;
    background-color: #1c2a67;
}
.po-customizer-tab-wrapper a.tab-active:hover span {
    color: #fff;
}
.po-customizer-tab-wrapper a:hover span{
	color:#555;
}
.po-customizer-tab-wrapper a:last-child {
    margin-right: 0px;
}
.po-customizer-tab-wrapper a.tab-active img {
    filter: invert(100%);
}
.po-customizer-tab-wrapper a span {
    margin-left: 5px;
  	color: #fff;
}