NewbiefromUK

@creedon Hi there, Just regarding this code, Ive had few breaks in the past month or so maybe 2 so I had to re-do the things again few times because of code change (the weird letters .xyhijiajar etc.) Thats pretty much how I am targeting the sections that I want to change since I dont know a better way but your twc_caps_styling is there a way we can create Custom selectors for the areas we want to target as its kind of frustrating to keep doing this over and over to maintain the style. I dont understand the twc classes or whatever they are so thats why I decided to ask as they've rolled out changes that affected these areas 2 times now in a span of few weeks Regards

Let me jump on this as well, I have too reported this issue just now, I've been seeing it for a while but thought it might be a slow loading error and didnt do further checks up until recently. I have the same problem on my end and they came back to me with the same scripted response which is complete bull ... I wonder what are these support people there for ? To help me drag and drop boxes in edit mode ? Or to direct me into a section where I've forgotten to tick a box or something to activate a feature? Great help, thanks... Like out of the 10-15 times I've reached out to them for whatever reason they have been just completely useless and unhelpful guiding me to some generic pages which I already know of. I've invested too much time into my website using this platform hence why I didnt ditch it at the beginning and just move to shopify but am now considering of hiring someone to replicate my entire websites functionality in shopify to save myself time and just be able to migrate as soon as... Too many bugs and too many important and basic features missing... I wish I tried out shopify first before going for this badly ran company ... Similar issue happened with summary blocks - I've got a hover effect on them and one day they just started acting up so much that I thought I did something but as you can imagine it was to do with them screwing up something while doing something else.... and it got fixed eventually. In fact that got fixed pretty quickly so I am hoping they will do the same here but since this post is almost a month old I assume they will take their time ....

Hi @paul2009 I took on this task and converted to img and so far it's working great with 1 hiccup that I hope you might have a solution for. I tried to fix it but it wasn't doing anything unless it's not possible to do it. I noticed the site logos is below the mega menu dropdown whereas the site title text was sitting above it when the drop down would appear. Tried to solve this with a z-index parameter but wasnt doing much and decided to ask for help If you have a solution for it. Would appreciate if you can let me know if there is a way to sit the sit title logo img above the mega menu drop down when you hover over shop and collections. www.limited-clothing.co.uk Thanks

Hi, Can someone assist with this matter ? I ran into this problem as well and I am just getting fed up with all of this sqs nonsense where simple things require the biggest effort to resolve ... Like why are subcategories not unique on their own where you can just simply drag and drop things, add your own text or image or whatever instead its shared within the store they are... Having browsing the web for days to find a way to add just a text to each subcategory was not enough on my plate and now I have to find a way to actually add unique meta descriptions .... Their shop set up is just beyond problematic... Anyway if someone has an answer to this problem would be highly appreciated

@creedon Thank you for the explanation. I also have nested category breadcrumbs or titles but I've just hidden them. Even with them visible I still cant see any new text or changes to the category page text. Would you have an idea of how the CSS can be designed for my shop ? There are currently 4 unique shops and are creating duplicate items in the search results. So I would love to be able to have only 1 shop which can have all products and put them into the relevant categories without duplications. Is there a way we can target the section where I currently have text with your code ? This would be very appreciated as its the reason thats holding me back from disabling all the other shops 😕 Thank you

@paul2009 Hi, I am using Site Title and a specific font-family. Guessing it's not possible to do adjustments to the check out branding if its a site title ? Thanks

@creedon Hi, I had removed it after seeing its not applicable for fluid engine but just put it back on again. hope you can check it now, thanks The CSS I had put in [data-store-category="t-shirts"].tweak-products-nested-category-type-sidebar.tweak-products-category-title .products.collection-content-wrapper .nested-category-title:after { border-color : #a00; content : "Unique Text for each category"; font-family : Raleway; font-size : calc( 1rem ); padding : 20px 0; opacity : 1; text-align : center; }

Hi @mbaydesign @creedon I am trying to do the same thing as you but for some reason it is not quite working for me. I currently have unique shops but they are creating the problems of duplicating products and just lots of other things that are not desirable so I am considering to have only 1 unique shop under which I can have different categories that can act as shops. But I will be facing the same problem with the shared ID and Block IDs for any new elements I add. At this stage I am interested in having unique page text / description for each category. I tried to follow the steps that @creedon has sent a link to but for some reason I couldnt get it to work. I would appreciate if someone can assist me with this problem. This is for 7.1 template - I've downloaded the twcls file, added the page for it where I've linked it to, I've put the twcls script into the header injection area and I've pasted the javascript to the page header area in the store. Then I copied the CSS you've pasted and changed it to one of the store categories i.e. "t-shirts" ,changed the content of the CSS text but nothing was appearing there. Ideally I want to position only the descriptive text without any headings as per the current design, just replace the current text with other alternatives. https://limited-clothing.co.uk/menscollection/t-shirts And on another topic, @mbaydesign I checked your website and noticed that in your checkout page you have a custom LOGO area as in you have your same logo even in the checkout zone. For our website I've hidden the logo because I couldn't change its font to the site titles font. Do you mind sharing your secret of how you managed to add your website logo in the form of either text/font style or an image file to your checkout page ? I would love to do that for ours :] Thank you so much both of you, I hope you can assist Am I on 7.1 fluid engine template, I think I am as I have the squares in the edit pages ? That might be the reason why nothing is registered ? I think I've followed the steps correctly but just saw it says not applicable next to 7.1 fluid engine

Hi, Any thoughts on this ? Regards

Hi, I've attached a photo below with the issue I am having. Maybe I am misunderstanding something but I think I was able to format the 1st and 2nd line separately before the revision ( i.e. target them with css ). I tried the revision code and deleted the label text New | and the 2nd line of the title took the CSS specs of the 1st line again.Because then the main product title becomes the 1st line. Please refer to the image below. Sorry if I've confused you..

@paul2009 Thank you! Much appreciated! I will test this out as soon as. Is there another way of adding such labels to the product titles please ? For example through tags or similar ? Asking this because when I type New | although it looks all good on the website after the CSS kicks in you see this text on all other platforms where the product has been synced. So in all social media platform shops, google etc. When I want to add the label Coming Soon | it will appear in the title and make it very long. Was wondering if there is another way of achieving this without affecting the length of the product titles, so kind of have it there visible in the website but nowhere else. Thank you for your time

@paul2009 Hi, The " Coming soon " one is injected into the website whenever I need to use that bade for the top right corner of the product thumbnails. The " New " text appears through your code to split the product title into 2 lines. I want to be able to add and remove the text " new " from specific product titles - right now id like to only include that text in the title only on new items. If I remove the text " New | " from my product titles the rest of the product title takes the CSS specs of the 1st line of the product title which in this case is the " New | " This is the link I used to achieve that https://sf.digital/squarespace-solutions/display-product-titles-on-two-lines-with-squarespace-71 Just want to be able to control the small text above my product titles for each product individually either through your code if possible or through tags maybe. Hope this makes sense.

@paul2009 Hi Paul, Further to this topic, I've implemented your code into my website for when we first dropped our products and used the word " NEW " for them. Its been 3 months since then now and would like to start removing this tag / word from the product titles as we are expecting new items and would like to only be displaying it on the products that are actually new drops. I tried removing the TAG from one product as the line where it says NEW is in grey and the actual title of the product is in black but when the tag is gone it makes the whole title grey and adjusts it to match the css I've used for the word/tag " NEW ". Link to one of our products https://limited-clothing.co.uk/menscollection/p/signature-hoodie-black Also a link to our product page https://limited-clothing.co.uk/menscollection If this code isn't the best approach for what I am trying to do, would you have an alternative suggestion ? I want to keep the same style as you see in my product collection page for when I want a specific product to have a label (i.e New or Coming Soon ) and also keep the same style for the actual product title without a label. Just want to be able to add and remove this 1st line of text for specific products. Regards

Thank you for this! Its part of the solution, in order for your code to work I had to use a js too to make sure the burger menu is not opened at bigger screen viewports. <!-- CLOSES BURGER MENU ABOVE 1200px IF OPEN --> <script> function closeBurgerMenu() { var viewportWidth = window.innerWidth || document.documentElement.clientWidth; var burgerButton = document.querySelector('.header-burger-btn'); if (viewportWidth > 1200 && burgerButton && burgerButton.classList.contains('burger--active')) { burgerButton.click(); // Simulate a click to close the burger menu } } window.addEventListener('resize', closeBurgerMenu); window.addEventListener('DOMContentLoaded', closeBurgerMenu); // Close menu on initial load </script> This with your code did the trick for me. Thanks

Hi there, I’ve noticed that sometimes when I click on lets say an empty space on the website it will open the SIGN IN page. In the inspect tool area I noticed that it is picking up something related to the user account profiles and although its invisible, if I click on that section of the webpage it will open the SIGN IN page. Would anyone be able to assist me with this issue? Id like to be able to remove this bar or whatever it is. Its much bigger and wider in Safari, in Chrome its relatively small but its still an issue. Its quite a problem for us because sometimes if lets say your product variants are aligning with this invisible area, everytime you try to select, a size or colour it will start opening the SIGN IN page and you would only be able to pick a size if you scroll up or down past that section when they are not in line. www.limited-clothing.co.uk Thank you Attached is a photo - this highlighted section is kind of showing across the entire website on all pages I think, in the same spot. Your help would be highly appreciated !

hi @Arnau Would be great if you can share if you've managed to resolve this for yourself ? Ive followed some steps on Facebook, create a purchase event through their payload and use the suggested codes from that given url to then paste into my sqs websites code injection header. Not sure if I've done it correctly but would be great to hear your side of the story on this matter. Regards

@tuanphan Hi, Ive managed to create the slide out for contact and for it to load properly but I am experiencing another glitch that I need assistance with. Below is my javascript for the slide out. Web: www.limited-clothing.co.uk pass: limited <script> // Show the contact form when the contact link is clicked document.querySelector('a[href="/contact"]').addEventListener('click', function(e) { e.preventDefault(); // Check if the slide-out contact form is already shown if (!document.getElementById('slide-out-contact').classList.contains('show')) { // Show the slide-out document.getElementById('slide-out-contact').classList.add('show'); } }); // Hide the contact form when the close button or overlay is clicked document.querySelector('.slide-out-close-contact').addEventListener('click', function() { document.getElementById('slide-out-contact').classList.remove('show'); }); document.querySelector('.slide-out-overlay-contact').addEventListener('click', function() { document.getElementById('slide-out-contact').classList.remove('show'); }); </script> It already has set CSS for this slide out you can test it out by resizing the browser window below 50% screen width and the container will go full screen with an X button appearing in the top left corner which is all great. You can close it using the X which has a good animation, this is all good. At that point the screen is converted into a mobile menu below 1200px and so you have the burger menu. IF you try to open the slide out again from the burger menu CONTACT it directs me to the actual page /contact instead of getting the slide out. For some reason I cannot target only the CONTACT in the nav bar as a word or whatever for the slide out instead I use the href which seems to be using the URL slug. it works but I want it to also have the slide out feature on mobile. Can you please assist me in how I can make this work? The Footer obviously is using the/contact slug and I believe there is some kind of a cross between them below 1200px on mobile interface it just directs me to the page rather than triggering the slide out. This would be much much appreciated! Kind Regards

Hi @tuanphan, I hope you are well, Any chance you can look into an issue I am running to for me please? I've got a CONTACT page in the NAV bar and also same contact page in the footer. The nav bar CONTACT I've now converted it into a slide out with all the desired CSS, I know its working because I've used it across other things now. The issue I am running to is the javascript I've written gets the /contact-form using its section ID but doesnt get displayed in the slide out? Using inspect elements shows the form being there as it gets highlighted, I also added a black border which appears both in the Slide out container and also in the actual contact page but for some reason nothing else is displayed. I am missing the button and all the input fields. Can you please suggest what might be causing this and what would be a potential fix please? Below I've pasted my Javascript for you, its using /contact-form page a new page I made but it's essentially same as the /contact one. limited-clothing.co.uk pass: limited I've left the slide out active with the black border showing there, that is the border of the contact form, I am just not sure why it's not showing the full thing. Your help will be highly appreciated! <!--- CREATING SLIDE OUT FOR CONTACT ---> <div class="slide-out-contact" id="slide-out-contact"> <div class="slide-out-close-contact"></div> <div class="slide-out-content-contact"></div> </div> <div class="slide-out-overlay-contact"></div> <script> document.querySelector('a[href="/contact"]').addEventListener('click', function(e) { e.preventDefault(); document.getElementById('slide-out-contact').classList.toggle('show'); var xhr = new XMLHttpRequest(); xhr.open('GET', '/contact-form'); xhr.onreadystatechange = function() { if (this.readyState === XMLHttpRequest.DONE && this.status === 200) { var parser = new DOMParser(); var doc = parser.parseFromString(xhr.responseText, 'text/html'); var content = doc.querySelector('section[data-section-id="645a61b2b46f126db831ebce"]').innerHTML; document.querySelector('.slide-out-content-contact').innerHTML = content; } }; xhr.send(); }); document.querySelector('.slide-out-close-contact').addEventListener('click', function() { document.getElementById('slide-out-contact').classList.remove('show'); }); document.querySelector('.slide-out-overlay-contact').addEventListener('click', function() { document.getElementById('slide-out-contact').classList.remove('show'); }); </script>

Thank you for this! It worked yes! Just a note again about any bugs and so on :] I think the refresh issue is also happening with this code and in this section, If I open the profile page (customised) and then refresh it while open then after closing it and opening it right up again it tends to go back to its original form. I had a quick question about the DARK OVERLAY you get when you click on LOGIN or SIGN IN or the ACCOUNT once you are signed in which also has a spinning wheel for about 1,2 seconds where the background gets a darker overlay. Would you know the element name for it ? I am trying to remove the dark overlay and instead have a white overlay which is the effect of most of my elements in the website. I've managed to make the background transparent when I click on SIGN IN and then once it gets the window up the background is transparent but there is a brief moment where the background is dark while spinning wheel shows and then it goes to transparent when the click function is processed. I am not sure exactly how to target that moment I would also like to remove this from both the SIGN IN and USER ACCOUNT PROFILE elements when I click on them. Regards

Thanks a lot for this! I've tried to customise the page using the ss created names and also the ones you've provided in the link above, however, no change is detected on my end. This is what I've been testing out just to see if its registering it but no luck so far <x-twc-capc-style style="display : none;"> .twc-capc-close { font-weight: 700; } </x-twc-capc-style> I might have done it wrong not sure. But the LOGIN PAGE code that you also did, there I didnt have issues with the CSS, they were registering pretty quickly and I could see the changes I was making. Thanks

@tuanphan Hi there, Any thoughts on this? What is your recommendation, would be brilliant if you have a code for this :]. Thank you for your time and patience with whoever you are dealing with on daily basis in these forums 😄. Much appreciated!

Hi, Its a Basic Commerce Plan, its the next one after business plan. Regards

I am just wondering if there is a code that that I can apply such as, using the nav as an example " Change Nav colour to black when you reach Section A (i.e data-section ID) and change back to white once you exit Section A or once you reach Section B (data-section ID). Not looking to make it complex but any suggestions would be more than welcome Thanks

/// Dynamic SITE TITLE, NAVIGATION BAR (inc LOGIN + CART AND CART QUANTITY) SITE LOGO (.svg) /// Not sure the exact terminology for what I am trying to create but I am guessing its called "dynamic". My website splits into WHITE BACKGROUND+ BLACK TEXT sections and BLACK BACKGROUND + WHITE TEXT page sections. I've been trying to find a solution for this but so far haven't been successful as I think it may need java not too sure. So I just want to give the site title, the logo and all the navigation bar items a colour change once it reaches a particular section. For my website it would be once it reaches a page-section with black background all the necessary items to invert to white and vice versa. I only need this on the main page. www.limited-clothing.co.uk pass: limited123 I hope tagging you to this post doesn't cause any inconvenience. Would be very grateful if someone can find the time to assist with this.