Jump to content

AnnaRadzicki

Member
  • Posts

    27
  • Joined

  • Last visited

Posts posted by AnnaRadzicki

  1. 7 hours ago, tuanphan said:

    Which exact code you use to create this?

     

    nav.header-nav-list {
        display: flex;
        width: 100%;
        border-top: 5px solid #FF3120;
        border-bottom: 5px solid #FF3120;
        background-color: #FF3120;
    }

  2. Site URL: https://kalglo.com

    I added some custom code to get this red strip across the top of our website. Recently though, every time the website loads a page ( even bouncing from one page to another) it has a white line in between and then loads normally. I attached a photo of what is looks like before it fully loads, and what It looks like after ( i would like to only have the after). 

    Is there any code or changes needed in my current code that can fix this problem, I am somewhat at a dead end here. 

     

    Thank you!Capture001.thumb.png.7ee90bd1e1e2740135c64b9cec0c1e69.png

    Capture001.png

  3. Site URL: https://kalglo.com

    I purchased a mega menu plug in from : https://www.will-myers.com/, and I am try to adjust the size of the drop down width. 

    The content was added into the footer, but the drop down itself takes up 100% of the screen, and this looks really weird for how little is in the FAQ dropdown (attached) . Is there anyway to make it adaptive to how much content is inside the menu? or if not, at least just make it smaller in general? 

     

    Thank you!Capture001.thumb.png.41329fa90fb7a82b2e897904e5210b00.png

  4. 13 minutes ago, tuanphan said:

    Use this code under #6 code

    <style>
      div.ProductItem-details-excerpt .gallery-block * {
      	color: #f1f !important;
      }
    </style>

     

    I know this is a little bit different but I have tried almost everything to no avail. 

    I am looking to have 4 icons in total with text below like the attached snippet. Each icon has an underlining hover effect, and when clicked on a light box pops up. Is anything like this possible ? 

     

    URL: https://www.kalglo.com/

     

    Screenshot 2024-09-25 100642.png

  5. On 9/19/2024 at 4:54 AM, tuanphan said:

    To add Icons under Product Description, you can follow these steps.

    image.png.3872cb91980dc8012dff3ff3b5276042.png

    #1. First, edit Product > Additional Info

    image.png.e9ccf4e7118db328fcb2c867e3e3167e.png

    #2. Add a Gallery Block

    image.thumb.png.6ddc3b947c321af51b2dd606f55c4569.png

    #3. Upload your desired icons

    image.png.2cbdff0d4fe9de4f8b78a95c5c7db24b.png

    #4. You can click Gear icon if you want to add text under icon

    image.png.51f67ae789a3ecb276c0b8e48b0741ee.png

    Then enter text in Title box

    image.png.1654e1059c00e117bf2909737aaa90fa.png

    #5. Next, choose Grid/Show Title to make text appear under icon

    image.png.c47cd54793d9df3d03d21d56355a24b8.png

    #6. Use this code to Website Tools > Code Injection > Footer

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('section.ProductItem-additional .gallery-block').appendTo('div.ProductItem-details-excerpt');
    });
    </script>

    image.png.0dd8dc77c5b6f2fe8d5251f8fc12b57f.png

    #7. Result

    image.png.3872cb91980dc8012dff3ff3b5276042.png

    Is there anyway to change the text color? 

    Thank you!

     

  6. 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.

    Please see Store Product Detail Page Add Images Based on Tags.

    For the tagImageUrlMap constant set it thusly.

        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',
          
          };
    

    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.

    I tried this with 7.1 but the code loads on the header first, then disappears with no image? 

  7. Truthfully, something is going on with all my uploaded photos, but i can always reupload them without an issue. With the products though, when i reupload its still leaving this white box 

  8. Site URL: https://kalglo.com

    I don't understand what is happening, but this morning I woke up and on my phone you can see all the photos for my products but not on my desktop. I reuploaded my product photos, but its acting like their is a a "white block" type photo. When I go into edit product, it doesn't show any photos can be deleted by there is a gap in between the reuploaded photo. Attached is a photo of what it looks like on my phone, desktop, and the edit product. I had a photo uploaded into additional info, that has just a green landscape, and when i right click and as to open image in a new tab, it cannot find that url??? Any help would be so helpful!!

     

     

     

     

    Capture001.thumb.png.f3da653590bd52301ba27b01ca1d4f6a.png

    Capture0.png

    Capture001.png

    Capture001.png

    Capture001.png

  9. On 8/19/2024 at 10:33 AM, Christa1024 said:

    I really need help with this if anyone is out there. 

    Okay so after HOURS of searching for an answer, I found a solution!!! 

    Fill this code out with your business information, it currently has the company information for Kalglo, so adjust your information as needed. Business name, address, hours, etc. 

    <script>
      document.addEventListener("DOMContentLoaded", function() {
        var elements = document.querySelectorAll('script[type="application/ld+json"]');
        elements.forEach(function(element) {
          try {
            var jsonData = JSON.parse(element.innerHTML);

            // Update LocalBusiness schema
            if (jsonData['@type'] === 'LocalBusiness') {
              if (!jsonData.name || jsonData.name === "") {
                jsonData.name = "Kalglo";
              }
              if (!jsonData.url || jsonData.url === "") {
                jsonData.url = "https://www.kalglo.com";
              }
              if (!jsonData.logo || jsonData.logo === "") {
                jsonData.logo = "https://images.squarespace-cdn.com/content/v1/660c4e785b13d204bb3dfc63/f5f5b942-da83-4772-b834-ea447cefeb4c/kalglo+logog.gif?format=1500w";
              }
              if (!jsonData.address || jsonData.address === "") {
                jsonData.address = {
                  "@type": "PostalAddress",
                  "addressLocality": "Fogelsville",
                  "addressRegion": "PA",
                  "postalCode": "18051",
                  "streetAddress": "2010 Sunset Drive",
                  "addressCountry": "US"
                };
              }
              if (!jsonData.telephone || jsonData.telephone === "") {
                jsonData.telephone = "(610) 837-0700";
              }
              if (!jsonData.priceRange || jsonData.priceRange === "") {
                jsonData.priceRange = "$$";
              }
              if (!jsonData.currenciesAccepted || jsonData.currenciesAccepted === "") {
                jsonData.currenciesAccepted = "USD";
              }
              if (!jsonData.paymentAccepted || jsonData.paymentAccepted === "") {
                jsonData.paymentAccepted = "Credit Card, PayPal, Klarna";
              }
              if (!jsonData.openingHoursSpecification || jsonData.openingHoursSpecification.length === 0) {
                jsonData.openingHoursSpecification = [
                  {
                    "@type": "OpeningHoursSpecification",
                    "dayOfWeek": [
                      "Monday",
                      "Tuesday",
                      "Wednesday",
                      "Thursday",
                      "Friday"
                    ],
                    "opens": "08:00",
                    "closes": "17:00"
                  }
                ];
              }
              element.innerHTML = JSON.stringify(jsonData);
            }

            // Update Organization schema
            if (jsonData['@type'] === 'Organization') {
              if (!jsonData.legalName || jsonData.legalName === "") {
                jsonData.legalName = "Kalglo";
              }
              element.innerHTML = JSON.stringify(jsonData);
            }

          } catch (e) {
            console.error("Error parsing JSON-LD: ", e);
          }
        });
      });
    </script>

    Copy the updated code and check the validity with https://search.google.com/test/rich-results. If all looks good copy and past the code into Code Injections, Footer. You can test your website with https://search.google.com/test/rich-results to make sure everything is working properly. I hope this helps! 

  10. 1 hour ago, paul2009 said:

    I'm assuming that you added the single image (containing all the icons) in an Image Block?

    If you did, you can simply add more Image Blocks and place them side by side, then add one icon to each block.

    Did this help? Please give feedback by clicking an icon below  ⬇️

    Maybe I am just confused, but when i add more image blocks they are stacked on top of each other not side by side? 

  11. 6 minutes ago, paul2009 said:

    I would encourage you to add these icon+text elements individually as HTML (preferred), or at least as individual images, so they will be responsive and wrap onto multiple rows when the screen width is small, instead of shrinking.

    If you do use images, I recommend that you add some alt text to them because they currently lack this descriptive text for SEO and users with visual disabilities.

    Did this help? Please give feedback by clicking an icon below  ⬇️

    If i upload these individually, would I still input them into additional info? Would there be a code needed to have them look how they are currently on desktop, but have multiple rows for mobile? I appreciate your help!

  12. On 5/14/2024 at 1:12 PM, AnnaRadzicki said:

    Looking to move the + and button to the right and am struggling with any codes at all. I found a code to change the size but no matter what I input i cannot move it. Any suggestions? 

    Capture001.png

    Created a CSS code that moves the "add" button under product add ons: 

    }
    .product-details .pdp-product-add-ons .add-on-add-to-cart-wrapper .sqs-add-to-cart-button {
        width:55px !important;
        height: 55px !important;
        margin-left: 200px !important;
      margin-top: -40px; 
    }

  13. My website is https://primrose-gar-cl8a.squarespace.com/

    I have been looking everywhere and cannot find a solution so maybe its just not possible. 

    I want to change the arrows on the quantity box listed on the product page. Instead of up and down, I was hoping to have a - icon on the left of the quantity and a + on the right of the quantity like the picture attached. I can't even find a plugin!

    Quantity2.jpg.8c4e687f3a2129d27275f5bbaaeb9a7d.jpg

  14. On 5/15/2024 at 1:52 AM, Beyondspace said:

    Try the following code instead previous one

    /* Disable previous code */
    .header-announcement-bar-wrapper.mega-menu-on a:hover {
      background: none !important;
      height: unset !important;
    
    }
    /* use psedo element to set background */
    .header-announcement-bar-wrapper .header-nav-list> .header-nav-item:before{
      content:'';
      width: 100%; /*change the width here*/
      height: 100%;
      display: block;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%);
    }
    
    .header-announcement-bar-wrapper .header-nav-list>div {
      position: relative;
      z-index: 0;
    }
    .header-announcement-bar-wrapper .header-nav-list> .header-nav-item > a { 
      z-index: 1;
      position: relative;
    }
    
    /*Background color when hovering*/
    .header-announcement-bar-wrapper .header-nav-list> .header-nav-item:hover a {
      color: #000 !important;
    }
    .header-announcement-bar-wrapper .header-nav-list>div:hover:before {
      background: #fff;
    }
    
    .header-announcement-bar-wrapper .wm-mega-menu-trigger.active-mega::before {
      background: #fff;
    }
    /*Little configuation*/
    .header-announcement-bar-wrapper .wm-mega-menu-trigger {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .header-announcement-bar-wrapper .wm-mega-menu-trigger a {
      z-index: 1;
    }
    .header-nav-list>div {
      padding-top: 5px;
      padding-bottom: 5px;
    }

     

    Weirdly enough, this still didnt work, only made the red space bigger, which is the problem I was running into when I was trying this before bringing it to this thread. I guess its not a big deal, but wish there was some way to fill the gaps. Thanks for your help! 

  15. Looking to move the + and button to the right and am struggling with any codes at all. I found a code to change the size but no matter what I input i cannot move it. Any suggestions? 

    Capture001.png

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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