codefordummies

Hi Friederike, 
Colin helped me with this code and it works now!
<style>
.sqs-slice-buttons {
 animation: fade-me-in 5s;
}
@keyframes fade-me-in {
  0% {opacity:0;}
  80% {opacity:0;}
  100% {opacity:1;}
}
</style>
 
Hope it helps 🙂

I believe I do!
@codefordummies Before I point you to 'em let me review the codes. What I'm thinking of is combining several pieces of code into one since they all deal with manipulating the add to cart button.
Give me several days to see what I might come up with. Please feel free to bump this thread if I don't update soon.
If you really need 'em right away they are here in the forum and I can point you to 'em.

Thank you so much for helping me figure all of this out 🙏🏼 it is really appreciated! I'll let you know if I have any subsequent issues 😄

That is pretty much it. Make sure you put the cropped image first in the product detail and also the setting in Styles is set to show the alternate image.
Of course you can test all this out before committing to add all the product images.
Let us know how it goes.

It sounds like it really isn't there. 😞
Hold up. I'm on a new trail. Give me some time to investigate.

This worked wonderfully! Thank you @creedon🤩

I just got a look at your store and found it amazing, how did you manage have the two navigation bars in diferent languages? Thats something i've been trying so hard to achieve and haven't been able.

This is great! Thank you so much! I love learning, so the more info the better! 😄 

Two ways!
The escape character \ (backslash) says ignore the single quote character special meaning and treat is as a regular character.
content : ' Frais d\'Agence';
Use double quotes. Both single and double quotes are used to tell the software that this is the text I want to display between the quotes. So because we are using double quotes the single quote loses it's special meaning when within the double quotes. And you can flip that around. If you need to include a double quote in your display text then surround with singles.
content : " Frais d'Agence";
Probably more than you wanted to know but there ya go.
Let us know how it goes.

@codefordummies
Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.
<style>   body.native-currency-code-cad .sqs-money-native:after {        content : ' Agency Fees';          }        </style> Let us know how it goes.

I updated the CSS in my previous post. Give it a go and let us know how it goes.

Remove or comment out the previous CSS related to changing the empty cart message.
Add the following to Design > Custom CSS.
/* english/french empty cart message */ #cart .empty-message {   display: inline-block;      } #cart .empty-message [data-test="continue-shopping-link"]:after {   content: '\00A0';      } #cart .empty-message:last-child:before {   content: '| ';      } Add the following to Settings > Advanced > Code Injection > HEADER. 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER.
<script>   $( ( ) => {        /* english/french empty cart message */          let $e = $( '#cart' );          if ( ! $e.length ) return;          $e = $( '#cart .empty-message' );          let $c = $e.clone ( )            .find ( 'span:first' )                .html ( 'Votre panier est vide.' )                  .end ( )                .find ( 'a' )                .attr ( 'href', 'https://www.terroir-imports.com/produits' )                  .find ( 'span' )                    .html ( 'Continuez à magasiner' )                      .end ( )                    .end ( );              $e.after ( $c );          } );        </script> Looks like...

Let us know how it goes.

Add the following to Design > Custom CSS.
#cart .XgjsO_M3Y ._3zzV1fDFF span:after { /* column label */ /* price column label */ content: ' | Prix'; } #cart ._225eTv05l ._3zzV1fDFF:before { /* column label */ /* quantity column label */ content: 'Case(s) | Caisse(s)'; } #cart ._225eTv05l ._3zzV1fDFF span { /* column label */ /* quantity column label */ display: none; } #cart ._3qWE9VU-U span:after { /* subtotal label */ content: ' | Sous-total'; } #cart .checkout-button:after { content: ' | Paiement'; }  

I think this one is in the same boat as my previous post. It is dynamic behaviour which needs to be watched with a MutationObserver. MTs basically watch an element for changes and then act upon that change. I've created MTs but as I say it's not just a few lines of code.

Add the following to Store Settings > Advanced > Page Header Code Injection for your french store.
<script>   $( ( ) => {        /* change Quick View to Aperçu rapide */          $( '.sqs-product-quick-view-button' ).html ( 'Aperçu rapide' );          } );        </script>  

This worked out perfectly! Thank you very much @creedon!

Add the following to Store Settings > Advanced > Page Header Code Injection.
<style> .ProductItem-nav { line-height: 1.5em; } .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next .ProductItem-nav-pagination-link-direction, .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev .ProductItem-nav-pagination-link-direction { display: none; } .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--next:after { content: 'Suivant \0020\203A'; } .tweak-product-item-nav-pagination-style-previousnext .ProductItem-nav-pagination-link--prev:before { content: '\2039\0020 Pr\00e9 c\00e9 dent'; } </style> This for v7.0.
Let us know how it goes.

The following css should be added to the Advanced tab of your cover page settings. 
<style> .sqs-slice-buttons { animation: fade-me-in 3s; } @keyframes fade-me-in { 0% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;} } <style>  
There are 2 sections to the code. 
In the first section you set the total length of the fade in, from invisible to fully visible. It is set to 3 seconds above but you can change it. 
In the second section you can define how long the buttons stay invisible before they start to fade in. In the example it is set so that the buttons remain invisible for 80% of the3s animation duration (2.4s invisible) and then fades in over the remaining 0.6s.
 
 

Can you share your modified code?

It looks like the syntax highlighting on this forum also strips the / from tags. 
 I have tweaked the code above, please try again.