Italicize product title?

hana_nell — Sun, 25 Oct 2009 20:21:44 +0000

There is no doubt a neat, obvious solution to this, but... What is the best way to italicize a product's title so that it reads consistently as italicized? Using the '_x_' notation doesn't work at all, and when I use '<i>x</i>', the title is italicized within the page, but the page title shows the brackets.

Sorry for the newbie question.

Caroline Schnapp commented

Caroline Schnapp — Sun, 25 Oct 2009 20:34:54 +0000

Do you have a link to your product page, hana_nell?

What you are trying to accomplish can be done with a simple rule added to your stylesheet.

hana_nell commented

hana_nell — Mon, 26 Oct 2009 00:05:21 +0000

Thanks for responding, Caroline. We haven't gone live yet, so I can't link you to a product page, but here is the stylesheet:

[removed]

I appreciate the help!

Mark Dunkley commented

Mark Dunkley — Mon, 26 Oct 2009 00:10:57 +0000

She means your product.liquid page not your css :)

hana_nell commented

hana_nell — Mon, 26 Oct 2009 00:32:51 +0000

Whoops. Thanks for setting me straight!

<div id="product">
  <div id="product-main"> {% for image in product.images %}
    {% if forloop.first %}
    <div id="prod-img"> <img src="{{ image | product_img_url: 'large'}}" alt="{{product.title}}" /> </div>
    {% else %}
    <div class="prod-img-small fl"> <a href="{{ image | product_img_url: 'large' }}" rel="lightbox"> <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title}}" /> </a> </div>
    {% endif %}
    {% endfor %} 
</div>
<div id="variant-add">
  <h2>{{ product.title }}</h2>
</div>
  <div id="description" class="textile"> {{ product.description }} </div>
</div>

<div id="variant-add">
    <form action="/cart/add" method="post">

    {% if product.variants.size == 1 %}

    <input name="id" value="{{ product.variants.first.id }}" type="hidden" />

    {% else %}
    
      <select id="variants" name='id'>
        {% for variant in product.variants %}
          <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
        {% endfor %}
      </select>

    {% endif %}

      <div class="addtocart">{% if product.available == false %} <a href="email@org.org?subject={{ product.title }}"><img src="{{ 'soldout.gif' | asset_url }}" /></a>{% else %}         <input type="submit" name="add" value="Add to Cart" id="add" class="button" style="width:100px" src="asset_url" /> {% endif %} </div>
    </form>
  </div>

      {% if product.variants.size == 1 %}

    <div id="price-field">{{ product.price | money_with_currency }}</div>

      {% else %}

   <div id="price-field"></div>

<script type="text/javascript">
// <![CDATA[  
  // prototype callback for multi variants dropdown selector
  var selectCallback = function(variant, selector) {
    if (variant && variant.available == true) {
      // selected a valid variant
      $('add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
      $('add').disabled = false;           // reenable add-to-cart button
      $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
    } else {
      // variant doesn't exist
      $('add').addClassName('disabled');      // set add-to-cart button to unavailable class
      $('add').disabled = true;              // disable add-to-cart button      
      $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
    }
  };

  // initialize multi selector for product
  Event.observe(document, 'dom:loaded', function() {  
    new Shopify.OptionSelectors("variants", { product: {{ product | json }}, onVariantSelected: selectCallback }); 
  });
// ]]>
</script>

     {% endif %}

Mark Dunkley commented

Mark Dunkley — Mon, 26 Oct 2009 02:12:34 +0000

Hana, if you add this to your .css file all your product titles will appear italicized on the product page (and only on the product spage).

#variant-add h2 { font-style:italic }

Whenever you see {{ product.titile }} this means that Shopify will output your product's title. So if you want to add italics to other pages you can either target using .css (which would be the best way to do it) or you open up all your liquid files that have {{ product.title }} and wrap them in <em> </em>.

hana_nell commented

hana_nell — Mon, 26 Oct 2009 21:18:46 +0000

Hi Mark,

What I'd like to do is selectively italicize the product titles. Some of them do not be italicized, while others are book titles and it would be great if they were italicized. Even better would be to be able to have both normal and italicized text in one title, e.g. "T-Shirt: Style." Is this possible?

Thanks!

Caroline Schnapp commented

Caroline Schnapp — Mon, 26 Oct 2009 21:32:52 +0000

Something like this would do the trick:

<div id="variant-add">
  <h2{% if product.type == 'book' %} class="book"{% endif %}>{{ product.title }}</h2>
</div>

Then in the stylesheet:

#variant-add h2.book { font-style:italic }

hana_nell commented

hana_nell — Thu, 29 Oct 2009 17:12:14 +0000

Thanks for the ideas. So, is there no way to have both italics and plain text in the same title?

Jamie commented

Jamie — Thu, 29 Oct 2009 19:04:48 +0000

Well the title field _used to_ take textile (like some other things I can think of, cough) but looks like that is no longer the case. looks like you have to put actual mark-up in that title box for this to work now. Makes for ugly titles in the back end but works for what you are trying to accomplish. [see screen]