Thanks for replying RemiB, here you have my product page:

<header>
  <div class="row show-for-medium-up">
    <div class="columns">
      {% if settings.product-breadcrumbs-show %}
        {% include 'snippet-breadcrumbs' %}
      {% endif %}
    </div>
  </div>
  <div class="previous-next row">
    {% if collection %}
      {% if collection.previous_product or collection.next_product %}
        <div class="previous columns large-3 small-6"> 
          {% if collection.previous_product %}
            <a class="left" title="Previous Product" href="{{ collection.previous_product}}"><span aria-hidden="true" class="glyph arrow-left"></span> Previous Item</a>
          {% endif %}
          <div class="border-decoration show-for-large-up"></div>
        </div>

        <div class="next columns large-3 large-offset-6 small-6">
          {% if collection.next_product %}
            <a class="right" title="Next Product" href="{{ collection.next_product}}">Next Item <span aria-hidden="true" class="glyph arrow-right"></span></a>
          {% endif %}
          <div class="border-decoration show-for-large-up"></div>
        </div>
      {% endif %}
    {% endif %}
  </div>
</header>

<article class="row" itemscope itemtype="http://schema.org/Product"&gt;
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}" />
  <meta itemprop="image" content="{{ product.featured_image.src | product_img_url: 'grande' }}" />

  <div class="positions active hide-for-js">
    <div data-position="title-vendor">
      <h1 class="page-title" itemprop="name">{{ product.title }}</h1>
      {% if settings.product-brand-show %}
        {% assign product_vendor_handle = product.vendor | handle %}
        {% if collections[product_vendor_handle].handle == product_vendor_handle %}
          {% assign vendor_url = collections[product_vendor_handle].url %}
        {% else %}
          {% assign vendor_url = product.vendor | url_for_vendor %}
        {% endif %}
        <h2 class="vendor" itemprop="brand">{{ product.vendor | link_to: vendor_url }}</h2>
      {% endif %}
    </div>
      

    <div data-position="prices">
      <div class="prices">
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"&gt;
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />

          {% if product.available %}
            <link itemprop="availability" href="http://schema.org/InStock&quot; />
          {% else %}
            <link itemprop="availability" href="http://schema.org/OutOfStock&quot; />
          {% endif %}

          <p>
            {% assign variant = product.selected_or_first_available_variant %}
            <span class="actual-price" itemprop="price">{{ variant.price | money }}</span>&nbsp;<span class="compare-price">{% if variant.price < variant.compare_at_price %}Was {{ variant.compare_at_price | money }}{% endif %}</span>
          </p>
        </div>
      </div>
    </div>

    <div data-position="photos">
      <div class="photos" >
        <div class="container clearfix">

          {% for image in product.images %}
          <a class="photo" href="{{ image.src | product_img_url: '1024x1024' }}" data-zoom="{{ image.src | product_img_url: '1024x1024' }}" rel="gallery" data-image-id="{{ image.id }}">
            <img src="{{ image.src | product_img_url: 'grande' }}" alt="{{ image.alt | escape }}" />
          </a>
          {% endfor %}
        </div>
      </div>
    </div>

    <div data-position="thumbs">
      <div class="thumbs">
        {% if product.images.size > 1 %}
          <ul class="clearfix row">
            {% for image in product.images %}
              <li class="thumb">
                <img src="{{ image.src | product_img_url: 'compact' }}" alt="{{ image.alt | escape }}" />
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    </div>
    
    <div data-position="cart-form">
      <form class="cart-form custom" action="/cart/add" method="post" enctype="multipart/form-data">  
        <div class="variants {% unless product.variants.size > 1 %}hidden{% endunless %}">
          <select id="variant-listbox" name="id" class="medium">
            {% for variant in product.variants %}
              <option {% if variant.inventory_quantity <= 0 and variant.available == false %}DISABLED {% endif %}{% if variant == product.selected_or_first_available_variant %}selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="quanity-cart-row clearfix">
          {% include 'snippet-quantity' %}

          <div class="add-to-cart">
            <input type="submit" name="add" id="add" value="Add to cart" class="purchase button">
          </div>
        </div>
      </form>
      
      {% include 'snippet-product-unavailable' %}
      <br />
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
      
    </div>
    
    <div data-position="description">
      <div class="description" >
        <div itemprop="description" class="rte-content">
          {{ product.description }}
        </div>
      </div>
    </div>

  </div>

  <!-- Positions & Ordering -->

  <!-- Mobile -->
  <div class="positions show-for-small columns">
    <div data-position="title-vendor"></div>
    <div data-position="prices"></div>
    <div data-position="photos"></div>
    <div data-position="thumbs" class="text-center"></div>
    <div data-position="cart-form"></div>
    <div data-position="description"></div>
  </div>

  <!-- Medium Screens -->
  <div class="positions show-for-medium-only">
    <div class="columns large-6">
      <div data-position="title-vendor"></div>
      <div data-position="prices"></div>
      <div data-position="cart-form"></div>
      <div data-position="thumbs"></div>
      <div data-position="description"></div>
    </div>

    <div class="columns large-6">
      <div data-position="photos"></div>
    </div>
  </div>

  <!-- Large Screens -->
  <div class="positions show-for-large-up">
    <div class="columns large-3">
      {% if settings.product-position-title-vendor == 'left' %}
        <div data-position="title-vendor"></div>
      {% endif %}
      {% if settings.product-position-price == 'left' %}
        <div data-position="prices"></div>
      {% endif %}
      {% if settings.product-position-form == 'left' %}
        <div data-position="cart-form"></div>
      {% endif %}
      {% if settings.product-position-thumbs == 'left' %}
        <div data-position="thumbs"></div>
      {% endif %}
      {% if settings.product-position-description == 'left' %}
        <div data-position="description"></div>
      {% endif %}
    </div>

    <div class="columns large-6">
      <div data-position="photos"></div>
      {% if settings.product-position-thumbs == 'center' %}
        <div data-position="thumbs" class="text-center"></div>
      {% endif %}
    </div>

    <div class="columns large-3">
      {% if settings.product-position-title-vendor == 'right' %}
        <div data-position="title-vendor"></div>
      {% endif %}
      {% if settings.product-position-price == 'right' %}
        <div data-position="prices"></div>
      {% endif %}
      {% if settings.product-position-form == 'right' %}
        <div data-position="cart-form"></div>
      {% endif %}
      {% if settings.product-position-thumbs == 'right' %}
        <div data-position="thumbs"></div>
      {% endif %}
      {% if settings.product-position-description == 'right' %}
        <div data-position="description"></div>
      {% endif %}
    </div>
  </div>
</article>

{% if settings.product-share-this-show %}
  <section class="row social-share">
    <div class="columns">
      {% include 'snippet-product-share' with 'product-template' %}
    </div>
  </section>
{% endif %}

{% if settings.product-similar-products-show %}
  {% include 'snippet-related-products' %}
{% endif %}

{% if settings.product-modal-enabled %}
  <div class="modal">
    <div class="loading"></div>
    <a aria-hidden="true" class="prev glyph slider-left"></a>
    <a aria-hidden="true" class="close glyph cross"></a>
    <a aria-hidden="true" class="next glyph slider-right"></a>
    <div class="slides"></div>
  </div>
  <div class="modal-mask"></div>
{% endif %}

<script>
  // variables to pass to shop.js
  var selectCallback = '';
  var product_title = '{{ product.title | escape }}';
  var product_variant_size = {{ product.variants.size }};
  var product_options_size = {{ product.options.size }};
  var product_options_first = '{{ product.options.first  }}';
  var product_json = {{ product | json }};

  // Looking for the selectCallback function?
  // You can find it by searching 'selectCallback' in the assets > shop.js
</script>

Hi guys,

No pitch here!

No discount code!

No website url which takes you to a boring ol' page.

If you are having problems getting traffic to your Shopify Store, fill out this form and we will get back to you with tips and solutions to help - http://goo.gl/forms/3jnchmU4TI

Best,

James

Hi,

We just recently decided to add custom tabs to our product page to give customers more information on shipping, refunds etc. We used the code appearing in the following article and as that wasn't working properly we ended up using the suggested solution we found here. This made the tabs work fine on the product page.

The problem is that since the introduction of the extra code, the 'Browse' function on the collection page (upper right corner) has stopped working. When I use Chrome's 'Inspect Element' function I get an 'Uncaught SyntaxError: Unexpected end of input' message indicating some syntax problem with jquery in the scripts.js file.

Also when adding the suggested code in the scripts.js file I notice that the final </script> tab is highlighted red by the editor. Code is as follows:

{% if template contains 'index' %}
<script>
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
 
var target = this.hash,
$target = $(target);
 
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
});
});
 
var tabs = $('ul.tabs > li > a');
tabs.each(function(i) {
jQuery(this).unbind('click.smoothscroll')
.click(function(e) {
var contentLocation = $(this).attr('href');
if(contentLocation.charAt(0)=="#") {
tabs.removeClass('active');
$(this).addClass('active');
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
return false;
});
});
</script>
{% endif %}

I'm not sure whether the two are related but has anyone experienced the same thing? 

Any solutions to this?

Many thanks!

Lawrence the code you provided didnt work. 

Thanks anyway. 

Hey Flo,

Johannes here, the developer of langify.

I guess the notification can be shortened by reusing some of the liquid code instead of duplicating everything.

Could you please send me a request to support@langify-app.com including the notification?

Thanks

Thanks for your response Karmela!  Would there be anyway I could have an employee fill out a text box somewhere on the dashboard and have that output to the Thank You page?  I was using custom Theme Settings for this but I guess that won't work as expected..

You could totally use a metafield for storing user defined text that needs to be output on the Thank You page.  Metafields can be added to the store/shop object, and since that object is accessible on the Thank You Page, the metafields that you add can be used as Liquid variables.

I have been trying to implement the Go-To Action on Shopify Email Template. Email with Go-To Action when display on gmail, will create a small link box at the end of email. It's very convenient for the customer to track their package or view their order without have to open that email message. Both Amazon and Wayfair also have it.

In order to do that, I need to insert either <script>.....</script> or <div>.....<div> tag into the email template. But I have noticed that the Shopify engine will strip off any tag that aren't allowed ( for an example:  <script></script> tag). After the required tag (or) script is inserted and test, the small link button aren't show up in gmail and when I inspect the code, the tag (or) script are missing (only empty <div></div> remain). 

So can anyone suggest how to implement Go-To Action with Shopify Email Template?

reference link: https://developers.google.com/gmail/markup/reference/go-to-action

Below are the code that I've inserted into email template. neither div nor script are working. If you want to test it out, please do not copy the code from below, but instead visit the link above to get the code. Because there are some character auto added to the code when I try to post them on forum.

<div itemscope itemtype="http://schema.org/ParcelDelivery"&gt;   <div itemprop="deliveryAddress" itemscope itemtype="http://schema.org/PostalAddress"&gt;     <meta itemprop="streetAddress" content="24 Willie Mays Plaza"/>     <meta itemprop="addressLocality" content="San Francisco"/>     <meta itemprop="addressRegion" content="CA"/>     <meta itemprop="addressCountry" content="US"/>     <meta itemprop="postalCode" content="94107"/>   </div>   <meta itemprop="expectedArrivalUntil" content="2013-03-12T12:00:00-08:00"/>   <div itemprop="carrier" itemscope itemtype="http://schema.org/Organization"&gt;     <meta itemprop="name" content="FedEx"/>   </div>   <div itemprop="itemShipped" itemscope itemtype="http://schema.org/Product"&gt;     <meta itemprop="name" content="iPod Mini"/>   </div>   <div itemprop="partOfOrder" itemscope itemtype="http://schema.org/Order"&gt;     <meta itemprop="orderNumber" content="176057"/>     <div itemprop="merchant" itemscope itemtype="http://schema.org/Organization"&gt;       <meta itemprop="name" content="Bob Dole"/>     </div>   </div>   <link itemprop="trackingUrl" href="http://fedex.com/track/1234567890"/&gt; </div>
 

<script type="application/ld+json"> {   "@context": "http://schema.org&quot;,   "@type": "ParcelDelivery",   "deliveryAddress": {     "@type": "PostalAddress",     "streetAddress": "24 Willie Mays Plaza",     "addressLocality": "San Francisco",     "addressRegion": "CA",     "addressCountry": "US",     "postalCode": "94107"   },   "expectedArrivalUntil": "2013-03-12T12:00:00-08:00",   "carrier": {     "@type": "Organization",     "name": "FedEx"   },   "itemShipped": {     "@type": "Product",     "name": "iPod Mini"   },   "partOfOrder": {     "@type": "Order",     "orderNumber": "176057",     "merchant": {       "@type": "Organization",       "name": "Bob Dole"     }   },   "trackingUrl": "http://fedex.com/track/1234567890&quot; } </script>
 

Hi, Schaeken,

Could you be a little more specific? When you say "the end of your sidebar code," do you mean after "{% endunless %}" or before that? 

Thanks so much!

Hi Karmela, thanks for your quick responses!  Is it possible to add metafields to the Theme Settings page?  The text area I need is for employee-use so would need to be accessible only from the dashboard and not "front-facing".  Any ideas would be greatly appreciated! :)

Metafields can't be added the Theme Settings.  Even if they could, they wouldn't be accessible on the Thank You page.  Only metafields attached to the shop object would be usable within the Thank You page.  If you were using a tool like ShopifyFD to create/edit the metafields, then the person editing the value would still need access to the store's general settings page in order to change the metafield value.

Our products have labels with text that we want customers to be able read (site: Arithmetic, Responsive theme). The default way Shopify handles images leaves them a little fuzzy. 

• Shopify suggests uploading images at dimensions of 1024 by 1024 px
• The largest our product images ever display at are about 462 x 462 px on product pages 
• On our homepage, they're displayed via a collection page at 300 x 300 px

Shopify automatically creates a series of images at standardized dimensions. But this automated downsampling leaves images less than pixel perfect.

The problem gets worse when Shopify's standard images sizes differ from what is actually displayed on your site. In our case, standard-size images are scrunched to the actual, smaller image sizes that display on our site. 

Ideally, we could specify and upload the exact image sizes that are actually displayed for both the product and collection pages.

Is there a way to do this (even if I have to hire a developer)?  

Hi Kristof,

It sounds like you are going about things the right way. I'd really need to see the entire liquid file for your cart page to help further. Any change you can post it on here? 

Thanks,

Andy 

Hi Adriana,

Are you 100% sure that the tags you are wanting to remove completely from the store have been removed from every single product whether active or not? By the way loving your store. I think that's my Christmas shopping sorted :)

Thanks,

Andy 

As far as i'm aware this unfortunately isn't possible. Well ... you could use Shopifys API to allow the customer to update their email address. But according to the documentation updating a password isn't possible what so ever. Sorry :( 

Did you want to update the text on the "add to cart" button or did you mean you have one of those little 'sales' type stamps overhanging your product image? Unfortunately I can't access your site at the moment. Standoutd's answer is absolutely perfect if you want to update the text on the add to cart button. 

An alternative suggestion would be to store your text within a Product Metafield. That way you have complete control over what text is displayed for each and every product on your store. You would need a 3rd party app such as Metafields2 to allow you to do this though. If you need further help just ask :) 

Hi Idir,

To add a colour to your nav bar just add the following to your stylesheet.

#stickyNav {
background: #cc0000;

}

If you wanted to add an image you would upload your image to your assets folder and then do something like this: 

#stickyNav {
background: url('{{ image-filename.png | asset_url }}');

}

To allow your text to span across you page you need to modify your page.liquid template. You should find a tag which looks like this: 

<div class="grid-item large--two-thirds push--large--one-sixth">

You need to change it to:

<div class="grid-item large--three-thirds">

If you need any further help just give me a shout :)

Thanks,

Andy

I'm wondering if {{ line.line_item.sku }} should be {{ line.product.sku }}? Let me know if that helps :) 

I'd suggest that you upload all the logos to your themes assets folder. Then write some code like this:

{% case product.vendor %} 

{% when 'firstVendor' %}

<img src="{{ 'firstVendorImage.png | asset_url }}">

{% when 'secondVendor' %}

<img src="{{ 'secondVendorImage.png | asset_url }}">

{% else %}

<img src="{{ 'defaultVendorImage.png | asset_url }}">

{% endcase %}
 

You should create a {% when 'the-vendors-name' %} clause for each of your Vendors. 

Let me know if you need further help. 

Thanks,

Andy

Hi David,

Could you post the code you are using in product-grid-item.liquid here so I can help debug?

Thanks,

Andy