Amanduarte

Site URL: https://www.dogoodlabs.com.au/qantas-copy

Hi team,

Need some help with coding. 

I've created a signup embed form in Mailchimp and added it to my website through code block.

I need to adjust the code so it creates a button before the form appears (exactly as the current button on the page "where should we donate").

On the screenshot: white rectangle form to match top button. 

Code: 

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{
      background:#fff;
      clear:left;
      font:14px Helvetica,Arial,sans-serif; 
      width:600px;
     margin: 0 auto;
      padding: 25px;
      border-radius: 15px;
    }
	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
    <form action="https://dogoodlabs.us4.list-manage.com/subscribe/post?u=aec73f42b3989b36b374e1ca1&amp;id=6f17420f09&amp;f_id=00085ae9f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <h2>Have a say and let us know where we should make our quarterly donations</h2>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group input-group">
    <strong>Where should we donate? </strong>
    <ul><li>
    <input type="checkbox" value="1" name="group[77031][1]" id="mce-group[77031]-77031-0">
    <label for="mce-group[77031]-77031-0">OzHarvest - Feeding People in Need</label>
</li>
<li>
    <input type="checkbox" value="2" name="group[77031][2]" id="mce-group[77031]-77031-1">
    <label for="mce-group[77031]-77031-1">RMHC Australia -Supporting Seriously Ill Children &amp; their Families</label>
</li>
<li>
    <input type="checkbox" value="4" name="group[77031][4]" id="mce-group[77031]-77031-2">
    <label for="mce-group[77031]-77031-2">Lifeline - Supporting Mental Health Services for the Nation</label>
</li>
<li>
    <input type="checkbox" value="8" name="group[77031][8]" id="mce-group[77031]-77031-3">
    <label for="mce-group[77031]-77031-3">All of the above</label>
</li>
</ul>
    <span id="mce-group[77031]-HELPERTEXT" class="helper_text"></span>
</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
	<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</div>
<div hidden="true"><input type="hidden" name="tags" value="6872823"></div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_aec73f42b3989b36b374e1ca1_6f17420f09" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='HIDDEN99F';ftypes[3]='text';fnames[4]='TEXTYUI_3';ftypes[4]='text';fnames[5]='TEXTAREAY';ftypes[5]='text';fnames[6]='HIDDEN6CD';ftypes[6]='text';fnames[7]='HIDDENA5B';ftypes[7]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

Thank you

Quote

You can change the wording of the Add to Cart button for specific products by editing those products. Whilst editing the product, scroll down to the Checkout section and look for the Customize Button option.

Ok, so.. I'm attaching 2 screenshots here so we can better understand the situation.. There's the Shop Page (which shows all products, and each have its price + name + button), and then when we click on one of the products we go to the Checkout Page (where there's a description and additional information of the product)... 

If I proceed to do the way you said, the only button changing is in the Checkout Page (the button says (Choose Flavour), so it doesn't help me, because I need it in the Shop Page instead... Makes sense? Sorry if I'm not explaining better...

Now, squarespace doesn't add a button on the shop page at all.. I've added it through coding (that's why I included the footer injection here).. So what I need in fact is someone to help me with the coding bit..

Thank you again for taking the time to answer! 

Site URL: https://www.teamshakeitup.com.au/shop

Hey all!

I need to change the text of 2 specific buttons on my shop page, I'll add images here to make it easier to understand:

On the attached screenshot, I need the button label of the Game Changer & We got this packs to say: "Choose Flavour" instead of "Add to Cart". All the other products should remain the same. 

Also, this is what's on my Code Injection Footer (if this helps at all):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  .products .grid-item {
    padding-bottom: 80px;
    width: 100% !important;
    
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    min-width: 200px;
    margin: auto;
    font-family: 'cera-pro-regular';
  }
  
  .products .grid-item .sqs-add-to-cart-button:hover {
   font-family: 'cera-pro-black-italic'; 
  }
  


  
</style>

<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add to Cart"><div class="sqs-add-to-cart-button-inner">Add to Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

Any help is appreciated!

Thank you heaps!