Jump to content

studiodelphine

Circle Member
 View Profile  See their activity

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by studiodelphine

    Add icon ( Small logo ) item product description block

    in Site Design & Styles

    Posted

    On 10/12/2020 at 5:45 AM, tuanphan said:

    Add to Home > Settings > Advanced > Code Injection > Footer 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
 jQuery(document).ready(function($) { 
	$('section.ProductItem-additional .code-block').insertAfter(".sqs-add-to-cart-button-wrapper"); 
 }); 
 </script>

     

    Hi @tuanphan I used the above code to move 5 icons to just above the 'Add to Cart' Button. It worked! However, I was wondering if you have any suggestions to reduce the size and have them appear in one single line/row?

    URL: https://west42.squarespace.com/shop/p/style-01-j8hkz-dbh9x-5ze5z-c5x8r-tfdck-96853-xcagf-ez9te-pxp79

    PW: WestFortySecond

    Line break in product name

    in Customize with code

    Posted

    On 9/23/2020 at 2:18 AM, paul2009 said:

    I wrote a guide for this: Split product titles onto two lines with Squarespace.
    This uses pure JavaScript, so is much more efficient and doesn’t require jQuery.

    Hi @paul2009, I just came across your solution/code. It works beautifully, but I'm wondering if it's possible to have a line break in the title on the product detail page. I'd love it if the brand name (lagom studios) could be in a smaller font beneath the product title.

    Any help is much appreciated!1496527049_ScreenShot2022-05-11at2_55_30PM.png.c02bdc54220941cfb4ba9952d03dd3d6.png

    How to add images to product description

    in Customize with code

    Posted

    On 4/8/2021 at 7:47 PM, creedon said: 
    const tagImageUrlMap = {
    
      /*
      
        the format of each line is a tag as appears in the SS Product page
        interface and an image URL
        
        */
        
      // '[enter tag here]' : '[enter image url here]',
      
      'chanvre'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267971684-1IF105OEI4B6XI0W1GDI/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+chanvre',
      'commerce-equitable'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268308127-YQP0SA25LL1AADHITEF0/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/commerce+equitable',
      'coton'               : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267886476-E5GICTULTY5MD5TYV4R4/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Coton+biologique',
      'fabriqu-en-bretagne' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268443787-B3T4GA6W5T3J42ZGRFU1/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+bretagne',
      'fabriqu-en-espagne'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1593073740143-Z91D2AHZCIS8LEZX08YJ/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+espagne',
      // 'fabriqu-en-europe' : '',
      'fabriqu-en-france'   : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268353403-E718QG323BR2BXDO9LV9/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/fabrique+en+france',
      'fibre-ecologique'    : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268001210-E6FPI5559JRED5WO9FCX/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+ecologique',
      'fibre-recycl'        : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1594238143847-J9EJA64CVP6SLXXY965B/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+recycl%C3%A9e',
      'lin'                 : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267922316-KC43DRIHFJX6NNVBIL3T/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+lin',
      'unisexe'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268157736-F20IPEFUQN7AZUAZ6MQA/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Unisexe',
      'upcycling'           : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268178661-YIQLD6FFLL4E5GA2Z15N/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Upcycling',
      
      };

    @creedon Hi – I'm sorry, I'm still having a bit of trouble with this. I removed the old code from Store Settings Header Injection area, added the above code with my tag and image URL...but nothing is happening. Any idea what I did wrong?

    How to add images to product description

    in Customize with code

    Posted

    1 hour ago, creedon said:

    Actually you didn't do anything wrong! Since I wrote the code SS made changes to the product detail pages and the code does not work with product detail pages with layouts other than Simple. Yours appears to be set to Wrap.

    Let me see what I can do to update the code. It may take severals days. If I don't post back, please bump this thread.

    Oh awesome! Happy to hear I didn't do anything wrong!

    Thanks for looking into it – I'll keep an eye out for your response 🙂

    How to add images to product description

    in Customize with code

    Posted

    On 4/8/2021 at 7:47 PM, creedon said:

    @elizamoraes

    Replace my code in Store Settings > Advanced > Page Header Code Injection for the store page with the following.

    The poster has already done the follwing step. If you have not, add the following to Settings > Advanced > Code Injection > HEADER. 

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

    Replace the previous code in Store Settings > Advanced > Page Header Code Injection with the following. 

    <!--

  begin add images to product detail page based on tags
  
  SS Versions     : 7.0, 7.1
  
  v7.0 Templates  : Brine ( Aria, Blend, Cacao, Clay, Fairfield, Feed, Foster,
                    Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt,
                    Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor,
                    Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro,
                    Pursuit, Rally, Rover, Royce, Sofia, Sonora, Stella, Thorne,
                    Vow, Wav, West )
                    
                    your template is not listed? then it is not currently
                    supported
                    
  Notes           : the code is comprised of several tags. all are needed for
                    the full effect to work
                    
                    the images are added at the top of the product details
                    area ( between title and price ) of the product detail page
                    
                    this effect is not active in SS Preview to test it use
                    private browsing < https://bit.ly/3f6lhq2 >.
                    
  -->
  
  <style>
  
    #tc-image-tags img {
    
      width : 100px; /* width of images */
      
      }
      
    </style>
    
  <script>
  
    const tagImageUrlMap = {
    
      /*
      
        the format of each line is a tag as appears in the SS Product page
        interface and an image URL
        
        */
        
      // '[enter tag here]' : '[enter image url here]',
      
      'chanvre'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267971684-1IF105OEI4B6XI0W1GDI/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+chanvre',
      'commerce-equitable'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268308127-YQP0SA25LL1AADHITEF0/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/commerce+equitable',
      'coton'               : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267886476-E5GICTULTY5MD5TYV4R4/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Coton+biologique',
      'fabriqu-en-bretagne' : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268443787-B3T4GA6W5T3J42ZGRFU1/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+bretagne',
      'fabriqu-en-espagne'  : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1593073740143-Z91D2AHZCIS8LEZX08YJ/ke17ZwdGBToddI8pDm48kFBrwAqVMVe6YMvCRUfVHkV7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UbX00RdHGEtHQ765vDpm33fR-nahLRdlIB57_C9H3YJiMW9u6oXQZQicHHG1WEE6fg/Fabrique+en+espagne',
      // 'fabriqu-en-europe' : '',
      'fabriqu-en-france'   : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268353403-E718QG323BR2BXDO9LV9/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/fabrique+en+france',
      'fibre-ecologique'    : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268001210-E6FPI5559JRED5WO9FCX/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+ecologique',
      'fibre-recycl'        : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1594238143847-J9EJA64CVP6SLXXY965B/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+recycl%C3%A9e',
      'lin'                 : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591267922316-KC43DRIHFJX6NNVBIL3T/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Fibre+de+lin',
      'unisexe'             : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268157736-F20IPEFUQN7AZUAZ6MQA/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Unisexe',
      'upcycling'           : 'https://images.squarespace-cdn.com/content/v1/5ebd776421cb6b6024d2aaf8/1591268178661-YIQLD6FFLL4E5GA2Z15N/ke17ZwdGBToddI8pDm48kEBW7z-dDW5qDFwbZpebXfp7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UUXw44irD28DkWYx3-1dwLa4g0PDx-AhloRAoRgIe7QLG6v6ULRah83RgHXAWD5lbQ/Upcycling',
      
      };
      
    </script>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    #tc-image-tags {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -ms-flex-wrap : wrap;
      flex-wrap : wrap;
      
      -webkit-box-pack : center;
      -ms-flex-pack : center;
      justify-content : center;
      
      margin-bottom : 25px;
      margin-top : 0;
      
      }
      
    </style>
    
  <script>
  
    $( ( ) => {
    
      if ( window.frameElement !== null ) return; // bail if in Preview
      
      if ( ! $( '.ProductItem' ).length ) return; // bail if not product detail
      
      const tags = $( '.ProductItem' )
      
        .attr ( 'class' )
        
        .split ( ' ' )
        
        .filter ( clss => clss.startsWith ( 'tag-' ) )
        
        .map ( ( tag ) => {
        
          return tag.slice ( 4 );
          
          } )
          
        .filter ( tag => tagImageUrlMap [ tag ] !== undefined );
        
      const $imageTags = $( '<div id="tc-image-tags">' );
      
      $.each ( tags, function ( i, tag ) {
      
        const url = tagImageUrlMap [ tag ];
        
        $( '<img>' )
        
          .attr ( 'src', url )
          
          .appendTo ( $imageTags );
          
        } );
        
      $imageTags.prependTo ( '.ProductItem-details-checkout' );
      
      } );
      
    </script>
    
  <!-- end add images to product detail page based on tags -->

    This is for v7.0 using the Brine template family and v7.1.

    This code puts the images in a different place than the previous version. Also the layout is different, more suited to the product detail area.

    Let us know how it goes.

    Hi @creedon! Thanks for sharing this. Will you please help me? I know I'm doing something wrong, but I just cannot get your solution to work for me.

    I'd love to be able to have the icons below the product description and above the Qty & Add to Cart Button. But if not, just anywhere in the product description will be fine.

    Website: https://west42.squarespace.com/
    PW: WestFortySecond
    Icons: https://west42.squarespace.com/story

    Please let me know if you need any more information! Thank you!

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources