Trying to embed Sketchfab model as main product image

New Member
2 0 0

Hi,

I'm new to Html, but I'm trying to follow these instructions to embed this sketchfab model:

_________________

To start with, add your iframe code right tot the bottom of your product descriptions in html view. Make sure it is underneath all the rest of the html and commented out, like so:

<!-- iframe code goes here -->

Then, inside of product.liquid you can add an element where you want it to appear (ie. in the featured image slot) and then add in code like this to grab the iframe from the description:

{{ product.description | split: "<!--" | last | split: "-->" | first }}

______________________

But I'm ending up with this (below). While the embed is in the right place - where the original product image was, it's also still in the description, and the original image still exists - just lower.

 

Help would be enormously appreciated!!

help wrong2.JPGhelp wrong1.JPG

 

0 Likes
Highlighted
Shopify Partner
1382 161 249

Are you sure there are no other <!-- --> in the product description? Also, if you can post the whole content of the product-template.liquid that could help.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
2 0 0

Hi Sergiu, here is everything in product-template.liquid

<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-enable-history-state="true">

  {% case section.settings.add_to_cart_width %}
    {% when 'small' %}
      {%- assign btn_class = 'btn--wide' -%}
      {%- assign productform_class = 'product-form--wide' -%}
    {% when 'medium' %}
      {%- assign btn_class = 'btn--wide' -%}
      {%- assign productform_class = 'product-form--wide' -%}
    {% when 'large' %}
      {%- assign btn_class = 'btn--full' -%}
      {%- assign productform_class = 'product-form--full' -%}
  {% endcase %}

  {% if section.settings.add_to_cart_width != 'small' %}
    <style>
      @media screen and (min-width: 769px){
        .single-option-selector,
        .quantity-selector {
          {% if section.settings.add_to_cart_width == 'medium' %}
            min-width: 50%;
          {% else %}
            min-width: 100%;
          {% endif %}
        }
      }
    </style>
  {% endif %}

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="section-header section-header--breadcrumb">
    {% include 'breadcrumb' %}
  </div>
  <div class="product-single">
    <div class="grid product-single__hero">
      <div class="grid__item post-large--one-half">
           {{ product.description | split: "<!--" | last | split: "-->" | first }}

        {% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

          <div class="product-single__photos">
        
            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

            {% for image in product.images %}
              {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
              {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

              <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
                <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                  <img id="{{ img_id }}"
                       class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                       {% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
                       data-src="{{ img_url }}"
                       data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ image.aspect_ratio }}"
                       data-sizes="auto"
                       {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
                       alt="{{ image.alt | escape }}">
                </div>
              </div>
            {% endfor %}

            <noscript>
              <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
            </noscript>
          </div>

          {% if product.images.size > 1 %}

            <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
                  <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                    <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                  </a>
                </li>
              {% endfor %}
            </ul>

          {% endif %}

        {% else %}

          <div class="grid">

            <div class="grid__item four-fifths product-single__photos" id="ProductPhoto">
              {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

              {% for image in product.images %}
                {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
                {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
                {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

                <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
                  <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                    <img id="{{ img_id }}"
                         class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                         {% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
                         data-src="{{ img_url }}"
                         data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-aspectratio="{{ image.aspect_ratio }}"
                         data-sizes="auto"
                         {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
                         alt="{{ image.alt | escape }}">
                  </div>
                </div>
              {% else %}
                <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
              {% endfor %}

              <noscript>
                <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
              </noscript>
            </div>

            <div class="grid__item one-fifth">

              <ul class="grid product-single__thumbnails" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="grid__item">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>

            </div>

          </div>

        {% endif %}

        {% if section.settings.product_image_zoom_type == 'lightbox' %}
        <ul class="gallery" class="hidden">
          {% for image in product.images %}
          <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024', scale: 2 }}"></li>
          {% endfor %}
        </ul>
        {% endif %}

      </div>
      <div class="grid__item post-large--one-half">
        {% if section.settings.product_vendor_enable %}
          <span class="h3" itemprop="brand">{{ product.vendor }}</span>
        {% endif %}
        <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          {% assign variant = product.selected_or_first_available_variant %}

          <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

          <div class="product-single__prices{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__prices--policy-enabled{% endif %}">
            <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
              {{ product.price | money }}
            </span>

            {% if product.compare_at_price > product.price %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price">
                {{ product.compare_at_price_max | money }}
              </s>
            {% else %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price hide">
                {{ product.compare_at_price_max | money }}
              </s>
            {% endif %}

            {% include 'product-unit-price', variant: variant, available: true %}

          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
            <div class="product-single__policies{% if product.has_only_default_variant and section.settings.product_quantity_enable == false %} product__policies--no-dropdowns{% endif %} rte">
              {%- if shop.taxes_included -%}
                {{ 'products.general.include_taxes' | t }}
              {%- endif -%}
              {%- if shop.shipping_policy.body != blank -%}
                {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- endif -%}
            </div>
          {%- endif -%}

          {% form 'product', product, class:productform_class %}
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
                {% if variant.available %}

                  <option {% 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 disabled="disabled">
                    {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                  </option>
                {% endif %}
              {% endfor %}
            </select>

            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
            {% if section.settings.enable_payment_button %}
              {{ form | payment_button }}
            {% endif %}
          {% endform %}

          {% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
            <div class="tabs">
              <ul class="tab-switch__nav">
                <li>
                  <a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
                </li>
                <li>
                  <a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
                </li>
              </ul>
              <div id="description" class="tab-switch__content" data-content="description">
                <div class="product-description rte" itemprop="description">
                  {{ product.description }}
                </div>
              </div>
              <div id="extra" class="tab-switch__content" data-content="extra">
                <div class="rte">
                  {{ pages[section.settings.extra_tab_content].content }}
                </div>
              </div>
            </div>
          {% else %}
            <div class="product-description rte" itemprop="description">
              {{ product.description }}
            </div>
          {% endunless %}

          {% if section.settings.social_sharing %}
            <hr class="hr--clear hr--small">
            <h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
            {% include 'social-sharing' %}
          {% endif %}
        </div>

      </div>
    </div>
  </div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

 

0 Likes