Adding picture links below slideshow other than Featured, Recent and Categories

Follow

Comments

9 comments

  • Avatar
    Zetya Support

    Hi Myra,

    This isn't something that is part of the theme, but you could customize it if you know some liquid + HTML.

    The way I would approach this is to upload the images to your theme assets area then edit the links in index.liquid. I would probably mimic the HTML structure that the gallery snippet generates so I can reuse the CSS.

    Thanks, Gavin.

  • Avatar
    Myra

    Thank you for your help! I've still been struggling with it. I uploaded an image to my theme assets area and have tried editing the index.liquid but am not able to get it to work. I am assuming something in this block needs to be changed?

    {% if settings.gallery == 'categories' %}

     {% include 'categories' %}

    {% else %}

     {% if settings.gallery == 'recent' %}

      {% assign collection = collections.recent %}

     {% else %}

      {% assign collection = collections.frontpage %}

     {% endif %}

     <div id="products">

      {% paginate collection.products by 8 %}

       {% include "gallery" %}

      {% endpaginate %}

     </div>

    {% endif %}

    I'm a bit slow on this and spent a few hours already. Can you help me a little? Thank you!!! -Myra

  • Avatar
    Zetya Support

    Hi Myra,

    This is the existing block that shows the products or collections on the front page. You should leave that there and put your new section of code below it.

    Something like this (not tested):

    <div class="product">
    <div class="image">
    <a href="#"><img src="{{ 'photo1.jpg' | asset\_url }}" alt="" /></a>
    </div>
    </div>

    Thanks, Gavin.

  • Avatar
    Myra

    Thanks, Gavin! I was able to get it to work with some slightly different code and I removed the "categories" code. I will try the above too. Thank you for your help!

  • Avatar
    Ellyn Stickler

    myra, what was the coding you used?

  • Avatar
    Karin Lang

    I'm interested in adding images with links to the collections on the front page. I tried adding:

    <div class="product">

    <div class="image">

    <a href="#"><img src="{{ 'photo1.jpg' | asset\_url }}" alt="" /></a>

    </div>

    </div>

    but it doesn't properly align the images side by side, instead stacking them under each other. Is there a styles.css to go with this portion?

    Or is there a different way to accomplish the same effects. Thank you

  • Avatar
    Zetya Support

    What is your store address Karin?

  • Avatar
    Karin Lang

    https://pink-door-decor.myshopify.com

  • Avatar
    Zetya Support

    Hi Karin,

    That CSS is intended to work with product collections (along with the existing liquid logic the theme uses). You can see it is already being used for your products in the front page.

    For the additional images and links you will need to add new HTML and CSS. I'd recommend posting on the Shopify forums (http://forums.shopify.com/) for help with this, as it isn't related to the Vanity theme per se.

    Thanks, Gavin.

Please sign in to leave a comment.