The cart page appears cut off (see below). My website URL is techerooco.myshopify.com.
Here's the code on template.cart.liquid:
<div class="module-wrapper">
<div class="module cart">
<div class="module-header cart-header">
<h1 class="module-title">{{ 'cart.general.header' | t }}</h1>
</div>
<div class="module-body">
<div class="module-content">
{% if cart.item_count > 0 %}
<div id="bold-cart-msg"></div>
<form action="/cart" method="post">
<div class="cart-items-container">
<table class="cart-items clean">
<thead class="cart-items-thead">
<tr>
<th class="first">{{ 'general.general.product' | t}}</th>
<th>{{ 'general.general.price' | t }}</th>
<th>{{ 'general.general.quantity' | t }}</th>
<th class="last">{{ 'general.general.total' | t }}</th>
</tr>
</thead>
<tbody>
{% for item in cart.items %}
<tr
class="cart-item variant-{{ item.variant.id }} {% include 'for-looper' %}"
data-variant="{{ item.variant.id }}"
data-title="{{ item.product.title }}"
data-url="{{ item.url }}">
<td class="cart-item-product cart-item-td">
<div class="cart-item-image-container">
<a class="cart-image" href="{{ item.url }}">
<img src="{{ item | img_url: 'small' }}" alt="{{ item.product.title }}">
</a>
<a class="cart-item-remove mobile-only" href="/cart/change?line={{ forloop.index }}&quantity=0">
<span class="icon icon-cross"></span>
</a>
</div>
<div class="cart-item-product-wrap">
<span class="cart-title"><a href="{{ item.url }}">{{ item.product.title }}</a></span>
<span class="cart-vendor vendor">{{ item.vendor }}</span>
{% unless item.variant.title == 'Default Title' %}
<span class="cart-variant">{{ item.variant.title }}</span>
{% endunless %}
</div>
</td><br>
<td class="cart-item-price cart-item-td">
<div class="cart-item-unit-price">
<span class="mobile-only">{{ 'general.general.price' | t }}:</span>
<span class="money"><div class="un-line-item-unit-price" data-id="{{ item.key }}"><div class="qb-price-item" data-id="{{ item.key }}"><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" data-item-key="{{item.key}}" style="display:none !important;"></span>{{ item.price | money }}</div></div></span>
</div>
</td>
{% unless item.variant.inventory_management == blank or item.variant.inventory_policy == 'continue' %}
{% assign inventory = true %}
{% endunless %}
<td class="cart-item-quantity cart-item-td" {% if inventory == true %}data-max="{{ item.variant.inventory_quantity }}"{% endif %}>
<div class="number-input-wrapper cart-item-quantity-wrapper clearfix">
<div class="number-input-field">
<input type="number" id="cart-item-{{ item.id }}" name="updates[]" class="cart-item-quantity-display" value="{{ item.quantity }}" size="1" aria-label="{{ "general.general.quantity" | t }}" />
<label class="number-input-label" for="cart-item-{{ item.id }}">{{ 'general.general.quantity' | t }}</label>
</div>
<div class="number-input-nav">
<div class="number-input-nav-item icon icon-plus cart-item-increase"></div>
<div class="number-input-nav-item icon icon-minus cart-item-decrease"></div>
</div>
</div>
</td>
<td class="cart-item-total cart-item-td">
<div class="cart-item-total-container">
<span class="mobile-only">{{ 'general.general.total' | t }}:</span>
<span class="money">{{ item.quantity | times: item.price | money }}</span>
<a class="cart-item-remove" href="/cart/change?line={{ forloop.index }}&quantity=0">
<span class="icon icon-cross"></span>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="cart-tools">
<div class="cart-totals">
<div class="cart-price-info">
<p class="sub-total">{{ 'general.general.subtotal' | t}}</p>
<p class="cart-price"><span class="money"><span id="bk-cart-subtotal-price"><span id='revy-cart-subtotal-price'><span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>{{ cart.total_price | money }}</span></span></span></p>
<p class="cart-message meta">{{ 'cart.general.tax_and_shipping' | t }}</p>
{% if settings.show-currency-switcher %}
<p class="cart-currency-note meta">{{ 'cart.general.currency_note_html' | t: currency: shop.currency }}</p>
{% endif %}
</div>
<div class="cart-cta">
<input type="submit" name="update" value="{{ 'cart.general.update_button' | t }}" class="button outline cart-button cart-update-button">
<input type="submit" name="checkout" value="{{ 'cart.general.submit' | t }}" class="button secondary inverse cart-button">
<br><br>
<style>
.methods-of-payment img { padding: 0.2em; }
.lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
<img src="{{ 'visa' | payment_type_img_url }}" height="35" alt="Visa" title="Visa" />
<img src="{{ 'master' | payment_type_img_url }}" height="35" alt="Mastercard" title="Mastercard" />
<img src="{{ 'american_express' | payment_type_img_url }}" height="35" alt="American Express" title="American Express" />
<img src="{{ 'discover' | payment_type_img_url }}" height="35" alt="Discover" title="Discover" />
<img src="{{ 'jcb' | payment_type_img_url }}" height="35" alt="JCB" title="JCB" />
<img src="{{ 'diners_club' | payment_type_img_url }}" height="35" alt="Diners Club" title="Diners Club" />
<img src="{{ 'apple_pay' | payment_type_img_url }}" height="35" alt="Apple Pay" title="Apple Pay" />
<img src="{{ 'google_pay' | payment_type_img_url }}" height="35" alt="Google Pay" title="Google Pay" />
<img src="{{ 'shopify_pay' | payment_type_img_url }}" height="35" alt="Shop Pay" title="Shop Pay" />
</span>
</div>
</div>
{% if section.settings.order_notes %}
<div class="cart-instructions">
<p><label for="cart-notes">{{ 'cart.general.instructions_title' | t }}</label></p>
<textarea rows="6" name="note" id="cart-notes" placeholder="{{ 'cart.general.instructions_placeholder' | t }}">{{ cart.note }}</textarea>
</div>
{% endif %}
</div>
</form>
{% if section.settings.show_shipping_calculator and cart.requires_shipping %}
{% include 'shipping-calculator' %}
{% endif %}
{% else %}
<p class="empty">{{ 'cart.general.empty' | t }} <a href="{{ shop.url }}/collections/all">{{ 'cart.general.continue' | t }}</a></p>
{% endif %}
</div>
</div>
</div>
</div>
<script type="application/json" data-cart-strings>
{
"notAvailableText": {{ 'cart.general.not_available'| t | json }},
"stockLevelText": {{ 'cart.general.stock_level' | t: stock_count: '** stock_count **' | json }},
"okayText": {{ 'cart.general.okay' | t | json }}
}
</script>
{% schema %}
{
"name": "Cart page",
"settings": [
{
"type": "checkbox",
"id": "order_notes",
"label": "Enable order notes",
"default": false
},
{
"type": "header",
"content": "Shipping calculator"
},
{
"type": "checkbox",
"id": "show_shipping_calculator",
"label": "Enable",
"default": false
},
{
"type": "text",
"id": "shipping_calculator_default_country",
"label": "Default country",
"default": "United States"
}
]
}
{% endschema %}
Solved! Go to the solution
This is an accepted solution.
Go to the Assets > theme.scss.liquid file and add fllowing code at the end of file:
.cart {
padding-left: 0;
padding-right: 0;
}
Thank you,
Tejas
User | Count |
---|---|
25 | |
23 | |
22 | |
19 | |
11 |