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

Arch

Member
  • Posts

    55
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Arch got a reaction from bangank36 in SOLVED: Product Image lightbox photo cropped   
    @bangank36 This skews the image though and squeezes its dimensions onto the screen.
     
  2. Thanks
    Arch reacted to RyanDejaegher in SOLVED: How to align the Products Description Excerpt   
    @Arch, you can center things that have a width set using margin: 0 auto;

    Here's what that looks like  

  3. Like
    Arch got a reaction from Dee12 in SOLVED: Reducing size of related products   
    @bangank36 hmmm doesn't seem to work but I managed to do it with this!
    .ProductItem-relatedProducts .list-grid 
    {grid-template-columns: 200px 200px 200px 200px 200px 200px 200px !important;
    }
  4. Like
    Arch got a reaction from RyanDejaegher in SOLVED: How to shrink a gallery in mobile view   
    @RyanDejaegher I COMPLETELY AGREE, but my boss wanted me to use those graphics no matter what, sigh, I even after I explained how it's bad on seo and layout etc, but I've managed to change it so that it shrinks on mobile now using the below code, thanks anyway!!
    @media screen and (max-width:500px) {
    [data-section-id="5ea59e152a97584d997986cb"] {
        width: 100% !important;
        height: auto !important;
    }
    }
  5. Like
    Arch reacted to RyanDejaegher in SOLVED: How to shrink a gallery in mobile view   
    @Arch Took a look, generally this is why you don't want to have images that have text embedded directly in them. Because of this it makes it difficult to make adjustments to spacing and sizing because the text is fixed in place in the image. 

    I'd consider splitting your text from your image so that you have more control over the layout
  6. Like
    Arch got a reaction from bangank36 in SOLVED: Reducing size of related products   
    @bangank36 hmmm doesn't seem to work but I managed to do it with this!
    .ProductItem-relatedProducts .list-grid 
    {grid-template-columns: 200px 200px 200px 200px 200px 200px 200px !important;
    }
  7. Like
    Arch got a reaction from bangank36 in SOLVED: Product Image lightbox photo cropped   
    @bangank36 Awesome that's perfect thank you!
  8. Thanks
    Arch reacted to bangank36 in SOLVED: Product Image lightbox photo cropped   
    This may removed the distortion
    .gallery-lightbox-item img { width: auto !important; height: 100% !important; margin: 0 auto; left: 50% !important; transform: translateX(-50%); }
  9. Love
    Arch reacted to jpeter in SOLVED: Move the Add to Cart Button above the product descriptions   
    You can add the following CSS:
    @media screen and (min-width: 768px ) { .ProductItem-details .ProductItem-details-checkout { display: flex; } }  
  10. Love
    Arch reacted to jpeter in SOLVED: Move the Add to Cart Button above the product descriptions   
    You can add this CSS to align it with the image:
     
    media screen and (min-width: 768px) .tweak-product-basic-item-content-alignment-top .ProductItem-details { padding-top: 0; }  
  11. Love
    Arch reacted to jpeter in SOLVED: Move the Add to Cart Button above the product descriptions   
    @Arch You could add the following CSS to reduce the top padding of the entire section:
    .products.collection-content-wrapper { padding-top: 0; }  
  12. Thanks
    Arch reacted to jpeter in SOLVED: Move the Add to Cart Button above the product descriptions   
    @Arch You could add the following JavaScript and CSS code below. Just update the variables, BUTTON_PRETEXT_HTML and TITLE_SUBTEXT_HTML, values in the JavaScript code. The BUTTON_PRETEXT_HTML  will add the text before the "Add To Cart" button with a class of sqs-add-to-cart-button-pretext. The TITLE_SUBTEXT_HTML will add the text after the title with a class .ProductItem-details-title. You can then use CSS to style. 
    CSS:
    .ProductItem-details-title-subtext { order: 2; } .ProductItem-details-title-subtext p { margin-top: 0; margin-bottom: 2rem; } .sqs-add-to-cart-button-pretext p { margin-bottom: 2rem; } JavaScript:
    (function(document){ // Edit HTML between the quotes. var BUTTON_PRETEXT_HTML = '<p><a href="#">View size guide</a></p>'; var TITLE_SUBTEXT_HTML = '<p>Rumba red</p>'; /**************************************************************** * DO NOT MODIFY CODE BELOW, unless you know what you're doing. ****************************************************************/ // Execute code based on if it's in the header or footer if(document.readyState == 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } function init(){ var buttonContainer = document.querySelector('.sqs-add-to-cart-button-wrapper'); var productTitle = document.querySelector('.ProductItem-details-title'); var div; if(productTitle) { div = document.createElement('div'); div.setAttribute('class', 'ProductItem-details-title-subtext'); div.innerHTML = TITLE_SUBTEXT_HTML; productTitle.parentNode.insertBefore(div, productTitle.nextElementSibling); } if(buttonContainer) { div = document.createElement('div'); div.setAttribute('class', 'sqs-add-to-cart-button-pretext'); div.innerHTML = BUTTON_PRETEXT_HTML; buttonContainer.insertBefore(div, buttonContainer.firstChild); } } })(document); Make sure you add the code between <script> tags, example:
    <script> // Add JS code </script> See article on how to add JavaScript https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript
  13. Love
    Arch reacted to RyanDejaegher in SOLVED: Move the Add to Cart Button above the product descriptions   
    @Arch you'll want to add that code above fo Settings -> Advanced -> Code Injection -> Footer

    I could be wrong but I don't believe you'll be able to individually customize the Title subtext for each product without further customization. This code would be applying the same changes across all products. 
  14. Love
    Arch reacted to RyanDejaegher in SOLVED: Move the Add to Cart Button above the product descriptions   
    Hey @Arch looking at the site I can see the button pre text It's sitting above the button

     
  15. Love
    Arch reacted to jpeter in SOLVED: Move the Add to Cart Button above the product descriptions   
    @Arch Instead of placing the JS code in the footer,  you should be able to update each product by adding the JS code as a code block under the Additional Info tab for each product, see video example:

    QHyQ9XfVlx.mp4  
  16. Like
    Arch reacted to RyanDejaegher in SOLVED: Move the Add to Cart Button above the product descriptions   
    @jpeter might have an idea but i'm not seeing any ability to pull in the color info to the cart
  17. Haha
    Arch reacted to RyanDejaegher in SOLVED: Make text links underline when active   
    @Arch, weird now it seems to be working haha. 
  18. Love
    Arch reacted to RyanDejaegher in SOLVED: Make text links underline when active   
    @Arch You can use this code and it will add a class "arch-style" that you can use to style your footer links when active.

    https://gist.github.com/ryandejaegher/76414a7d76ae4d5491e3b5bebd211e5c

  19. Like
    Arch reacted to RyanDejaegher in SOLVED: Make text links underline when active   
    @Arch, can you share a screenshot of your code injection? If you're comfortable you send an invite to the site and it'll be quicker for me to troubleshoot. 
  20. Thanks
    Arch reacted to RyanDejaegher in SOLVED: Make text links underline when active   
    Hey @Arch my bad, looks like I was missing a ). I've updated the code in that link, you should be able to copy paste it now. 
  21. Like
    Arch got a reaction from RyanDejaegher in How to make the basket icon bolder   
    Thank you! That's exactly what I was looking for 🙂
  22. Like
    Arch reacted to RyanDejaegher in How to make the basket icon bolder   
    @Arch You can add this to your custom CSS and then adjust the stroke-width value to get the result you want. 
    svg.icon.icon--cart { stroke-width: 3px; }

     
  23. Like
    Arch reacted to derricksrandomviews in How to make the basket icon bolder   
    there are some hover effects and color changes you can do with CSS, and you can install your own custom icon as well, here is a thread discussing that: 
     
     
     
×
×
  • Create New...