SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with simple CSS issue

    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..

    shipping.jpg

    What's my first step?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
    <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" %}

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It looks like this is the bit you need to move:

    Code:
           <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:

    Code:
    <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.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No CSS required though?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by awkward_clam View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •