Adding CSS to Product Pages

Site URL: https://paddlefish-roadrunner-gk5n.squarespace.com/config/design/product-items

I am trying to add an accordion drop-down menu to my client's product pages to highlight "Materials" and "Care" for each item. 

You can add a blocks to the product pages under the additional info tab.

Thank you so much! I will give this a try!!

On 11/13/2020 at 2:27 PM, ACScruggs said:

Thank you so much! I will give this a try!!

I see shop pages has many category nav links on mobile. I think you can convert to dropdown. If you want this, We can give the code.

@tuanphan Thanks for your reply! We have decided not to add dropdown accordion menus to the shop page. However, if you have a moment, I am still trying to resolve the other issue you responded to - "change size of an image in mobile view". That forum discussion thread is linked HERE. 

On 11/21/2020 at 1:08 AM, ACScruggs said:

@tuanphan Thanks for your reply! We have decided not to add dropdown accordion menus to the shop page. However, if you have a moment, I am still trying to resolve the other issue you responded to - "change size of an image in mobile view". That forum discussion thread is linked HERE. 

Add to Home > Design > Custom CSS

/* resize center footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605764657479_34733 {
    width: 30%;
    margin: 0 auto;
}
}

Hi,

I would like to have a dropdown menu on mobile for my shop categories. Is this possible in 7.1?

@sonofrand

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.

site url is http://www.sonofrand.com/shop Thanks so much!

On 2/16/2021 at 8:13 AM, sonofrand said:

site url is http://www.sonofrand.com/shop Thanks so much!

 

 

Add to Settings > Advanced > Code Injection > Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    if(window.innerWidth <= 575 && $('.nested-category-children li a').length > 0) {
        let open = false
        $('<div id="t-category" name="t-category"><div id="t-control">Category <span id="t-down"></span><span id="t-up"></span></div><div id="t-menu"></div></div>').insertBefore('.nested-category-tree-wrapper');
        $('.nested-category-children li a').each(function(id, e) {
            const href = $(e).attr('href');
            const text = $(e).html();
            $('#t-menu').append('<a class="t-item" href="'+href+'">'+text+'</a>')
        })
        $('#t-control').click(function() {
            if (!open) {
            $('#t-menu').css('display', 'block')
            $('#t-down').css('display', 'none')    
            $('#t-up').css('display', 'unset')
            open = true
            } else {
                $('#t-menu').css('display', 'none')
            $('#t-down').css('display', 'unset')    
            $('#t-up').css('display', 'none')
            open=false
            }
        })
    }
})
</script>
<style>
#t-category {
    display: none;
}
@media only screen and (max-width: 575px) {
    .nested-category-children {
        display: none !important;
    }
    #t-menu {
        position: absolute;
    top: 35px;
    z-index: 1;
    background: white;

    display: none;
    right: 0;
    text-align: right;
    
    }
    #t-category {
        position: relative;
        display: inline-block;
        float: right;
        top: 5px;
        right: 0;
    }
    .nested-category-title {
        display: inline-block !important;
    }
    #t-control {
        font-family: baskerville-display-pt;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    z-index: 12;

    font-size: 20px;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 20px;
    }
    .t-item {
        display: block;
        padding-left: 15px;
    }
    #t-down {
margin-left: 10px;
      position: absolute;
    top: 15px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid;
    right: 0;
    }
    #t-up {
       margin-left: 10px;
      position: absolute;
    bottom: 12px;
    right:0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 10px solid;
      display: none;
    }
}
</style>

(t in the code is my name ☘️. Tested code on >4 SS 7.1 sites)