Adding a Sidebar to the Collection page

Follow

Comments

28 comments

  • Avatar
    Jason Pierce

    I have added the new sidebar template as described and am having some issues with it. First, the products on the page are not lining up in a consistent set of 3 products on each row. Some will have no space between them, some rows will not start inline with the other rows and some rows will not have 3 products when they should. Second, how do I switch the template for the collections/all page to use the sidebar template?

     

    Thanks for your help

  • Avatar
    Zetya Support

    Hi Jason,

    What is your storefront password?

    To use a different template for "all", you will need to create a new smart collection called "All" with a condition of price > 0. After you have created it you can go back in and set the template.

    Thanks, Gavin.

  • Avatar
    Jason Pierce

    Gavin,

    Can I email you the password directly? Thanks for the tip on the collections/all.

    Jason

  • Avatar
    Zetya Support

    Yup -> gavin@shopifyconcierge.com

  • Avatar
    Danielle M

    Yay! Is there anyway we can see it already being used?

  • Avatar
    Zetya Support

    Here it is: http://getvanity.myshopify.com/collections/recent

  • Avatar
    Zetya Support

    @jason I figured out what the problem is with the products not lining up. In gallery.liquid, replace the line that says <div class="product {% cycle 'first\_col', '', '', 'last\_col' %}">" with this:

     

    {% if template == 'collection.sidebar' %}
    <div class="product {% cycle 'first_col', '', 'last_col' %}">
    {% else %}
    <div class="product {% cycle 'first_col', '', '', 'last_col' %}">
    {% endif %}
    
  • Avatar
    Alan

    Hello Jason,

    I just purchased your theme yesterday. I'm so glad that you offer support for your theme! I'm trying to add a sidebar. But don't seem to see the template selection function in my collections. Please let me know what I'm doing wrong. I go into collections and select one of my custom collections, however I'm not sure where to go from there.

     

    Thank you

  • Avatar
    Zetya Support

    Hi Alan,

    Can you please create a support ticket for this: http://support.shopifyconcierge.com/tickets/new.

    Thanks, Gavin.

  • Avatar
    Alan

    oh sorry.. I can do that right away

  • Avatar
    Melissa

    I add #collection-body {float:right; width:714px;} to my styles.css.liquid but my collection is still not floating to the right.

  • Avatar
    Zetya Support

    @melissa did you also create the alternative layout and assign it to your collection?

  • Avatar
    Melissa

    actually you created it for me awhile ago and at one point my thumbnail images did float to the right of the side bar but I don't know what happened.

  • Avatar
    Zetya Support

    @Melissa,

    I've gone into your store and reset the collection and collection.sidebar templates and your sidebar is appearing properly again.

    Thanks, Gavin.

  • Avatar
    Mfortune

    Thank you Gavin

  • Avatar
    Jason Pierce

    I am having a problem with some of the listings in my sidebar. All the links are set to use collection.sidebar, however one group does not display the products correctly.

    For example, if you try this the products display correctly: http://www.blueberrycheers.com/collections/games

    While this has does not show the products correctly (they are out of alignment): http://www.blueberrycheers.com/collections/vendors?q=CARSON+DELLOSA

    Both use the collection.sidebar template. I've tried dropping and recreating the collection to no avail.

    Any advice is appreciated.

    Thanks,

    Jason

  • Avatar
    Zetya Support

    Hi Jason,

    Not sure how you got the query result page to use the sidebar layout? What I'd recommend is creating a smart collection for each vendor and changing the template to collection.sidebar. Then link to these collections instead.

    Thanks, Gavin.

  • Avatar
    Dickie Walsh

    Jason,

    How were you able to add categories in your sidebar?  http://www.blueberrycheers.com/collections/games  very cool...is this feature availble or did you create it yourself.

     

    Am I missing something?

     

    Dickie Walsh

    http://www.hawthorne-lane.com

  • Avatar
    Terry-Ann Williams

    Does this work for the Couture theme as well? Because I so desperately need to add a sidebar menu to my store but I simply cannot afford to pay a designer to do it so any info that can help me to accomplish this myself would be greatly appreciated. PLEEEASE? ANYBODY? my store is idreamcouture.myshopify.com

  • Avatar
    Zetya Support

    Hi Terry-Ann,

    This forum is for the Vanity theme. I'd recommend getting in touch with the Couture theme developer to see if it supports side-bars.

    Thanks, Gavin.

  • Avatar
    Lisa Isbell

    Can you give me more detailed instructions in how to use the sidebar template? I'm fairly new to Shopify.  The sidebar option is why I chose this theme (which I love by the way) but I can't figure out how to use it.  I just bought the Vanity theme a few weeks ago, now trying to customize it a little bit. 

    Thanks,

    Lisa

  • Avatar
    Zetya Support

    Hi Lisa,

    First step is to create a collection - it can be a custom or smart one. At the bottom of the page when you are creating the collection you will see a dropdown box that lets you select the template to use. Select "collection.sidebar" and save the new collection. collection-sidebar.png

    Thanks, Gavin.

  • Avatar
    Info

    Hi Gavin, 

    Is it possible to paste code into all other pages resulting in a sidebar on all pages (except the home page?)

    Also - it seems that the categories and subcategories that are generated only from tags on the product pages? They should come from collections, correct?

    Is there anyway to add a newsletter (or other) widget into this sidebar?

    Many thanks, 

    JC

  • Avatar
    Zetya Support

    Hi JC,

    Yes, you can certainly use the template as a guide for other pages. The main thing to notice is the styling for #collection-body.

    To edit the template (in order to add widgets), open collection.sidebar.liquid. The tags are generated based on the products in the collection.

    Thanks, Gavin.

  • Avatar
    Phil Hilton

    Hello,  I have selected the sidebar template for my collections and I see on the preview the empty space for the sidebar, but how do you actually get links to show up in there?

     

    Thanks,

    Phil

  • Avatar
    Zetya Support

    Hi Phil,

    It will use tags by default, so give your products some tags and you will see them in the sidebar.

    You can change it by editing collection.sidebar.liquid.

    Thanks, Gavin.

  • Avatar
    Phil Hilton

    Thank you, Gavin.  I believe I've got that for most of the site; however, I am trying to have several collection pages have links in the sidebar that link to other collection pages.  For example, if I have a collection called NFL Store, when a visitor goes to that collection page, I would like that sidebar to have a link for each NFL team.  I've setup collections for each team, so they are showing up on the primary menu as a submenu under NFL Store, but I'd like the sidebar to list those pages (collection pages) as well.  The reason I do not want to do this with tags is because, as I understand it, if a customer clicked on "Arizona Cardinals" for instance, they would get all of the products in which I include "Arizona Cardinals" in the tag on the resulting page.  But that page would not have a sidebar for all of the different types of Arizona Cardinals branded merchandise, would it?  In order to filter the sidebar under Arizona Cardinals to show the different types of merchandise, Arizona Cardinals needs to be its own collection I think.  Which would mean the top-level sidebar would have to link to a collection, not a filter of items.  Am I incorrect in that, or have I lost you completely with my inexperienced attempt at explaining the problem as I understand it, lol?

     

    Thanks,

    Phil

  • Avatar
    Zetya Support

    Hi Phil,

    You aren't tied to using tags. Feel free to go ahead and change the code in collection.sidebar.liquid to match your exact requirements.

    Thanks, Gavin.

     

Please sign in to leave a comment.