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

Adding text to a Product Page


Recommended Posts

  • Replies 47
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add the following to Store Settings > Advanced > Page Header Code Injection. <style> /* begin add store category descriptions */ @media screen and ( min-width: 576px ) {

@Fishlette Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. <style> .ProductList-filter--categories:before {   color: black;

try text-transform: unset;

Posted Images

  • 1 month later...
On 6/2/2020 at 11:15 AM, ZenTrembles said:

I'm trying to do the same thing to my products page.  I tried inserting the code listed above, but it didn't have an effect.  Any ideas?  Thanks!

https://www.zentrembles.com/merch

Add to Page Settings > Advanced > Header

<style>
  div#content:before {
    content: "Tuan Phan";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    font-size: 20px;
    margin-bottom: 50px;
}
</style>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 1 month later...
  • 3 weeks later...
  • 3 weeks later...
On 4/24/2020 at 3:14 PM, tuanphan said:

Add to Home > Design > Custom CSS


div#categoryNav:before {
    content: "Tuan Phan";
    display: block;
    text-align: center;
    font-family: monospace;
    color: white;
    margin-bottom: 20px;
}

 

Hi Tuan.  I was wondering whether you can help me with the same thing for my page: https://www.wtfwad.com/quirky-cottons. I'm trying get some text above the categories so that it's visible to the customers during COVID.

Thanks so much in advance for any help you can offer.

Link to post
  • 1 month later...
  • 3 weeks later...

Hello - I am trying to add a Category Description under the heading title of that category page. Is there any CSS to enable adding a text box in that location? 

In this example (see screenshot below), I would like the text box to go under the first instance of SWEET LEAF so that the customer reads the overall product description under the category heading. I would like that description to change when they click through each of the categories (i.e. Lucinda Tassel, Electric Lady, etc.) 

Here is a link to my client's site. The nature of her products warranted individual product pages for each color combination. We want to keep the product pages clean and eliminate duplicative text in the descriptions. So ideally, there's only one description and that is under the heading title of the category page. 

I hope that makes sense. Greatly appreciate any help!! 

Screen Shot 2020-11-13 at 12.31.57 AM.png

Edited by ACScruggs
Link to post

@ACScruggs

Are you looking for something like the following?

139037818_ScreenShot2020-11-13at12_31_06PM.png.f2b450dd10ca3351e0006d449032979a.png

The font style can be changed with CSS but I'm just checking to make sure this is the target area you want the description.

I think the trick is going to be that as far as I can tell there is no way in CSS alone to know that you are on a category page at the level of where the description I show above is.

Let us know.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

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

<style>

  /* begin add store category descriptions */
  
    @media screen and ( min-width: 576px ) {
    
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title {
      
        margin-bottom: calc( 37px / 2 );
        padding-bottom: 0;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title::after {
      
        all: unset;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-description {
      
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        
        margin-bottom: 37px;
        padding-bottom: calc( 54px / 2 );
        position: relative;
        
        }
        
      .tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-description::after {
      
        border-bottom: 1px solid;
        bottom: 0;
        content: '';
        left: 0;
        opacity: .2;
        position: absolute;
        width: 100%;
        
        }
      }
      
    /* end add store category descriptions */
    
  </style>

<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 */
        
        '/shop/electric-lady'     : 'Harness your inner rock star with this groovy Dust & Sunshine Original Design! Bold as love and flattering to the jaw line, they will perfectly frame that beautiful face of yours. These ladies are no-joke cool. Sure to make a bold statement!',
        '/shop/grand-deco'        : 'Our Grand Deco earrings were the very first in the Dust & Sunshine collection. Born from a love of Art Deco and geometric pattern, designer, Kara Johnson, dreamt up this iconic style. Grand Deco is a true statement piece, yet is wearable for any occasion.',
        '/shop/limited-edition'   : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae. Proin libero nunc consequat interdum varius sit. Potenti nullam ac tortor vitae purus faucibus ornare. Fames ac turpis egestas maecenas pharetra convallis posuere morbi.',
        '/shop/long-songbird'     : 'A little bit country, a little bit rock ‘n roll - think Gypsy Cowgirl. There’s a little spark of magic when you adorn yourself with a striking pair of earrings. These beauties emphasize your natural femininity, and are just the right choice when you’re feeling bold. Show the world that you’re not messin’ around.',
        '/shop/lucinda-tassel'    : 'These effortlessly cool tassel earrings will elevate your style in an instant! Our handmade design shows off why we love leather - natural softness and movement. Jazz up your denim and boots, or wear them with your favorite dress. They go with literally everything and are light as a feather! Go on and shake it, Sugaree!',
        '/shop/petite-deco'       : 'You’ll be livin’ on a high note in our most popular design! The Petite Deco is a smaller version of our flagship earring, the Grand Deco. Like all our styles, each piece is hand-cut, super lightweight and crafted to perfection. Elevated further by quality metal, giving them a truly upscale look.',
        '/shop/short-songbird'    : 'Dust & Sunshine earrings are adored for their stunning color combinations and the Songbird Styles showcase that flawlessly. Flaunt a refined touch of sophistication with this shorter style. They’re sure to become a classic in your jewelry repertoire. Designed and handcrafted with precision, resulting in an overall distinctive beauty.',
        '/shop/sweet-leaf'        : 'Organic elegance, subtle sweetness and versatility. This design showcases the inherently luxurious textures that make leather so attractive. Whether you choose a shimmering metallic or an earthy palette, you’ll find yourself returning to the Sweet Leaf time and again. This style is our most popular for gift-giving.',
        
        // last or only item doesn't get a comma at the end
        
        '/shop/wyoming-wristies'  : 'Saddle-Up with this everyday accessory! These bracelets are loved for their simple attractiveness. Each bracelet utilizes leftover pieces of gorgeous, high-quality leather sourced from Wyoming handbag makers. We use only genuine U.S. tanned leather which ages beautifully and becomes buttery soft over time. Solid brass rings and rivets contrast with supple leather for a timeless look.',
        
        }
        
      // 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>' ).insertAfter ( '.nested-category-title' );
        
      // end add store category descriptions
      
    } );
    
  </script>

This is for a v7.1 site.

You will of course need to extend the code to include the rest of your categories and descriptions.

After you set up for font style for the description take the site into mobile preview and see if there is a problem with the font overlapping the title. If so, let us know and we can see if it can be tweaked.

Let us now how is goes.

Edited by creedon
version 2 of code

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

I suggest testing it out first to see if it works OK on your site. Just put the descriptions in for the two categories there and see how it goes.

If you're not comfortable adding the rest of the code in there I'd be happy to add the rest. I just want to make sure it's going to work before continuing.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

@creedon Gave it a shot and this was the result.... You are absolutely welcome to give it a try on your end. I suppose my only concern is if it gets too complicated if/when updates need to occur in the future. Also, to be frank, I'm just learning a little about coding so I don't know how to target and change the font style in that description. 

Screen Shot 2020-11-13 at 9.51.09 PM.png

Link to post
32 minutes ago, ACScruggs said:

Gave it a shot and this was the result.... You are absolutely welcome to give it a try on your end.

At least we know that it can probably work, we just need to nail down a few styling and spacing issues.

40 minutes ago, ACScruggs said:

I suppose my only concern is if it gets too complicated if/when updates need to occur in the future.

Understandable. As far as the basic structure of the code it shouldn't change much other than adding changing the category descriptions and urlCategoryMappings.

I'm willing to take another run at it. Please let me know if you don't want to pursue this avenue. It will probably be several days until I can get to this again.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

@creedon I'll be working on the site for another week. I'll probably try to find some sort of workaround by early next week. If you're able to by Monday or Tuesday, great, but if not - no sweat!! Really appreciate it. 

 

Link to post
12 hours ago, ACScruggs said:

other ways we can minimize duplicating those descriptions

When you say duplicating are you saying they are already in the site somewhere or that there is only one description for all the categories? If it's the former where? If the later that can be taken care of easily in the code.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Each category (Lucinda tassel, sweet leaf, electric lady, etc) has one main description to describe the style. 
 

Because some categories (aka styles) had more than twenty color combinations, we opted to make each color a single product. Herein lies our issue. We didn’t want one product to have a dropdown menu with twenty color variants. 
 

So if we’re unable to insert the category description on the main shop page when someone toggles through each category, we’ll have to duplicate it by putting it on each product page. (At least that’s the only way I can think of handling it.) 

So on the main shop page, when ALL is highlighted, there wouldn’t be a description for any specific category. Perhaps just text telling the customer to click through each category to read more. 

Once they select a category, the overall description would appear in under the category heading (Lucinda tassel, etc) 

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...