Add custom text to cart drawer

New Member
8 0 0

Hi Shopify Community, I have a issue with add custom text to my cart and cart drawer.

I want to add some info with delivery in the cart drawer and cart page.

Check the pics, I point out where I want to put the texts:

RRJJ_0-1606296811703.png   

RRJJ_1-1606296845348.png

 

My theme is motion, hope someone could help me, I found cart and cart drawer. liquid, but don't know where to add.

Thanks!

 

0 Likes
Shopify Expert
100 4 9

@RRJJ   can you please share your cart drawer  code I will provide code 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
New Member
8 0 0

Sure, cart drawer:

{% if settings.cart_type == 'drawer' %}
<div id="CartDrawer" class="drawer drawer--right">
<form action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header">
<div class="drawer__header appear-animation appear-delay-1">
<div class="drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>

<div id="CartContainer" class="drawer__inner"></div>

</form>
</div>
{% endif %}

Cart:

<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="{{ routes.cart_url }}" 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 }}" 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.product.has_only_default_variant -%}
<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 small--hide">
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="btn btn--tertiary 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 medium-up--one-third medium-up--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 one-third text-center medium-up--hide">
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="btn btn--no-animate btn--small">
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</div>

<div class="grid__item one-third medium-up--two-thirds text-right">
{% if item.original_line_price != item.final_line_price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="cart__price cart__discount">{{ item.final_line_price | money }}</span>
{% else %}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{% endif %}

{%- if item.line_level_discount_allocations != blank -%}
{%- for discount_allocation in item.line_level_discount_allocations -%}
<small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
{%- endfor -%}
{%- endif -%}

{%- if item.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
<span class="unit-price-base--{{ section_id }}">
{%- if item.unit_price_measurement -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{ item.unit_price_measurement.reference_value }}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<div class="product__unit-price">{{ item.unit_price | money }}/{{ unit_price_base_unit }}</div>
{%- endif -%}
</div>
</div>
</div>

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

<div class="cart__row">
<div class="grid">
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--seven-twelfths">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</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 %}">
{% if cart.cart_level_discount_applications != blank %}
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--text-right">
<p class="h4">{{ 'cart.general.discounts' | t }}</p>
</div>
<div class="grid__item one-half">
{% for cart_discount in cart.cart_level_discount_applications %}
<p class="h4 cart__discount">
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</p>
{% endfor %}
</div>
</div>
{% endif %}
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--text-right">
<p class="h4 cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half">
<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 />
</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 %}

<div class="cart__checkout-wrapper">
<button type="submit" name="update" class="btn btn--no-animate cart__update">
{{ '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>

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

</div>
</div>

</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: url: routes.all_products_collection_url }}</p>
</header>
{% endif %}
</div>
</div>
</div>

Very appreciate for your help!

0 Likes
Shopify Expert
100 4 9

{% if settings.cart_type == 'drawer' %}
<div id="CartDrawer" class="drawer drawer--right">
<form action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header">
<div class="drawer__header appear-animation appear-delay-1">
<div class="drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>

<div id="CartContainer" class="drawer__inner"></div>

</form>
</div>
{% endif %}

Cart:

<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="{{ routes.cart_url }}" 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 }}" 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.product.has_only_default_variant -%}
<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 small--hide">
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="btn btn--tertiary 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 medium-up--one-third medium-up--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 one-third text-center medium-up--hide">
<a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="btn btn--no-animate btn--small">
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</div>

<div class="grid__item one-third medium-up--two-thirds text-right">
{% if item.original_line_price != item.final_line_price %}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<small class="cart__price cart__price--strikethrough">{{ item.original_line_price | money }}</small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="cart__price cart__discount">{{ item.final_line_price | money }}</span>
{% else %}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{% endif %}

{%- if item.line_level_discount_allocations != blank -%}
{%- for discount_allocation in item.line_level_discount_allocations -%}
<small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
{%- endfor -%}
{%- endif -%}

{%- if item.unit_price_measurement -%}
{%- capture unit_price_base_unit -%}
<span class="unit-price-base--{{ section_id }}">
{%- if item.unit_price_measurement -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{ item.unit_price_measurement.reference_value }}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<div class="product__unit-price">{{ item.unit_price | money }}/{{ unit_price_base_unit }}</div>
{%- endif -%}
</div>
</div>
</div>

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

<div class="cart__row">
<div class="grid">
{% if settings.cart_notes_enable %}
<div class="grid__item medium-up--seven-twelfths">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</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 %}">
{% if cart.cart_level_discount_applications != blank %}
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--text-right">
<p class="h4">{{ 'cart.general.discounts' | t }}</p>
</div>
<div class="grid__item one-half">
{% for cart_discount in cart.cart_level_discount_applications %}
<p class="h4 cart__discount">
{{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
</p>
{% endfor %}
</div>
</div>
{% endif %}
<div class="grid grid--full cart__row--table">
<div class="grid__item one-half medium-up--text-right">
<p class="h4 cart__subtotal">{{ 'cart.general.subtotal' | t }}</p>
</div>
<div class="grid__item one-half">
<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 />
</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 %}

<div class="cart__checkout-wrapper">
<button type="submit" name="update" class="btn btn--no-animate cart__update">
{{ '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>

<p> add your text here  replae with current code </p>

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

</div>
</div>

</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: url: routes.all_products_collection_url }}</p>
</header>
{% endif %}
</div>
</div>
</div>

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
New Member
8 0 0

Sorry, where to put my custom text?

0 Likes
Shopify Expert
100 4 9

<p> add your text here  replae with current code </p>  find this text on code  and add yet inside <p> </p>

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
New Member
8 0 0

Thanks, I saw in Cart liquids code with your reply, but didn't see in cart drawer code.

Here is cart drawer code:

 

{% if settings.cart_type == 'drawer' %}
<div id="CartDrawer" class="drawer drawer--right">
<form action="{{ routes.cart_url }}" method="post" novalidate class="drawer__contents">
<div class="drawer__fixed-header">
<div class="drawer__header appear-animation appear-delay-1">
<div class="drawer__title">{{ 'cart.general.title' | t }}</div>
<div class="drawer__close">
<button type="button" class="drawer__close-button js-drawer-close">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'cart.general.close_cart' | t }}</span>
</button>
</div>
</div>
</div>

<div id="CartContainer" class="drawer__inner"></div>

</form>
</div>
{% endif %}

0 Likes
Shopify Expert
100 4 9

fine the <p> tag add inside text

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes