试图在Shopify上设置cart.liquid页面的样式。很近

Question

我正在尝试将我的购物车页面在Shopify网站上的显示方式更改为其他网站使用的样式。我觉得我快到了！

但是我被困住了，我希望你们可以帮助我。

带帽子和衬衫的图像是我当前的购物车页面。我希望它看起来像带有Blenders Eyewear太阳镜的购物车页面。

我附加了图片和代码。我试图复制的购物车来自blenderseyewear.com。如果您将项目添加到购物车，您将看到它的样式。

非常感谢你们的帮助。

以下是Shopify上我的cart.liquid页面的代码。

<div id="shopping-cart" class="desktop-12 tablet-6 mobile-3">

<h2>SHOPPING CART</h2>
{% if cart.item_count == 0 %}
<p>{{ 'cart.general.empty' | t }}</p> 
{% else %}
<script type="text/javascript">
function remove_item(id) {
  document.getElementById('updates_'+id).value = 0;
  document.getElementById('cartform').submit();
}
</script>

<form action="/cart" method="post" id="cartform">

<table class="desktop-9 tablet-6 mobile-3">
  <thead>
    <tr>
      <th>{{ 'cart.general.product' | t }}</th>
      <th>{{ 'cart.general.price' | t }}</th>
      <th style="text-align: center;">{{ 'cart.general.qty' | t }}</th>
      <th style="text-align: center;">{{ 'cart.general.remove' | t }}</th>
      <th>{{ 'cart.general.total' | t }}</th>
    </tr>
  </thead>
  <tbody>
    {% for item in cart.items %}
    <tr>
      <td>
        <div class="cart-item">
          <div class="cart-image">
            <a href="{{ item.url }}" title="{{ item.product.title | escape 
}}">
              <img src="{{ item | img_url: 'medium' }}"  alt="{{ item.title | escape }}" />         
            </a>
          </div>
          <div class="cart-title">
            {% if settings.vendor %}<p>{{ item.vendor }}</p>{% endif %}
            <p>{{ item.title }}</p>
            {% assign property_size = item.properties | size %}
            {% if property_size > 0 %}
            {% for p in item.properties %}
            {% unless p.last == blank %}
            {{ p.first }}:

            {% comment %}
            Check if there was an uploaded file associated
            {% endcomment %}
            {% if p.last contains '/uploads/' %}
            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
            {% else %}
            {{ p.last }}
            {% endif %}

            <br>
            {% endunless %}
            {% endfor %}
            {% endif %}
          </div>
        </div>
      </td>
      <td>
        <p>{{ item.price | money }}{% if item.variant.compare_at_price > item.price %}<br /><del>{{ item.variant.compare_at_price | money }}</del>{% endif %}</p>          
      </td>
      <td>
        <input type="text" class="cart-qty" size="4" name="updates[{{ item.id }}]" id="updates_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();" style="max-width: 50px; text-align: center; margin: 0 auto 10px; "/>
        <input style="width: 50px; height: 40px; float: right; background-color: #b3b3b3; padding: 6px" type="submit" value="Update">
      </td>
      <td style="text-align: center">
        <p><a href="#" onclick="remove_item({{ item.variant.id }}); return false;"><i class="fa fa-trash-o fa-2x"></i></a></p>
      </td>
      <td>
        <p>{{ item.line_price | money }}</p>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>


<div id="basket-right" class="desktop-3 tablet-6 mobile-3">
  <h4>{{ 'cart.general.subtotal' | t }} {{ cart.total_price | money }}</h4>
  <p><a href="/collections">{{ 'cart.general.continue' | t }}</a></p>
  <input type="submit" name="checkout" id="checkout" value="{{ 'cart.general.checkout' | t }}" class="button" />
  <div class="clear"></div>          
</div>


<div id="cart-notes" class="desktop-12 mobile-3">
  <label for="note"><strong><center><h1>{{ 'cart.general.note' | t }}
  <textarea name="note" id="note" rows="5" cols="60">{{cart.note}}</textarea>  
</div>     


</form>
{% endif %}

<div class="clear"></div>

{% if settings.show_recent_products %}
<div id="looked-at" class="desktop-12 mobile-half">
  {% include 'recently-viewed' %}
</div>
{% endif %}

</div>