Customize drawer cart

ccmannen
Excursionist
35 0 12

Hi there! I'm trying to add custom text to my drawer cart but I'm not sure where to put the code. Please see the pictures for reference. 

Would also like to add the payment option logos to the bottom in the drawer cart. Where in the cart code should I put it and how should it be structured?

Any possible help is greatly appreciated! 

 

 

rvrrrb.PNG

Skärmklippcs.PNG

Replies 12 (12)
KetanKumar
Shopify Partner
24918 2497 9034

@ccmannen 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ccmannen
Excursionist
35 0 12

Hi, sent you a direct message

KetanKumar
Shopify Partner
24918 2497 9034

@ccmannen 

yes please share CartDrawer code so i will update code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SagarikaDas
Shopify Partner
183 14 64

Hello @ccmannen,

Would you like to try an app (with 60 Days FREE Trial - BFCM Deal) that helps you to fully customize your cart drawer?

With iCart, you can not only offer various discounts to your customers but also you can show upsell, cross-sell in your cart drawer. Please check the reference images.

SagarikaDas_0-1622033786174.png

SagarikaDas_0-1635744268796.png

 

 

 

Sagarika Das | iCart Team
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
ccmannen
Excursionist
35 0 12

@KetanKumar 

 

<div class="page-width page-content">

{% include 'breadcrumbs' %}

<div class="grid">
<div class="grid__item">
{% if cart.item_count > 0 %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</header>



<form action="/cart" method="post" novalidate class="cart">

<div class="cart__row small--hide cart__header-labels">
<div class="grid grid--full">
<div class="grid__item medium-up--two-fifths medium-up--push-three-fifths">
<div class="grid grid--full">
<div class="grid__item one-third small--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item two-thirds small--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>

{% for item in cart.items %}
<div class="cart__row">
<div class="grid grid--full cart__row--table-large">

<div class="grid__item medium-up--three-fifths">
<div class="grid">

<div class="grid__item one-quarter">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{%- assign img_url = item | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ item.aspect_ratio }}"
data-sizes="auto"
alt="{{ item.title | escape }}">
</a>
</div>

<div class="grid__item three-quarters">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<p class="cart__product-meta">
{{ item.variant.title }}
</p>
{% endunless %}

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:

{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}

<br>
{% endunless %}
{% endfor %}
{% endif %}

<p class="cart__product-meta">
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="btn btn--small">
{{ 'cart.general.remove' | t }}
</a>
</p>
</div>

</div>
</div>

<div class="grid__item medium-up--two-fifths">
<div class="grid grid--full cart__row--table">

<div class="grid__item one-third text-center">

<label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
<input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">

</div>

<div class="grid__item two-thirds text-right">
{% if item.original_line_price != item.line_price %}
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
{% endif %}

<span class="cart__price">{{ item.price | money }}</span>

{% assign discounts_size = item.discounts | size %}
{% if discounts_size > 0 %}
{% for discount in item.discounts %}
<small class="cart__discount">{{ discount.title }}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>

</div>
</div>
{% endfor %}






<div class="cart__row">
<div class="grid grid--full cart__row--table-large">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--seven-twelfths">
<div class="cart__note">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<div class="grid__item medium-up--five-twelfths text-center medium-up--text-right{% unless settings.cart_notes_enable %} medium-up--push-seven-twelfths{% endunless %}">
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--two-thirds medium-up--text-center">
<p class="h4 cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half medium-up--one-third">
<p class="h4 cart__subtotal">{{ cart.total_price | money }}</p>
</div>
</div>

{% if cart.total_discounts > 0 %}
{% assign cartTotalDiscounts = cart.total_discounts | money %}
<p class="cart__savings">{{ 'cart.general.savings_html' | t: savings: cartTotalDiscounts }}</p>
{% endif %}
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
{% if settings.enable_currencies %}
{{ 'cart.general.orders_processed_in_currency_html' | t: currency: shop.currency }}
{% endif %}
</small>
{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartPageAgree" />
<label for="CartPageAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}

{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}

<button type="submit" name="update" class="btn btn--no-animate update-cart">
{{ 'cart.general.update' | t }}
</button>
<button type="submit" name="checkout" class="btn btn--no-animate cart__checkout{% if settings.cart_terms_conditions_enable %} cart__checkout--page{% endif %}">
{{ 'cart.general.checkout' | t }}
</button>
</div>
</div>

</div>
<div class="ultimate-badges"></div>
</form>

{% else %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<p>{{ 'cart.general.empty' | t }}</p>
<p class="rte">{{ 'cart.general.continue_browsing_html' | t }}</p>
</header>
{% endif %}
</div>
</div>
</div>

 

KetanKumar
Shopify Partner
24918 2497 9034

@ccmannen 

yes please try this 

<div class="page-width page-content">

{% include 'breadcrumbs' %}

<div class="grid">
<div class="grid__item">
{% if cart.item_count > 0 %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</header>




<form action="/cart" method="post" novalidate class="cart">

<div class="cart__row small--hide cart__header-labels">
<div class="grid grid--full">
<div class="grid__item medium-up--two-fifths medium-up--push-three-fifths">
<div class="grid grid--full">
<div class="grid__item one-third small--half text-center">
{{ 'cart.label.quantity' | t }}
</div>
<div class="grid__item two-thirds small--half text-right">
{{ 'cart.label.total' | t }}
</div>
</div>
</div>
</div>
</div>

{% for item in cart.items %}
<div class="cart__row">
<div class="grid grid--full cart__row--table-large">

<div class="grid__item medium-up--three-fifths">
<div class="grid">

<div class="grid__item one-quarter">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{%- assign img_url = item | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540]"
data-aspectratio="{{ item.aspect_ratio }}"
data-sizes="auto"
alt="{{ item.title | escape }}">
</a>
</div>

<div class="grid__item three-quarters">
<a href="{{ item.url }}" class="h4 cart__product-name">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<p class="cart__product-meta">
{{ item.variant.title }}
</p>
{% endunless %}

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
{{ p.first }}:

{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}

<br>
{% endunless %}
{% endfor %}
{% endif %}

<p class="cart__product-meta">
<a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="btn btn--small">
{{ 'cart.general.remove' | t }}
</a>
</p>
</div>

</div>
</div>

<div class="grid__item medium-up--two-fifths">
<div class="grid grid--full cart__row--table">

<div class="grid__item one-third text-center">

<label for="updates_{{ item.key }}" class="visually-hidden">{{ 'cart.label.quantity' | t }}</label>
<input type="number" name="updates[]" id="updates_{{ item.key }}" class="cart__product-qty" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">

</div>

<div class="grid__item two-thirds text-right">
{% if item.original_line_price != item.line_price %}
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
{% endif %}

<span class="cart__price">{{ item.price | money }}</span>

{% assign discounts_size = item.discounts | size %}
{% if discounts_size > 0 %}
{% for discount in item.discounts %}
<small class="cart__discount">{{ discount.title }}</small>
{% endfor %}
{% endif %}
</div>
</div>
</div>

</div>
</div>
{% endfor %}






<div class="cart__row">
<div class="grid grid--full cart__row--table-large">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--seven-twelfths">
<div class="cart__note">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<p class="freetext">free Text here...</p>
<div class="grid__item medium-up--five-twelfths text-center medium-up--text-right{% unless settings.cart_notes_enable %} medium-up--push-seven-twelfths{% endunless %}">
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--two-thirds medium-up--text-center">
<p class="h4 cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half medium-up--one-third">
<p class="h4 cart__subtotal">{{ cart.total_price | money }}</p>
</div>
</div>

{% if cart.total_discounts > 0 %}
{% assign cartTotalDiscounts = cart.total_discounts | money %}
<p class="cart__savings">{{ 'cart.general.savings_html' | t: savings: cartTotalDiscounts }}</p>
{% endif %}
<small>
{{ 'cart.general.shipping_at_checkout' | t }}<br />
{% if settings.enable_currencies %}
{{ 'cart.general.orders_processed_in_currency_html' | t: currency: shop.currency }}
{% endif %}
</small>
{% if settings.cart_terms_conditions_enable %}
<p class="ajaxcart__note ajaxcart__note--terms">
<input type="checkbox" id="CartPageAgree" />
<label for="CartPageAgree">
{% if settings.cart_terms_conditions_link != blank %}
{{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_link }}
{% else %}
{{ 'cart.general.terms' | t }}
{% endif %}
</label>
</p>
{% endif %}

{% if additional_checkout_buttons and settings.cart_additional_buttons %}
<div class="additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}

<button type="submit" name="update" class="btn btn--no-animate update-cart">
{{ 'cart.general.update' | t }}
</button>
<button type="submit" name="checkout" class="btn btn--no-animate cart__checkout{% if settings.cart_terms_conditions_enable %} cart__checkout--page{% endif %}">
{{ 'cart.general.checkout' | t }}
</button>
</div>
</div>

</div>
<div class="ultimate-badges"></div>
</form>

{% else %}
<header class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
<p>{{ 'cart.general.empty' | t }}</p>
<p class="rte">{{ 'cart.general.continue_browsing_html' | t }}</p>
</header>
{% endif %}
</div>
</div>
</div>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ccmannen
Excursionist
35 0 12

@KetanKumar 

It's the same as before 

KetanKumar
Shopify Partner
24918 2497 9034

@ccmannen 

yes please find this text 

free Text here..

and update as you like  

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ccmannen
Excursionist
35 0 12

@KetanKumar Still not showing actually