Here’s a sample page: http://www.vivomasks.com/products/colombina-fanfare-3
I want to move the shipping description (FREE USA Shipping on orders over $40. Arrives in 3-6 Business Days. See express and international shipping rates here.) Under the big product image on the left.
Attached an image of what I’m trying to accomplish. Seems kind of simple but I’m new…
What’s my first step?
Thanks
It looks like you’re using Shopify there. Really, what you need to do is dig into the template files and move that code to the location you want it to appear.
Right. So I know I need to edit the product template… Here is the code with which I’m provided. But I’ve tried moving around the shipping copy without any luck… What CSS should I add to it in order to align it to the left under the photo?
<div class="sixteen columns">
<div class="clearfix breadcrumb product_breadcrumb">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">Home</span></a></span>
>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
{% if collection %}
<a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
{% else %}
<a href="/collections/all" title="All Products">All Masks</a>
{% endif %}
</span>
>
{{ product.title }}
</div>
</div>
<div class="sixteen columns" itemscope itemtype="http://data-vocabulary.org/Product" id="product-{{ product.id }}">
<div class="section product_section clearfix">
{% if settings.product_images_position == 'left' %}
{% assign products_per_row = settings.products_per_row %}
{% if settings.product_thumbnails_position == 'bottom' %}
{% include 'product-images-bottom' %}
{% else %}
{% include 'product-images' %}
{% endif %}
{% endif %}
<div class="six columns {%if settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">
<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
<p class="modal_price" itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">
<meta itemprop="currency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<meta itemprop="availability" content="{% if product.available %}in_stock{% else %}out_of_stock{% endif %}" />
<span class="was_price">
{% if product.price < product.compare_at_price_max %}
{{ product.compare_at_price | money }}
{% endif %}
</span>
<span itemprop="price" content="{{ product.price | money_with_currency }}" class="current_price">
{{ product.price | money_with_currency }} {% if product.available == false %} - Sold Out {% endif %}
</span>
</p>
{% if settings.product_description_position == "top" %}
<div class="description" itemprop="description">
{{ product.description }}
</div>
{% endif %}
{% include 'product-form' %}
{% if settings.product_description_position == "bottom" %}
<div class="description" itemprop="description">
{{ product.description }}
</div>
{% endif %}
<hr />
<div class="meta">
{% if settings.display_collections %}
<p>
<span class="label">Collections:</span>
<span>
{% for col in product.collections %}
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</span>
</p>
{% endif %}
{% if settings.display_tags %}
<p>
{% for tag in product.tags %}
{% if forloop.first %}
<span class="label">Tags:</span>
{% endif %}
<span>
<a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="Products tagged {{ tag | escape}}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
</span>
{% endfor %}
</p>
{% endif %}
{% if settings.display_type %}
<p>
<span class="label">Type:</span> <span itemprop="category">{{ product.type | link_to_type }}</span>
</p>
{% endif %}
{% if settings.display_vendor %}
<p>
<span class="label">Vendor:</span> <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
<p><b>FREE USA Shipping on orders over $40. <br />Arrives in 3-6 Business Days. <br /><br />See express and international shipping rates <a href="http://www.vivomasks.com/pages/shipping"><u>here</u></a>.</b></p>
</div>
{% include "social-buttons" with "product" %}
It looks like this is the bit you need to move:
<div class="meta">
{% if settings.display_collections %}
<p>
<span class="label">Collections:</span>
<span>
{% for col in product.collections %}
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</span>
</p>
{% endif %}
{% if settings.display_tags %}
<p>
{% for tag in product.tags %}
{% if forloop.first %}
<span class="label">Tags:</span>
{% endif %}
<span>
<a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="Products tagged {{ tag | escape}}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
</span>
{% endfor %}
</p>
{% endif %}
{% if settings.display_type %}
<p>
<span class="label">Type:</span> <span itemprop="category">{{ product.type | link_to_type }}</span>
</p>
{% endif %}
{% if settings.display_vendor %}
<p>
<span class="label">Vendor:</span> <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
<p><b>FREE USA Shipping on orders over $40. <br />Arrives in 3-6 Business Days. <br /><br />See express and international shipping rates <a href="http://www.vivomasks.com/pages/shipping"><u>here</u></a>.</b></p>
</div>
It looks like that code needs to be moved somewhere in here:
<div class="section product_section clearfix">
{% if settings.product_images_position == 'left' %}
{% assign products_per_row = settings.products_per_row %}
{% if settings.product_thumbnails_position == 'bottom' %}
{% include 'product-images-bottom' %}
{% else %}
{% include 'product-images' %}
{% endif %}
{% endif %}
Though it’s hard to tell. There’s a lot of non-HTML code in there, so you might have to play around a bit to see what works.
DON’T FORGET TO TAKE A COPY OF THE ORIGINAL CODE FIRST, THOUGH, SO THAT YOU CAN REVERT BACK TO THAT IF THINGS GO HAYWIRE.
No CSS required though?
Of course there will be CSS required, but you can’t paint a house till you’ve built it. You need to have the HTML ready before you style it.