Show Featured Image instead of first variant image on page load

Shopify Partner
1 0 0

Hi, I want to show featured/main image instead of first variant image on page load on product page. I am using Shoptimized theme. I tried many solutions but did not work for me. Below is the product.liquid code. Please help.Thanks.

 

{% assign view_size_chart = false %}
{% assign display_countdown = false %}
{% assign display_limited = false %}
{% assign display_limited = false %}
{% assign custom_tabs = false %}
{% assign upsell_enable = false %}
{% assign quantity = 100 %}
{% assign qty_sold = 0 %}
{% assign expire = 72 %}
{% assign startdate = product.published_at | date: "%m/%d/%Y %H:%M:%S" %}
{% assign checklist = "" %}
{% assign personalisation_string = "" %}
{% assign size_chart_page = settings.sizing_chart_page %}
{% for tag in product.tags %}
  {% if tag == "view-size-chart" %}{% assign view_size_chart = true %}{% endif %}
  {% if tag == "display-countdown" %}{% assign display_countdown = true %}{% endif %}
  {% if tag == "display-limited" %}{% assign display_limited = true %}{% endif %}
  {% if tag == "custom-tabs" %}{% assign custom_tabs = true %}{% endif %}
  {% if tag == "upsell-enable" %}{% assign upsell_enable = true %}{% endif %}
  {% if tag contains "quantity-" %}{% capture quantity %}{{ tag | replace: "quantity-","" }}{% endcapture %}{% endif %}
  {% if tag contains "quantitysold-" %}{% capture qty_sold %}{{ tag | replace: "quantitysold-","" }}{% endcapture %}{% endif %}
  {% if tag contains "limited-default-" %}{% capture limited_default %}{{ tag | replace: "limited-default-","" }}{% endcapture %}{% endif %}
  {% if tag contains "expire-" %}{% capture expire %}{{ tag | replace: "expire-","" }}{% endcapture %}{% endif %}
  {% if tag contains "checklist-" %}{% capture checklist %}{% if checklist == "" %}{{ tag | replace: "checklist-","" }}{% else %}{{ checklist }}|||{{ tag | replace: "checklist-","" }}{% endif %}{% endcapture %}{% endif %}
  {% if tag contains "personalisation-" %}{% capture personalisation_string %}{% if personalisation_string == "" %}{{ tag | replace: "personalisation-","" }}{% else %}{{ personalisation_string }}|||{{ tag | replace: "personalisation-","" }}{% endif %}{% endcapture %}{% endif %}
  {% if tag contains "personalization-" %}{% capture personalisation_string %}{% if personalisation_string == "" %}{{ tag | replace: "personalization-","" }}{% else %}{{ personalisation_string }}|||{{ tag | replace: "personalization-","" }}{% endif %}{% endcapture %}{% endif %}
  {% if tag contains "sizechart-" %}{% capture size_chart_page %}{{ tag | replace: "sizechart-","" }}{% endcapture %}{% endif %}
{% endfor %}
<div class="wrapper">
  <div itemscope itemtype="http://schema.org/Product">
    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
    <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
    {% assign current_variant = product.selected_or_first_available_variant %}
    {% include 'breadcrumb' %}
    <div class="grid product-single">
      <div class="grid__item large--two-fifths text-center product--images">
        <div class="product-single__photos">
          <ul class="bxslider" id="bxslider-id-{{ product.id }}">
            {% assign i = 0 %}
            {% for image in product.images %}
              {% unless image.alt contains "facebook-meta" %}
                <li>
                  {% if settings.video_embading %}
                  	{% if image.alt contains "youtube" or image.alt contains "vimeo" %}
                      <a data-index-slide="{{ i }}" class="fancybox fancybox.iframe" data-fancybox-group="product-gallery" href="{{ image.alt | escape }}">
                    {% else %}
                      <a data-index-slide="{{ i }}" class="fancybox" data-fancybox-group="product-gallery" href="{{ image | product_img_url: '1024x1024' }}">
                    {% endif %}
                  {% else %}
                    <a data-index-slide="{{ i }}" class="fancybox" data-fancybox-group="product-gallery" href="{{ image | product_img_url: '1024x1024' }}">
                  {% endif %}
                  <img class="magniflier" src="{{ image | product_img_url: 'large' }}" data-large="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" />
                  {% if settings.video_embading %}
                    {% if image.alt contains "youtube" or image.alt contains "vimeo" %}
                      </a>
                    {% else %}
                      </a>
                    {% endif %}
                  {% else %}
                    </a>
                  {% endif %}
                </li>
              {% assign i = i | plus: 1 %}
              {% endunless %}
            {% endfor %}
          </ul>
        </div>
        
        <ul id="bx-pager-{{ product.id }}" data-product="{{ product.id }}" class="product-single__thumbnails bx-pager">
          {% assign i = 0 %}
          {% for image in product.images %}
            {% unless image.alt contains "facebook-meta" %}
              <li>
                {% if settings.video_embading %}
                  {% if image.alt contains "youtube" or image.alt contains "vimeo" %}
                    <span class="open-video-this fancybox fancybox.iframe fancyboxmobile" href="{{ image.alt | escape }}"></span>
                    <a data-slide-index="{{ i }}" class="product-single__thumbnail" class="slide" href=""><img src="{{ image | product_img_url: 'small' }}" data-ver="{{ image | product_img_url: 'small' | split:'?' | first }}" alt="Image of {{ image.alt | escape }}" /></a>
                  {% else %}
                    <a data-slide-index="{{ i }}" class="product-single__thumbnail" href=""><img src="{{ image | product_img_url: 'small' }}" data-ver="{{ image | product_img_url: 'small' | split:'?' | first }}" alt="Image of {{ image.alt | escape }}" /></a>
                  {% endif %}
                {% else %}
                  <a data-slide-index="{{ i }}" class="product-single__thumbnail" href=""><img src="{{ image | product_img_url: 'small' }}" data-ver="{{ image | product_img_url: 'small' | split:'?' | first }}" alt="Image of {{ image.alt | escape }}" /></a>
                {% endif %}
              </li>
              {% assign i = i | plus: 1 %}
            {% endunless %}
          {% endfor %}
        </ul>
        
        {% if settings.social_sharing_blog or settings.social_sharing_products %}
          {% include 'social-sharing' %}
        {% endif %}
      </div>

      <div class="grid__item large--three-fifths">
        <h1 itemprop="name">{{ product.title }}</h1>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}" />
          <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm--{{ product.id }}" class="form-vertical">
            <div class="grid product--option price">
              <div class="grid__item large--one-whole price--inner">
              	<div class="header">{{ 'products.general.sale_price' | t }}</div>
                {% include 'product-price' %}
                {% if settings.enable_checklist %}
                  {% if checklist != "" %}
                	{% assign checklist = checklist | split: '|||' %}
                	<ul class="check-list">
                      {% for checklistline in checklist %}
                      	<li class="check-list--item"><i class="check-list--item-li fa fa-check"></i> {{ checklistline }}</li>
                      {% endfor %}
                	</ul>
                  {% endif %}
                {% endif %}
              </div>
            </div>
            
            <select name="id" id="productSelect--{{ product.id }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option data-image="{{ variant.image | product_img_url: 'small' | split:'?' | first }}" data-option1="{{ variant.option1 | escape }}" data-option2="{{ variant.option2 | escape }}" data-option3="{{ variant.option3 | escape }}" {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                {% else %}
                  <option data-image="{{ variant.image | product_img_url: 'small' | split:'?' | first }}" disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>

            {% if settings.variant_swatch %}
              {% if product.available and product.variants.size > 1 %}
                {% for option in product.options %}
                  {% include 'swatch' with option %}
                  {% assign option_index = 0 %}
                  {% for variant in product.variants %}
                    {% assign value = variant.options[option_index] %}
                    {% if variant.available %}
                      <script>
                        jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
                        jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').find('.tooltip').remove();
                      </script>
                    {% endif %}
                  {% endfor %}
                {% endfor %}
              {% endif %}
            {% else %}
              {% if settings.display_sizing_chart %}
                {% if view_size_chart %}
                  <div class="sizing-div">
                    <a href="#" class="sizing" data-toggle="modal" data-target="#size-chart">{{ 'products.general.sizing' | t }}</a>
                  </div>
                {% endif %}
              {% endif %}
            {% endif %}
            
            {% if settings.product_personalisation %}
              {% assign personalisation_string = personalisation_string | split: '|||' %}
              {% for personalisation_word in personalisation_string %}
                {% assign personalisation_word_array = personalisation_word | split: '-' %}
                {% assign personalisation_word_name = personalisation_word_array | first %}
                {% assign personalisation_word_limit = personalisation_word_array | last %}
                <div class="product_properties">
                  <label for="{{ personalisation_word_name }}">{{ personalisation_word_name | replace: '_', ' ' | capitalize }}*</label>
                  {% if personalisation_word_name == personalisation_word_limit %}
                  <input required type="text" class="form-control" id="{{ personalisation_word_name }}" placeholder="Enter your {{ personalisation_word_name | replace: '_', ' ' | downcase }} here" name="properties[{{ personalisation_word_name | replace: '_', ' ' | capitalize }}]" data-error="Please enter a {{ personalisation_word_name | replace: '_', ' ' | downcase }}.">
                  {% else %}
                  <input required data-charlimit="{{ personalisation_word_limit }}" type="text" class="form-control" id="{{ personalisation_word_name }}" placeholder="Enter your {{ personalisation_word_name | replace: '_', ' ' | downcase }} here" name="properties[{{ personalisation_word_name | replace: '_', ' ' | capitalize }}]" data-error="Please enter a {{ personalisation_word_name | replace: '_', ' ' | downcase }}.">
                  <e>Max {{ personalisation_word_limit }} characters.</e>
                  <span class="error-limit" style="display: none;"></span>
                  {% endif %}
                </div>
              {% endfor %}
            {% endif %}

            <div class="grid product--option addtocart--button">
              {% if settings.display_quantity_dropdown %}
              <div class="grid__item large--one-half small-width">
              	<div class="header">
                  {{ 'products.product.quantity' | t }}
                </div>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector" />
              </div>
              {% else %}
              	<input type="hidden" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector" />
              {% endif %}
              <div class="grid__item large--one-half {% if settings.display_quantity_dropdown %}no--padding{% endif %} mobile-full">
                <div class="header ">&nbsp;</div>
                {% if settings.cart_button_fullwidth == false %}
                  <button type="submit" name="add" id="AddToCart" class="btn AddToCart">
                    {% if settings.enable_checkout_icon %}
                    <img src="{{ 'cart-button-icon.png' | asset_url }}" alt="+" class="no-border normal-img addIcon" />
                    {% if settings.enable_retina_images %}
                      <img src="{{ 'cart-button-iconx2.png' | asset_url }}" alt="+" class="no-border ratinax2-img addIcon" />
                      <img src="{{ 'cart-button-iconx3.png' | asset_url }}" alt="+" class="no-border ratinax3-img addIcon" />
                    {% endif %}
                    
                  {% endif %}
                    {% if settings.add_to_cart_button_text != "" %}
                      <span id="AddToCartText">{{ settings.add_to_cart_button_text }}</span>
                    {% else %}
                      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
                    {% endif %}
                  </button>
                  {% if settings.enable_checkout_icon %}
                  <div class="grid__item large--one-whole checkout--icons-product medium-down--hide">
                    <img alt="Checkout Secure" src="{{ 'checkout_icon.png' | asset_url }}" class="no-border normal-img checkout-img" />
                    {% if settings.enable_retina_images %}
                      <img src="{{ 'checkout_iconx2.png' | asset_url }}" alt="Checkout Secure" class="no-border ratinax2-img addIcon checkout-img" />
                      <img src="{{ 'checkout_iconx3.png' | asset_url }}" alt="Checkout Secure" class="no-border ratinax3-img addIcon checkout-img" />
                    {% endif %}
                  </div>
                  {% endif %}
                {% endif %}
              </div>
              {% if settings.cart_button_fullwidth == false %}
                {% if settings.enable_checkout_icon %}
                <div class="grid__item large--one-whole checkout--icons-product large--hide">
                  <img alt="Checkout Secure" src="{{ 'checkout_icon.png' | asset_url }}" class="no-border normal-img checkout-img" />
                  {% if settings.enable_retina_images %}
                    <img src="{{ 'checkout_iconx2.png' | asset_url }}" alt="Checkout Secure" class="no-border ratinax2-img addIcon checkout-img" />
                    <img src="{{ 'checkout_iconx3.png' | asset_url }}" alt="Checkout Secure" class="no-border ratinax3-img addIcon checkout-img" />
                  {% endif %}
                </div>
                {% endif %}
              {% endif %}
              {% if settings.cart_button_fullwidth %}
              <div class="grid__item large--one-whole full--width-button">
                <button type="submit" name="add" id="AddToCart" class="btn AddToCart">
                  <img src="{{ 'cart-button-icon.png' | asset_url }}" alt="+" class="no-border normal-img addIcon" />
                  {% if settings.enable_retina_images %}
                    <img src="{{ 'cart-button-iconx2.png' | asset_url }}" alt="+" class="no-border ratinax2-img addIcon" />
                    <img src="{{ 'cart-button-iconx3.png' | asset_url }}" alt="+" class="no-border ratinax3-img addIcon" />
                  {% endif %}
                  {% if settings.add_to_cart_button_text != "" %}
                  	<span id="AddToCartText">{{ settings.add_to_cart_button_text }}</span>
                  {% else %}
                  	<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
                  {% endif %}
                </button>
                 {% if settings.enable_checkout_icon %}
                  <div class="grid__item large--one-whole checkout--icons-product full--width-button">
                    <img alt="Checkout Secure" src="{{ 'checkout_icon.png' | asset_url }}" class="no-border normal-img checkout-img" />
                    {% if settings.enable_retina_images %}
                      <img src="{{ 'checkout_iconx2.png' | asset_url }}" alt="Checkout Secure" class="no-border ratinax2-img addIcon checkout-img" />
                      <img src="{{ 'checkout_iconx3.png' | asset_url }}" alt="Checkout Secure" class="no-border ratinax3-img addIcon checkout-img" />
                    {% endif %}
                  </div>
                {% endif %}
              </div>
              {% endif %}
            </div>
          </form>
          {% if settings.enable_product_progressbar %}
            <div class="grid">
              <div class="grid__item large--one-half progress--bar">
                {% if settings.enable_progressbar_text %}
               		<div class="header">{{ settings.enable_progressbar_text_value }}</div>                 
              	{% endif %}
                {% assign inventory_quantity = 0 %}
                {% for variant in product.variants %}
                  {% capture inventory_quantity %}
                    {{ inventory_quantity | plus: variant.inventory_quantity }}
                  {% endcapture %}
                {% endfor %}
                {% if quantity == 0 %}
                  {% assign quantity = 100 %}
                {% else %}	
                  {% assign quantity = quantity | times: 1 %}
                {% endif %}
                {% if qty_sold == 0 %}
                  {% assign defaultSold = quantity | times: 80 | divided_by: 100 %}
                  {% assign totalSold = inventory_quantity | plus: defaultSold %}
                  {% if totalSold >= quantity %}
                    {% assign defaultSold = quantity | times: 60 | divided_by: 100 %}
                    {% assign totalSold = inventory_quantity | plus: defaultSold %}
                    {% if totalSold >= quantity %}
                      {% assign defaultSold = quantity | times: 40 | divided_by: 100 %}
                      {% assign totalSold = inventory_quantity | plus: defaultSold %}
                      {% if totalSold >= quantity %}
                        {% assign defaultSold = quantity | times: 20 | divided_by: 100 %}
                        {% assign totalSold = inventory_quantity | plus: defaultSold %}
                        {% if totalSold >= quantity %}
                          {% assign totalSold = inventory_quantity | times: 1 %}
                          {% if totalSold >= quantity %}
                            {% assign lastTwo = totalSold | slice: -2, 2 %}
                            {% assign remaining = totalSold | replace: lastTwo, '' %}
                            {% if lastTwo != '00' %}
                              {% assign remaining = remaining | plus: 1 %}
                              {% assign remaining = remaining | append: '00' %}
                              {% assign quantity = remaining | times: 1 %}
                            {% else %}	
                              {% assign quantity = quantity | plus: totalSold | times: 1 %}
                            {% endif %}
                          {% endif %}
                        {% endif %}
                      {% endif %}
                    {% endif %}
                  {% endif %}
                {% else %}
                  {% assign defaultSold = qty_sold | times: 1 %}
                  {% if settings.display_quantity_count_real %}
                    {% assign totalSold = inventory_quantity | plus: defaultSold %}
                  {% else %}	
                    {% assign totalSold = defaultSold %}
                  {% endif %}
                  {% if totalSold >= quantity %}
                    {% assign plus_qty = totalSold | minus: quantity | plus: 3 %}
                    {% assign quantity = quantity | plus: plus_qty %}
                  {% endif %}
                {% endif %}
                <div class="progress progress-striped" data-qty="{{ quantity }}" data-total="{{ totalSold }}"><div class="progress-bar"></div></div>
                {% if display_limited %}
                  {% assign qtyleft = quantity | minus: totalSold %}
                  <p class="remaining--text">{{ 'products.progress_bar.limited_edition' | t }}: {{ 'products.progress_bar.only' | t }} <span class="danger">{% if qtyleft > 1 %}{{ qtyleft }}{% else %}{{ limited_default }}{% endif %}</span> {{ 'products.progress_bar.left' | t }}.</p>
                {% else %}
          		  <p class="remaining--text"><span class="quantity">{{ totalSold }}</span>{% if settings.enable_total_quantity %} of <span class="quantity">{{ quantity }}</span>{% endif %} {{ 'products.progress_bar.sold' | t }}</p>
                {% endif %}
              </div>
            </div>
          {% endif %}
          {% if settings.product_hide_motivator_text %}
            <p class="motivator--text"><span>{{ settings.product_motivator_text }}</span></p>
          {% endif %}
          {% if settings.product_we_ship_fast_hide %}
            {% if settings.product_we_ship_fast == "" %}
              <span class="ship--fast"><strong>{{ 'products.call_to_action.ship_fast_1' | t }}</strong> {{ 'products.call_to_action.ship_fast_2' | t }}</span>     	
            {% else %}
              <span class="ship--fast">{{ settings.product_we_ship_fast }}</span>
            {% endif %}
          {% endif %}
          {% if settings.visitor_counter_enable %}
            {% include 'visitor-counter' %}
          {% endif %}
          {% if settings.enable_countdown_timer %}
            {% if display_countdown %}
          	  {% if settings.timer_model == "timer_model_1" %}
                <div id="countdown-timer-{{ product.id }}" class="countdown-timer" data-expire="{{ expire }}" data-published="{{ startdate }}">
                  {% if settings.countdown_timer_text  != "" %}<div class="header">{{ settings.countdown_timer_text }}</div>{% endif %}
                  <ul class="countdown clearfix"><li><span class="days"></span><p class="days_ref"></p></li><li><span class="hours"></span><p class="hours_ref"></p></li><li><span class="minutes"></span><p class="minutes_ref"></p></li><li><span class="seconds"></span><p class="seconds_ref"></p></li></ul>
                </div>
          	  {% endif %}
              {% if settings.timer_model == "timer_model_2" %}
          		<div class="countdown-timer">
                  {% if settings.countdown_timer_text  != "" %}<div class="header">{{ settings.countdown_timer_text }}</div>{% endif %}
                  <div id="countdown-timer-{{ product.id }}" class="clock" data-expire="{{ expire }}" data-published="{{ startdate }}"></div>
          		</div>
          	  {% endif %}
            {% endif %}
          {% endif %}
          {% if settings.topreasons_display %}{% include 'top-reasons' %}{% endif %}
		</div>
        <div class="product-description rte" style="display: none;" itemprop="description">
          {{ product.description }}
          {% if settings.product_description %}
            <div class="product-below--img">
              <a href="{{ settings.product_desc_below_link }}"><img alt="" src="{{ 'product_desc_below.png' | asset_url }}"></a>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="grid__item large--one-whole description--tabs">
        {% if custom_tabs %}
          {{ product.description }}
        {% else %}
          {% if settings.enable_product_tabs %}
        	{% assign tab_cur = 0 %}
            <div class="large--hide medium-down--show">
              <div id="accordion" class="panel-group">
                  {% if settings.enable_description_tab %}
                    <div class="panel panel-default">
                      <div class="panel-heading" data-parent="#accordion" data-toggle="collapse" data-target="#collapseOne">
                        <h4 class="panel-title"><a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle panelactive"> {{ settings.product_description_tab_heading }}<i class="indicator fa fa-chevron-up  pull-right"></i></a></h4>
                      </div>
                      <div class="panel-collapse collapse in" id="collapseOne">
                          <div class="panel-body">
                            	{% unless settings.benifit_bullets %}
                                  {{ product.description }}
                                {% else %}
                                  {{ product.description | replace: '<ul>', '<ul class="fa-ul">' | replace: '<li>', '<li><i class="fa-li fa fa-check-circle"></i>' }}
                                {% endunless %}
                             	{% if settings.product_description %}
                                  <div class="product-below--img">
                                    <a href="{{ settings.product_desc_below_link }}"><img alt="" src="{{ 'product_desc_below.png' | asset_url }}"></a>
                                  </div>
                              	{% endif %}
                          </div>
                      </div>
                    </div>
                  {% endif %}
                  {% for i in (1..5) %}
                    {% assign enabled = 'enable_tab_' | append: i %}
                    {% assign heading = 'tab_' | append: i | append: '_heading' %}
                	{% assign text = 'tab_' | append: i | append: '_text' %}
                    {% if settings[enabled] %}
                      <div class="panel panel-default">
                        <div class="panel-heading" data-parent="#accordion" data-toggle="collapse" data-target="#collapse{{i}}">
                          <h4 class="panel-title"><a href="#collapse{{i}}" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle"> {{ settings[heading] }}<i class="indicator fa fa-chevron-down  pull-right"></i></a></h4>
                        </div>
                        <div class="panel-collapse collapse" id="collapse{{i}}">
                            <div class="panel-body">{{ settings[text] }}</div>
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}
              </div>  
            </div>
        	<div class="tabs">
              <ul class="medium-down--hide">
                {% if settings.enable_description_tab %}
                  <li><a href="#tabs-0">{{ settings.product_description_tab_heading }}</a></li>
                {% endif %}
                {% for i in (1..5) %}
                  {% assign enabled = 'enable_tab_' | append: i %}
                  {% assign heading = 'tab_' | append: i | append: '_heading' %}
                  {% if settings[enabled] %}
                    <li><a href="#tabs-{{ i }}">{{ settings[heading] }}</a></li>
                  {% endif %}
                {% endfor %}
              </ul>
              {% if settings.enable_description_tab %}
                <div id="tabs-0" class="medium-down--hide">
                  {% unless settings.benifit_bullets %}
                    {{ product.description }}
                  {% else %}
                    {{ product.description | replace: '<ul>', '<ul class="fa-ul">' | replace: '<li>', '<li><i class="fa-li fa fa-check-circle"></i>' }}
                  {% endunless %}
                  {% if settings.product_description %}
                    <div class="product-below--img">
                      <a href="{{ settings.product_desc_below_link }}"><img alt="" src="{{ 'product_desc_below.png' | asset_url }}"></a>
                    </div>
                  {% endif %}
                </div>
              {% endif %}
              {% for i in (1..5) %}
                {% assign enabled = 'enable_tab_' | append: i %}
                {% assign text = 'tab_' | append: i | append: '_text' %}
                {% if settings[enabled] %}
                  <div id="tabs-{{ i }}">
                    {{ settings[text] }}
                  </div>
                {% endif %}
              {% endfor %}
        	</div>
          {% else %}
            {% unless settings.benifit_bullets %}
              {{ product.description }}
            {% else %}
              {{ product.description | replace: '<ul>', '<ul class="fa-ul">' | replace: '<li>', '<li><i class="fa-li fa fa-check-circle"></i>' }}
            {% endunless %}
            {% if settings.product_description %}
              <div class="product-below--img">
                <a href="{{ settings.product_desc_below_link }}"><img alt="" src="{{ 'product_desc_below.png' | asset_url }}"></a>
              </div>
            {% endif %}
          {% endif%}
        {% endif%}
      </div>
    </div>
  </div>
</div>
{% if settings.display_sizing_chart %}
  {% if view_size_chart %}
    <div id="size-chart" class="modal fade">
      <div class="modal-content">
        <div class="modal-header">
          <span class="close" data-toggle="close-modal">&times;</span>
          <h4>{{ 'products.general.size_chart_title' | t }}</h4>
        </div>
        <div class="modal-body">
          {{ pages[size_chart_page].content }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close" data-toggle="close-modal">{{ 'products.general.close_button' | t }}</button>
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}
<script>
  var selectCallback = function(variant, selector) {
    if (variant) {
      var form = jQuery('#' + selector.domIdPrefix).closest('form');
      {% if settings.variant_swatch %}
      for (var i=0,length=variant.options.length; i<length; i++) {
        var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
        if (radioButton.size()) {
          radioButton.get(0).checked = true;
        }
      }
      {% endif %}
    }
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector,
      product_id: '{{ product.id }}'
    });
  };

  jQuery(function($) {
    timber.bxSliderApply({
      product_id: "{{ product.id }}",
      total_images: "{{ product.images.size }}",
      offset: 3
    });

    new Shopify.OptionSelectors('productSelect--{{ product.id }}', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}
    timber.swatchChange();
    timber.sliderClickCallback();
    timber.fancybox();
    timber.modalBox();
    {% if settings.enable_image_zoom %}
      timber.magniflierImageZoom();
    {% endif %}
    {% if settings.enable_product_tabs %}
      timber.buildTabs({
        default: "{{ settings.default_tab  }}"
      });
    {% endif %}
    {% if settings.enable_countdown_timer %}
      {% if display_countdown %}
        {% if settings.timer_model == "timer_model_1" %}
          timber.countDownTimer({
            product_id: "{{ product.id }}"
          });
        {% endif %}
    	{% if settings.timer_model == "timer_model_2" %}
          timber.countDownFlipTimer({
            product_id: "{{ product.id }}"
          });
        {% endif %}
      {% endif %}
    {% endif %}
    {% if settings.visitor_counter_enable %}
    timber.visitorCounter();
    {% endif %}
    {% if settings.upsell_popup_enable and upsell_enable %}
      $('.AddToCart').click(function(){
        var flag_addcart = true;
        $('.product_properties').each(function(){
          var val = $(this).find('input').val();
          var val_charlimit = $(this).find('input').data('charlimit');
          if(val == "") {
            flag_addcart = false;
            $(this).find('input').addClass("ui-state-error");
          } else {
            $(this).find('input').removeClass("ui-state-error");
            $(this).find('.error-limit').hide();
            if(val_charlimit != undefined) {
              if(val.length > val_charlimit){
                flag_addcart = false;
                $(this).find('input').addClass("ui-state-error");
                $(this).find('.error-limit').html("Oops, we won't have space to print all that, try something shorter.").show();
              }
            }
          }
        });
        if(flag_addcart) {
          if($(window).width() > 540){
            var width = "500px";
          } else {
            var width = "90%";  
          }
          $('#upsell-popup').find('.modal-content').css('width', width);
          $('#upsell-popup').addClass("in");
        }
        return false;
      });
      $('#upsell-popup .close-upsell').click(function(e){
        e.preventDefault();
        $('#upsell-popup').removeClass("in");
      });
      $('#upsell-popup .upsell-yes-btn').click(function(e){
        e.preventDefault();
        $('#upsell-popup').removeClass("in");
        $("#Quantity").val({{ settings.quantity_upsell }});
        var product_free_id = "";
        {% for variant in all_products[settings.free_product].variants %}
          {% if variant == all_products[settings.free_product].selected_or_first_available_variant %}
			product_free_id = {{variant.id}};
		  {% endif %}
		{% endfor %}
        if(product_free_id !== "") {
          var data = 'id='+ product_free_id + '&quantity=1';
          $.ajax({
	        type: 'POST',
            url: '/cart/add.js',
	        dataType: 'json',
	        data: data,
	        success: function(res){
              setTimeout(function(){
                $("#AddToCartForm--{{ product.id }}").submit();
              }, 1000);
          	}
          });
        } else {
          $("#AddToCartForm--{{ product.id }}").submit();
        }
		
      });
      $('#upsell-popup .upsell-no-btn').click(function(e){
        e.preventDefault();
        $('#upsell-popup').removeClass("in");
        $("#AddToCartForm--{{ product.id }}").submit();
      });
    {% endif %}
    {% for collection in product.collections | limit: 1 %}
      timber.recordLastCollection({
        collection: "{{ collection.handle }}"
      });
    {% endfor %}
  });
</script>
{% if settings.show_related_products %}
<hr/>
<div class="releted--products">
  <div class="wrapper">
    <h2 class="title">{{ 'products.general.related_products_title' | t }}</h2>
    <div class="carousel-product owl-carousel">
      {% assign count = 0 %}
      {% assign type = "r" %}
      {% assign curr_title = product.title %}	
      {% for collection in product.collections %}
      	{% for product in collections[collection.handle].products %}
          {% if product.title != curr_title %}
      		{% if count < 5 %}
              {% assign count = count | plus: 1 %}
              {% include 'product-grid-item' with type %}
      		{% else %}
      		  {% break %}
      		{% endif %}
          {% endif %}
        {% endfor %}
      	{% if count >= 5 %}
      	  {% break %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}
{% if settings.show_recent_products %}
<hr/>
{% include 'recently-viewed' %}
<script>
function toggleChevron(e) {
    $(e.target).prev('.panel-heading').find("i.indicator").toggleClass('fa-chevron-up fa-chevron-down');
    $(e.target).prev('.panel-heading').find("a").toggleClass('panelactive');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
</script>
{% endif %}

 

0 Likes
Shopify Staff
Shopify Staff
524 1 72

Hi there!

My name is Alex, I'm a guru here at Shopify!

Understood!  We've got a guide on doing just that right over here, though this tutorial is intended for themes made and supported by Shopify; with a third party theme like Shoptimized, you may need expert assistance to get that done.  

I might recommend reaching out to the developers of that app for more insight; they've a knowledge base right over here you might find useful - and if not, you can reach out to them directly at support@shoptimized.net.  If this isn't a customization that they can help support from their end, we do have a listing of third party experts for hire that can help with code changes - you could always reach out to them to get this function working for you!

Hope that's helped!  Please feel free to give us a call or start a live chat at any time, we're open 24/7 for your convenience and always happy to assist!

Cheers,

Alex | Shopify Guru

0 Likes
New Member
9 0 0

Hi there,

could you please send me instructions for making these changes on the Masonry theme as the chapter does not cover that.

Thanks

0 Likes