Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Adding text to a Product Page


steve6

Recommended Posts

  • 3 weeks later...

Hello, I'm trying to do the same thing, but I"m not on version 7.1. I'm on Bryant Template 7.0. I've tried using the code, but it's not seeming to work.  I've attached a screenshot of what I'm looking for.  I'm doing a site redo with the new template, so my client's current visible site is viennacoffeecompany.com but that is with dovetail. It would be so helpful if you could direct me in the right direction on how to add a description to each category on the product pages. Thanks so much in advance!! 

Screen Shot 2020-12-21 at 4.32.58 PM.png

Link to comment
58 minutes ago, JaCDesign said:

Hello, I'm trying to do the same thing, but I"m not on version 7.1. I'm on Bryant Template 7.0. I've tried using the code, but it's not seeming to work.

If you change the line from my Nov 13th post...

'</div>' ).insertAfter ( '.nested-category-title' );

...to...

'</div>' ).prependTo ( '#content' );

That should get the description to display. The CSS from that post won't do you any good as it was designed for that specific template/site. You'll need to work up some new CSS to style the description.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

@creedon Thanks for your response. I'll have to say I'm not the best at coding, but just trying to understand I put this code (took out the style section. I'll have to figure that out somehow) into advanced<code injection<header

<script>

  $( ( ) => {
  
    // begin add store category descriptions
    
      const urlCategoryDescriptionMappings = {
      
                                    /* if the description has single quotes in it
                                       then put a backslash before the single
                                       quotes. example: it's becomes it\'s */
        
        '/coffeegroup?category=decaf'     : 'trial trial.',
        
        '/coffeegroup?category=blends'        : 'blends trial',
        
        
        // last or only item doesn't get a comma at the end
        
        '/coffeegroup?category=single+origin'  : 'single origin trial.'
        
        }
        
      // do not change anything below, there be the borg here
      
      if ( location.pathname == '/shop' ) return;
      
      if ( ! location.pathname in urlCategoryDescriptionMappings ) return;
      
      const categoryDescription = $( '<div>' )
      
        .text ( urlCategoryDescriptionMappings [ location.pathname ] )
        
        .html ( );
        
      $( '<div class="nested-category-description">' +
      
        '<p>' +
        
          categoryDescription +
          
          '</p>' +
          
        '</div>' ).prependTo ( '#content' );

        
      // end add store category descriptions
      
    } );
    
  </script>

 

If that is accurate, then unfortunately it's not showing. I may have done it wrong since mine are categories and not actually pages, but I thought she had described categories but it looks like maybe they were pages?

Link to comment
  • 3 weeks later...
  • 2 weeks later...
On 1/9/2021 at 12:01 AM, creedon said:

@JaCDesign

I think I may have a solution but it would be most helpful if I could see the new site to test my code.

If your new site is not public please set up a site-wide password, if you've not already done so. Post the password here.

I can then test my code.

Sorry to just now seeing this! I had to take off the code that I tried because something was messing up our categories, and Squarespace help told me to remove it just in case that was what was causing the issue. 

The new website is being created just on the backend of our current live website. It's under a new template. I won't be able to put a sitewide password onto the website. Is there another way to test the code you created. Thanks soooo sooooo much for your time on this!!

Link to comment
On 1/21/2021 at 3:27 AM, brendamadethis said:

Hi! I'm trying to add one line right underneath the page title on my Shop and tried using the codes provided in this thread without any success.

Any chance someone could give me hand? @tuanphan

This is what I'm hoping for it to look like:

My site is brendamadethis.squarespace.com and password is "brendamadethis".

Thanks!

Screen Shot 2021-01-20 at 3.25.38 PM.png

Add to Shop Page Header

<style>
  h2.nested-category-title:after {
    content: "tuanphan";
    display: block;
    font-size: 1.2rem;
    font-family: Cormorant Garamond;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 1/20/2021 at 9:02 PM, JaCDesign said:

Sorry to just now seeing this! I had to take off the code that I tried because something was messing up our categories, and Squarespace help told me to remove it just in case that was what was causing the issue. 

The new website is being created just on the backend of our current live website. It's under a new template. I won't be able to put a sitewide password onto the website. Is there another way to test the code you created. Thanks soooo sooooo much for your time on this!!

You can duplicate your site & test there.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
On 1/22/2021 at 5:32 PM, tuanphan said:

You can duplicate your site & test there.

I just tried to duplicate, and it says we have 100 pages, so I can't. 😞 I have no idea how we have 100 pages. Do they include products as pages? We definitely don't have 100 pages, but if you include our products then we might. Do you have any other suggestions by any chance?

Link to comment

Hi! I'm trying to add a description below my Subcategory name, when it appears at the top of my products page. I've tried all of the options above, with no success. I'm using version 7.1 (Template: Classon).

I'd really appreciate an alternative way of solving this problem. 

Thank you very much in advance.

Link to comment
On 1/22/2021 at 5:32 PM, tuanphan said:

You can duplicate your site & test there.

@tuanphan and @creedon I was finally able to duplicate site. The rest of the duplicate site is not accurate, but I updated the shop<coffee page to be the accurate style, so we can test the code. 

 Sorry for the delay. Thanks for your help with this. Please let me know if this is what you need from me. 

YOUR WEBSITE:
YOUR LOGIN EMAIL ADDRESS:
pass: VCCte$t2
Link to comment

@JaCDesign

Add the following to Settings > Advanced > Code Injection > HEADER. If you've not already done so.

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

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<script>

  $( ( ) => {
  
    /*
    
      begin add store category page description
      
      SS Version : 7.0
      Templates  : Avenue
                   Bedford ( Anya, Bryant, Hayden )
                   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
                   
      */
      
    const storeUrlSlug = 'coffeegroup'; /* copy value here from Store Settings >
                                           General > URL SLUG field. you only
                                           need exactly what can be selected
                                           from the field */
    
    const categoryDescriptionMappings = {
    
                        /* if the description has single quotes in it then put a
                           backslash before the single quotes. example: it's
                           becomes it\'s */
      
      'Decaf'         : 'trial trial.',
      
      'Blends'        : 'blends trial',
      
      // last or only item doesn't get a comma at the end
      
      'Single+Origin' : 'single origin trial.'
      
      };
      
    // do not change anything below, there be the borg here
    
    // are we on the store page, if not bail
    
    if ( location.pathname !== '/' + storeUrlSlug ) return;
    
    // are we on a category page, if not bail
    
      const searchParams = new URLSearchParams ( location.search );
      
      const category = searchParams.get ( 'category' );
      
      if ( category == null ) return;
      
    // has a category been defined by the user, if not bail
    
    if ( ! ( category in categoryDescriptionMappings ) ) return;
    
    // can we get a template id, if not bail
    
      let templateId;
      
      try { templateId = Static.SQUARESPACE_CONTEXT.templateId } catch {
      
        return };
        
    // is the template id one we support, if not bail
    
      const templateIds = {
      
        '4fd11f32c4aad9b01c9e624c' : { // Avenue
        
          insertBeforeSelector : '#productList'
          
          },
          
        '52a74dafe4b073a80cd253c5' : { // Bedford family
        
          insertBeforeSelector : '#productList'
          
          },
          
        '55f0aac0e4b0f0a5b7e0b22e' : { // Brine family
        
          insertBeforeSelector : '.ProductList-grid'
          
          }
        }
        
      if ( ! ( templateId in templateIds ) ) return;
      
    // add the category description
    
    $( '<div class="tc-category-description">' +
    
      '<p>' +
      
        categoryDescriptionMappings [ category ] +
        
        '</p>' +
        
      '</div>' )
      
      .insertBefore ( templateIds [ templateId ].insertBeforeSelector );
      
    // end add store category page description
    
    } );
    
  </script>

This is for v7.0 site and works with several templates.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Hiya @creedon,

 

I was hoping you could help me with creating url slugs for tabs on the same page? I have attached some screenshots to aid the explanation below. 

 

I have a page with multiple tabs that present different information, as shown, ‘returns policy’, ‘warranty’, ‘shipping’ & ’T&Cs’. 

 

In my footer I want a link to each one of these tabs, so when you click on the ‘warranty’ link in the footer it takes you to the ‘Warranty’ tab and its 697041726_ScreenShot2021-02-04at10_10_08.thumb.png.dc0f7c024a8cfe2ec8f5a5d642b909ba.pngrespective information rather than the page itself, which defaults to the first tab shown, ‘returns policy’.

 

Thanks so much for your help! 

 

Site URL: https://greyhound-alpaca-f863.squarespace.com/support

password: alpaca

Screen Shot 2021-02-04 at 10.10.21.png

Link to comment
  • 1 month later...

@creedon@tuanphanThank you both so much for everything you have given to the site - I have used your comments so many times!

I have a question of my own because on this topic I can't seem to make your codes work.

I have two categories in my shop, and I would like to add a description beneath the title of each category page (a different one for each category). I have set up a dropdown menu like this  
image.png.2100ee077b6306f3e7feace5c92fac8a.png
'Classic' page is a description.  

Then Baron La Croix and Voir Les Anges are links to product category pages where I would like a separate description on each page under the titles.

I am using v. 7.1 and I have tried your code in the shop settings (and chawed the links to work for my site) but I can't seem to get it working. 

If you had any advice I would be so grateful (I am definite an amateur - this is my first website I'm trying to 'build'!).

Thank you.

Steve

 

Link to comment

@SteveVern

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...