Brooklyn Theme - How to add a second Shop Now Button to the main Slider

New Member
2 0 0

Hi 

Can someone please help me with coding to create a second button on the Brooklyn Theme main Slider, so I can have a Button for Men & Button for Women instead of shop now?

WIth thanks & Regards 

Aziz

0 Likes
Shopify Staff
Shopify Staff
23 0 1

Hi Aziz!

That's a great request, and question! The answer here is twofold.

It looks like the section you're referring to is the slideshow at the top of your store's front page. Looking at your current set up, one option which would require minimal alteration would be to simply make a slide which features women's attire with an associated button, and another which would do the same for men's attire.

This being said, I can see you've somewhat played with this option already, so I understand if this isn't precisely what you are seeking. If the case, then I would typically advise messaging in through one of our 24/7 live channels either through our phone support at 1 (888) 746-7439 or via our live chat support at this link here. From there, you could let the Guru you speak with know that you'd like this edit to be made to your theme, and they can then send it over to our Theme Specialists for review and likely completion.

There are only a few criteria required for this service to be available to you:

  • You are using a Shopify-built theme
  • You are currently on a paid plan
  • You have some of your 60 minutes of free design time remaining
  • This is something the team can achieve (which they will confirm if the request is sent their way)

If you meet these criteria, then feel free to let me know! Since we've already touched on the task at hand in this disucssion here, I'd be more than happy to get the process underway, and I can send an email off to the address you have on file with us to get that ticket started! If you find yourself outside these requirements, then your best bet would be to reach out to a Shopify Expert who can assist with implementing this.

Hope that helps, Aziz!

Kind Regards,

Tom | Shopify Guru

0 Likes
Highlighted
New Member
5 0 0

Please help me on this.

Product Tags filter not working on the index page.

here is the code:

{% include 'banner1' %}

{% assign collection = collections.standard-registration %}

<!--Filter product tags-->

<div class="clearfix page-width">
<ul class="subnav">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
    {% elsif collection.current_type %}
    <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
    {% elsif collection.current_vendor %}
    <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
    {% endif %}
  </li>
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
  <li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}
</ul>
  
</div>

<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 0; padding: 0; }
.subnav li { display: block; float: left; }
.subnav li a {
    background: #f7f7f7;
    margin: 0 7px 7px 0;
    display: block;
    padding: 25px 20px 25px 20px;
    text-decoration: none;
    color: #454545;
    font-size: 1.2em;
    text-align: center;
    font-family: 'Conv_ProximaNova-Reg', Arial;
    letter-spacing: .5px;
    cursor: pointer;
}
.subnav li a:hover, .subnav li.active a {
  background: #1c5089;
  color: #fff;
}
</style>


{% paginate collection.products by 100 %}


<div class="page-width">

  <header class="grid medium-up--grid--table section-header small--text-center">
    <div class="grid__item medium-up--one-half section-header__item">
      <h1 class="section-header__title">
        
        {% if current_tags %}
          &ndash; {% assign title_tags = current_tags | join: ', ' %}
          {{ title_tags }}
        {% endif %}
      </h1>
      {% if collection.description != blank %}
        <div class="section-header__subtext rte">
        </div>
      {% endif %}
    </div>
    <div class="grid__item medium-up--one-half medium-up--text-right section-header__item">
      {% section 'collection-filters' %}
    </div>
  </header>

  <div class="grid grid--no-gutters grid--uniform">

    {% for product in collection.products %}
      <div class="grid__item small--one-half medium-up--one-fifth">
        {% include 'product-card', product: product %}
      </div>
    {% else %}
      {% comment %}
        Add default products to help with onboarding for collections/all only.

        The onboarding styles and products are only loaded if the
        store has no products.
      {% endcomment %}
      {% if shop.products_count == 0 %}
        <div class="grid__item">
          <div class="grid grid--no-gutters grid--uniform">
            {% assign collection_index = 1 %}
            {% for i in (1..10) %}
              {% case i %}
                {% when 7 %}
                  {% assign collection_index = 1 %}
                {% when 8 %}
                  {% assign collection_index = 2 %}
                {% when 9 %}
                  {% assign collection_index = 3 %}
                {% when 10 %}
                  {% assign collection_index = 4 %}
              {% endcase %}
              <div class="grid__item small--one-half medium-up--one-fifth">
                <a href="/admin/products" class="product-card">
                  <div class="product-card__image-wrapper">
                    <div class="product-card__image">
                      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                      {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                    </div>
                  </div>
                  <div class="product-card__info">
                    <div class="product-card__name">{{ 'homepage.onboarding.product_title' | t }}</div>
                    <div class="product-card__price">
                      $19.99
                    </div>
                  </div>
                  <div class="product-card__overlay">
                    {% assign view_string_length = 'products.product.view' | t | size %}
                    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
                  </div>
                </a>
              </div>
              {% assign collection_index = collection_index | plus: 1 %}
            {% endfor %}
          </div>
        </div>
      {% else %}
        {% comment %}
          If collection exists but is empty, display message
        {% endcomment %}
        <div class="grid__item small--text-center">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}


    {% if settings.collections_tags_enable %}
      {% include 'collection-tags' %}
    {% endif %}
    {% if settings.collections_sort_enable %}
      {% include 'collection-sorting' %}
    {% endif %}
       
 {{ content_for_index }}

0 Likes