How to add text element to account and cart pages?

maxfalkowitz
Tourist
8 0 3

My company is using our online store for retail and wholesale ordering. The url is https://inpursuitoftea.com/ and we're using the Editions theme.

We need to add some custom text to the account and cart pages with basic rich text styling. I have very limited coding experience so am struggling with how to insert text via liquid, and the page builder apps in the app store manage to cover a lot of what we don't need while failing to include these two page formats to edit.

Could someone walk me through how to add text elements like this? 

Replies 9 (9)

KetanKumar
Shopify Partner
36839 3635 11972

@maxfalkowitz 

yes please shore where do you add this text give me screenshot 

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
maxfalkowitz
Tourist
8 0 3

Thank you for the help. Here are the screenshots with the text we want to add. In both cases basic text format is fine, we just don't know how to add this! On the login page, we want the words "email us" to hyperlink to a mailto:info@inpursuitoftea.com. Thank you!

 

Screen Shot 2021-11-01 at 4.52.26 PM.png

Screen Shot 2021-11-01 at 5.09.48 PM.png

KetanKumar
Shopify Partner
36839 3635 11972

@maxfalkowitz 

yes please bot page 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
maxfalkowitz
Tourist
8 0 3

I don't understand what you mean, what is bot code

KetanKumar
Shopify Partner
36839 3635 11972

@maxfalkowitz 

oh sorry 

i mean i need both file 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
maxfalkowitz
Tourist
8 0 3

I'm still not sure I know what you mean, but this is the code under the Sections folder titled static-cart.liquid. 

<script
  type="application/json"
  data-section-type="static-cart"
  data-section-id="{{ section.id }}"
>
</script>

{% assign cart_notes = section.settings.show_cart_notes %}

<div class="cart">
  <div class="cart__header">
    <h1>{{ 'cart.general.title' | t }}</h1>
    {% unless cart.item_count > 0 %}
      <h2>{{ 'cart.general.empty' | t }}</h2>
    {% endunless %}
  </div>
  
  {% if cart.item_count > 0 %}
    <form action="{{ routes.cart_url }}" method="post" class="cart-form">

      {% include 'cart-table' %}

      <div class="cart__footer">

{% if customer.tags contains 'Wholesale' %}
 <div class="cart__notes">
            <label for="cart-notes-area">    
{% if section.settings.cart_notes != blank %}
{{ section.settings.cart_notes }}
{%endif%}
</label>
            <textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
          </div>

{%else%}
        {% if cart_notes %}
          <div class="cart__notes">
            <label for="cart-notes-area">{{ 'cart.general.special_instructions' | t }}</label>
            <textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
          </div>
{% endif %}
{% endif %}
        <div class="cart__totals">
          {% include 'cart-discounts' %}
          <h2 class="cart__subtotal">
            <span class="subtotal">
              {{ 'cart.general.subtotal' | t }}
            </span>
            <span class="money total-price" data-total-price>
              {% unless cart.total_price != wcp_total_price %}
  <span class="wcp-original-cart-total" id="wp_original-cart-total">{{ cart.total_price | money}}</span>
  {% endunless %} 
  
               
                                <span class="wcp-cart-total"></span>
                              <span class="wcp-cart-total_2">{{wcp_total_price  | money }}</span>
            
            </span>           
            <div class="additional-notes">
            <span class="wcp-minimums-note"></span>
            <span class="wcp-extra-note "></span>
          </div>
            
          </h2>
          <button
            class="cart__checkout-button"
            type="submit"
            name="checkout"
            value="{{ 'cart.general.checkout' | t }}"
          >
            
            {% if section.settings.enable_checkout_lock_icon %}
              {% render 'icon-library', id: 'icon-lock' %}
            {% endif %}

            <span>{{ 'cart.general.checkout' | t }}</span>
          </button>

            {% if customer.tags contains 'wpdnet' %}
          {% if shop.metafields.wcp_net.isNetEnabled == 'true' or shop.metafields.wcp_net.isNetEnabled == '1' %}
        <div style="margin-top:30px;">
                              <p>{{shop.metafields.wcp_net.netCartMsg}}</p>
                              <a id="wcp-30-open" class="customer-login__submit">
                               {{shop.metafields.wcp_net.netBtnMsg}}
                              </a>
                            </div>
          {% endif %}
  {% endif %}
          
          {% if additional_checkout_buttons %}
            <div class="additional-checkout-buttons">
              {{ content_for_additional_checkout_buttons }}
            </div>
          
          	<script>
					 var v = setInterval(function()
					{
							 if(typeof window.wcp_data != 'undefined' && typeof window.wcp_data.discounted_hash != 'undefined')
					{
							if((window.wcp_data.discounted_hash.discount_value || window.wcp_data.discounted_hash.shipping) 
						&& $('.additional-checkout-buttons').children(':visible').length > 0)
					{
						$('.additional-checkout-buttons').html("Other payment options are available at checkout");
						 clearInterval(v);
					}

					}  
					},500);                 

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

    </form>
  {% endif %}

  {% if section.settings.use_continue_shopping %}
       <a href="/" class="cart__continue-shopping">
         {{ 'general.continue_shopping' | t }} &rarr;
       </a>
  {% endif %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

                                  <style>
    .wcp-cart-total_2 { display:none } 
  </style>
  <script>
      function hide_wcp_total(){
      var check = $('.wcp-cart-total').text();
        
if(check.length > 2 || $('#wp_original-cart-total').length != 0 ){
$('.wcp-cart-total_2 ').hide();
 $('#wcp-30-open').on('click',function(){
    $('.net-order-prices s').hide();
      $('.net-order-prices .wcp-original-cart-total').hide();  
      });
}else{
$('.wcp-cart-total_2 ').show();
}
    }
    
     var timesRun = 0;
        var interval = setInterval(function(){
          timesRun += 1;
          if(timesRun === 10){
              clearInterval(interval);
          }
          hide_wcp_total();
          
      }, 1000); 
        
  
  </script>

      <script>
      $('#wcp-30-open').on('click',function(){
    $('.net-order-prices s').hide();
      $('.net-order-prices .wcp-original-cart-total').hide();  
      });
    
    </script>


{% schema %}
{
  "name": "Cart",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_checkout_lock_icon",
      "label": "Show lock icon on checkout button",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_cart_notes",
      "label": "Enable order notes"
    },
    {
      "type": "checkbox",
      "id": "use_continue_shopping",
      "label": "Show 'continue shopping' button"
    },
{
      "type": "text",
      "id": "cart_notes",
      "label": "whole sale cart note"
    }

  ]
}

{% endschema %}

And this is customers/login.liquid:

<div class="login-page">
  <div id="login" class="login-page__login">
    <div class="login-page__header">
      <h1 class="login-page__heading">{{ 'customer.login.header' | t }}</h1>

      {% if shop.checkout.guest_login %}
        {% form 'guest_login' %}
          <button
            class="login-page__guest-login"
            type="submit"
          >
            {{ 'customer.login.guest_checkout' | t }}
            {% include 'icon-library', id: 'icon-arrow-right' %}
          </button>
        {% endform %}
      {% endif %}
    </div>

    {% form 'customer_login', class: 'customer-login' %}
      {{ form.errors | default_errors }}

      <div class="customer-email">
        <label class="customer-email__label" for="customer-email">{{ 'general.email' | t }}</label>
        <input class="customer-email__input" id="customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]">
      </div>

      <div class="customer-password">
        <label class="customer-password__label" for="customer-password">{{ 'customer.password' | t }}</label>
        <input class="customer-password__input" id="customer-password" type="password" value="" name="customer[password]">
        <button class="customer-password__recover-password" type="button" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot' | t }}</button>
      </div>

      <button class="customer-login__submit" type="submit">{{ 'customer.login.login_submit' | t }}</button>

      <a class="customer-login__register" href="{{ routes.account_register_url }}">{{ 'customer.login.sign_up' | t }}</a>
    {% endform %}
  </div>

  <div id="recover-password" class="login-page__recover-password" style="display: none">
    <div class="login-page__header">
      <h1 class="login-page__heading">{{ 'customer.password_reset.title' | t }}</h1>
      <span class="login-page__subheading">{{ 'customer.password_reset.message' | t }}</span>
    </div>

    {% form 'recover_customer_password', class: 'customer-recover-password' %}
      {{ form.errors | default_errors }}

      <div class="customer-email">
        <label class="customer-email__label" for="recover-customer-email">{{ 'general.email' | t }}</label>
        <input class="customer-email__input" id="recover-customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="email">
      </div>

      <div class="customer-recover-password__actions">
        <button class="customer-recover-password__submit" type="submit">{{ 'customer.password_reset.submit' | t }}</button>
        <button class="customer-recover-password__cancel" type="button" onclick="hideRecoverPasswordForm()">{{ 'customer.cancel' | t }}</button>
      </div>
    {% endform %}
  </div>
</div>

<script type="text/javascript">
  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'block';
    document.getElementById('login').style.display='none';
    window.location.hash = '#recover';
    return false;
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('login').style.display = 'block';
    return false;
  }
</script>
KetanKumar
Shopify Partner
36839 3635 11972

@maxfalkowitz 

great thanks for code can you please find this text and update your Custom Text Here...

customers/login.liquid

<div class="login-page">
  <div id="login" class="login-page__login">
    <div class="login-page__header">
      <h1 class="login-page__heading">{{ 'customer.login.header' | t }}</h1>
    <p class="custom-text"><div class="login-page">
  <div id="login" class="login-page__login">
    <div class="login-page__header">
      <h1 class="login-page__heading">{{ 'customer.login.header' | t }}</h1>

      {% if shop.checkout.guest_login %}
        {% form 'guest_login' %}
          <button
            class="login-page__guest-login"
            type="submit"
          >
            {{ 'customer.login.guest_checkout' | t }}
            {% include 'icon-library', id: 'icon-arrow-right' %}
          </button>
        {% endform %}
      {% endif %}
    </div>

    {% form 'customer_login', class: 'customer-login' %}
      {{ form.errors | default_errors }}

      <div class="customer-email">
        <label class="customer-email__label" for="customer-email">{{ 'general.email' | t }}</label>
        <input class="customer-email__input" id="customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]">
      </div>

      <div class="customer-password">
        <label class="customer-password__label" for="customer-password">{{ 'customer.password' | t }}</label>
        <input class="customer-password__input" id="customer-password" type="password" value="" name="customer[password]">
        <button class="customer-password__recover-password" type="button" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot' | t }}</button>
      </div>

      <button class="customer-login__submit" type="submit">{{ 'customer.login.login_submit' | t }}</button>

      <a class="customer-login__register" href="{{ routes.account_register_url }}">{{ 'customer.login.sign_up' | t }}</a>
    {% endform %}
  </div>

  <div id="recover-password" class="login-page__recover-password" style="display: none">
    <div class="login-page__header">
      <h1 class="login-page__heading">{{ 'customer.password_reset.title' | t }}</h1>
      <span class="login-page__subheading">{{ 'customer.password_reset.message' | t }}</span>
    </div>

    {% form 'recover_customer_password', class: 'customer-recover-password' %}
      {{ form.errors | default_errors }}

      <div class="customer-email">
        <label class="customer-email__label" for="recover-customer-email">{{ 'general.email' | t }}</label>
        <input class="customer-email__input" id="recover-customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="email">
      </div>

      <div class="customer-recover-password__actions">
        <button class="customer-recover-password__submit" type="submit">{{ 'customer.password_reset.submit' | t }}</button>
        <button class="customer-recover-password__cancel" type="button" onclick="hideRecoverPasswordForm()">{{ 'customer.cancel' | t }}</button>
      </div>
    {% endform %}
  </div>
</div>

<script type="text/javascript">
  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'block';
    document.getElementById('login').style.display='none';
    window.location.hash = '#recover';
    return false;
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('login').style.display = 'block';
    return false;
  }
</script></p>
      {% if shop.checkout.guest_login %}
        {% form 'guest_login' %}
          <button
            class="login-page__guest-login"
            type="submit"
          >
            {{ 'customer.login.guest_checkout' | t }}
            {% include 'icon-library', id: 'icon-arrow-right' %}
          </button>
        {% endform %}
      {% endif %}
    </div>

    {% form 'customer_login', class: 'customer-login' %}
      {{ form.errors | default_errors }}

      <div class="customer-email">
        <label class="customer-email__label" for="customer-email">{{ 'general.email' | t }}</label>
        <input class="customer-email__input" id="customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="customer[email]">
      </div>

      <div class="customer-password">
        <label class="customer-password__label" for="customer-password">{{ 'customer.password' | t }}</label>
        <input class="customer-password__input" id="customer-password" type="password" value="" name="customer[password]">
        <button class="customer-password__recover-password" type="button" onclick="showRecoverPasswordForm()">{{ 'customer.login.forgot' | t }}</button>
      </div>

      <button class="customer-login__submit" type="submit">{{ 'customer.login.login_submit' | t }}</button>

      <a class="customer-login__register" href="{{ routes.account_register_url }}">{{ 'customer.login.sign_up' | t }}</a>
    {% endform %}
  </div>

  <div id="recover-password" class="login-page__recover-password" style="display: none">
    <div class="login-page__header">
      <h1 class="login-page__heading">{{ 'customer.password_reset.title' | t }}</h1>
      <span class="login-page__subheading">{{ 'customer.password_reset.message' | t }}</span>
    </div>

    {% form 'recover_customer_password', class: 'customer-recover-password' %}
      {{ form.errors | default_errors }}

      <div class="customer-email">
        <label class="customer-email__label" for="recover-customer-email">{{ 'general.email' | t }}</label>
        <input class="customer-email__input" id="recover-customer-email" type="email" placeholder="{{ 'general.email_placeholder' | t }}" value="{{ form.email }}" name="email">
      </div>

      <div class="customer-recover-password__actions">
        <button class="customer-recover-password__submit" type="submit">{{ 'customer.password_reset.submit' | t }}</button>
        <button class="customer-recover-password__cancel" type="button" onclick="hideRecoverPasswordForm()">{{ 'customer.cancel' | t }}</button>
      </div>
    {% endform %}
  </div>
</div>

<script type="text/javascript">
  if (window.location.hash == '#recover') { showRecoverPasswordForm() }

  function showRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'block';
    document.getElementById('login').style.display='none';
    window.location.hash = '#recover';
    return false;
  }

  function hideRecoverPasswordForm() {
    document.getElementById('recover-password').style.display = 'none';
    document.getElementById('login').style.display = 'block';
    return false;
  }
</script>

 

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
KetanKumar
Shopify Partner
36839 3635 11972

@maxfalkowitz 

great thanks for code can you please find this text and update your Custom Text Here...
static-cart.liquid. 

<script
  type="application/json"
  data-section-type="static-cart"
  data-section-id="{{ section.id }}"
>
</script>

{% assign cart_notes = section.settings.show_cart_notes %}

<div class="cart">
  <div class="cart__header">
    <h1>{{ 'cart.general.title' | t }}</h1>
    {% unless cart.item_count > 0 %}
      <h2>{{ 'cart.general.empty' | t }}</h2>
    {% endunless %}
  </div>
  
  {% if cart.item_count > 0 %}
    <form action="{{ routes.cart_url }}" method="post" class="cart-form">

      {% include 'cart-table' %}
 <div class="cart__text"><p class="custom-text"><div class="login-page"></div>
      <div class="cart__footer">

{% if customer.tags contains 'Wholesale' %}
 <div class="cart__notes">
            <label for="cart-notes-area">    
{% if section.settings.cart_notes != blank %}
{{ section.settings.cart_notes }}
{%endif%}
</label>
            <textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
          </div>

{%else%}
        {% if cart_notes %}
          <div class="cart__notes">
            <label for="cart-notes-area">{{ 'cart.general.special_instructions' | t }}</label>
            <textarea class="styled-text-field" id="cart-notes-area" name="note">{{ cart.note }}</textarea>
          </div>
{% endif %}
{% endif %}
        <div class="cart__totals">
          {% include 'cart-discounts' %}
          <h2 class="cart__subtotal">
            <span class="subtotal">
              {{ 'cart.general.subtotal' | t }}
            </span>
            <span class="money total-price" data-total-price>
              {% unless cart.total_price != wcp_total_price %}
  <span class="wcp-original-cart-total" id="wp_original-cart-total">{{ cart.total_price | money}}</span>
  {% endunless %} 
  
               
                                <span class="wcp-cart-total"></span>
                              <span class="wcp-cart-total_2">{{wcp_total_price  | money }}</span>
            
            </span>           
            <div class="additional-notes">
            <span class="wcp-minimums-note"></span>
            <span class="wcp-extra-note "></span>
          </div>
            
          </h2>
          <button
            class="cart__checkout-button"
            type="submit"
            name="checkout"
            value="{{ 'cart.general.checkout' | t }}"
          >
            
            {% if section.settings.enable_checkout_lock_icon %}
              {% render 'icon-library', id: 'icon-lock' %}
            {% endif %}

            <span>{{ 'cart.general.checkout' | t }}</span>
          </button>

            {% if customer.tags contains 'wpdnet' %}
          {% if shop.metafields.wcp_net.isNetEnabled == 'true' or shop.metafields.wcp_net.isNetEnabled == '1' %}
        <div style="margin-top:30px;">
                              <p>{{shop.metafields.wcp_net.netCartMsg}}</p>
                              <a id="wcp-30-open" class="customer-login__submit">
                               {{shop.metafields.wcp_net.netBtnMsg}}
                              </a>
                            </div>
          {% endif %}
  {% endif %}
          
          {% if additional_checkout_buttons %}
            <div class="additional-checkout-buttons">
              {{ content_for_additional_checkout_buttons }}
            </div>
          
          	<script>
					 var v = setInterval(function()
					{
							 if(typeof window.wcp_data != 'undefined' && typeof window.wcp_data.discounted_hash != 'undefined')
					{
							if((window.wcp_data.discounted_hash.discount_value || window.wcp_data.discounted_hash.shipping) 
						&& $('.additional-checkout-buttons').children(':visible').length > 0)
					{
						$('.additional-checkout-buttons').html("Other payment options are available at checkout");
						 clearInterval(v);
					}

					}  
					},500);                 

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

    </form>
  {% endif %}

  {% if section.settings.use_continue_shopping %}
       <a href="/" class="cart__continue-shopping">
         {{ 'general.continue_shopping' | t }} &rarr;
       </a>
  {% endif %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

                                  <style>
    .wcp-cart-total_2 { display:none } 
  </style>
  <script>
      function hide_wcp_total(){
      var check = $('.wcp-cart-total').text();
        
if(check.length > 2 || $('#wp_original-cart-total').length != 0 ){
$('.wcp-cart-total_2 ').hide();
 $('#wcp-30-open').on('click',function(){
    $('.net-order-prices s').hide();
      $('.net-order-prices .wcp-original-cart-total').hide();  
      });
}else{
$('.wcp-cart-total_2 ').show();
}
    }
    
     var timesRun = 0;
        var interval = setInterval(function(){
          timesRun += 1;
          if(timesRun === 10){
              clearInterval(interval);
          }
          hide_wcp_total();
          
      }, 1000); 
        
  
  </script>

      <script>
      $('#wcp-30-open').on('click',function(){
    $('.net-order-prices s').hide();
      $('.net-order-prices .wcp-original-cart-total').hide();  
      });
    
    </script>


{% schema %}
{
  "name": "Cart",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_checkout_lock_icon",
      "label": "Show lock icon on checkout button",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_cart_notes",
      "label": "Enable order notes"
    },
    {
      "type": "checkbox",
      "id": "use_continue_shopping",
      "label": "Show 'continue shopping' button"
    },
{
      "type": "text",
      "id": "cart_notes",
      "label": "whole sale cart note"
    }

  ]
}

{% endschema %}
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

sallyjohnson
Explorer
182 2 6

Hey there, this could only be done in your situation by custom coding you can just directly go to the cart page code and and account page code and you can just simply paste your required text at that place where you want to have it. first try to inspect that pages and paste your text temporarily there and after confirmation of the exact location you can simply go to the code of the that particular page. and you can use h1 or h2 tag for heading and "style" attribute for styling your text. i hope this would help you and you can also search it on youtube and you will definitely find a complete procedure to do it.

 

By the way, if you want to build custom landing pages then i would suggest you to try Layoutbase shopify landing page Builder (https://apps.shopify.com/layoutbase-pagebuilder).

Thanks

Sally Johnson - Layoutbase.com Ambassador