Add a dynamic "View more" button under products tabs section

[Kundalina]

Hi,

I’m using this theme for my website: https://celixo-store-demo.myshopify.com/

And on my home page I have set up a section displaying products in tabs just like this:

(on their demo site this section can be seen in the HOME 5)

I’ve been looking in my Shopify dashboard if there’s an option to add a “View more” button that would change dynamically when clicking on the tabs, and leading to the corresponding collection, but could not find it.

I have very basic knowledge of HTML/CSS and I’ve been looking in the code a bit, yet kinda struggling to understand Liquid syntaxe.

Could someone please help me to find the right code to add this “View more” button?

Thanks a lot!

[mthdvd]

Hey, Kundalina -

A couple things I want to quickly point out.

1. Your store is not publically accessible, so no one is able to visit your site.

2. I think you need to clarify your question a bit more. What do you mean update? Update in what way?

3. Where is the View More button?

However, since you indicated that you have very limited knowledge in programming languages, this might be best suited for a Shopify developer to implement.

Best of luck.

[Kundalina]

Hi,

Thanks for your reply, however you did not get my point it seems.

1. This is not the link to my website, but the demo store from the template that I’m using.
   There is indeed a password to access the demo store, the password is “1”.

2. Where do you see that I wrote something about update? I’ve read again my post and I did not write this word anywhere.

3. The “View more” button does not exist yet, this is precisely what I want to add to this section.
   Right now it looks like this:
   (again, this is NOT my site, but I’m using this template so it looks very similar, just the products and collections are different which doesn’t matter)

Where I’ve put the red circle is where I’d like to add a “View more” button, which would lead to the relevant collection.
So if I’m on tab 1, which here is “New arrivals”, the “View more” button should lead to the “New arrivals collection”, etc.

As an example, this is what I’m aiming for:

The button at the bottom (voir plus = view more) leads to the collection corresponding to the tab.
Example: if the “Vases décoratifs” tab is displayed, the button will lead to the “Vases décoratifs” collection, if the “Stickers fleurs” tab is displayed, the button will lead to the “Stickers fleurs” collection, etc etc.

I know where to add the code to have this button in the needed spot (the red circle on the above screen), I’m just looking for guidance on how to make this button dynamic. (changes according to the tab that is clicked on)

I’ve tried to explain the best I could, I hope some will get what I’m trying to do.

Thanks!

[Kundalina]

This is the code from the product section in question, where I want to add the “View more” button:

section-product-v2.liquid

  

    

      {% if section.settings.title_heading != blank %}
      

        ### {{section.settings.title_heading}}
      

      {% endif %}
      
        

          

            {% if section.blocks.size > 0 %}
            {%- assign i = 1 -%}
            {% for block in section.blocks %}
            - {{block.settings.tab_title}}
            
            {%- assign i = i | plus : 1 -%}

            {% endfor %}
            {% endif %}
          

        

      

      
        {% if section.blocks.size > 0 %}
        {%- assign i = 1 -%}
        {% for block in section.blocks %}
        {% assign products_limit = block.settings.tab_limit %}
        {% assign col = block.settings.tab_collection %}

        

          

            {% for product in collections[col].products limit: products_limit %}
            

              {% include 'product-item-v1' %}
            

            {% else %}
            {% for i in (1..8) %}
            
              {% include 'empty-product-item' %}
            

            {% endfor %}
            {% endfor %}
          

        

        {%- assign i = i | plus : 1 -%}
        {% endfor %}
        {% endif %}
      

    

  

{% schema %}
{
  "name": "PRODUCT V2",
  "settings": [
    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "title_heading",
      "label": "Title Section",
      "default": "Our Best Seller"
    },
    {
      "type": "color",
      "id": "color_title",
      "label": "Color",
      "default": "#222"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Title Tab",
          "default": "NEW ARRIVALS"
        },
        {
          "type": "collection",
          "id": "tab_collection",
          "label": "Chose Collection"
        },
        {
          "type": "range",
          "id": "tab_limit",
          "min": 2,
          "max": 50,
          "step": 1,
          "label": "Limit Products",
          "default": 8
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "PRODUCT V2",
      "category": "HOME",
      "blocks": [
        {
          "type": "tab",
          "settings": {
            "tab_title": "NEW ARRIVALS"
          }
        },
        {
          "type": "tab",
          "settings": {
            "tab_title": "BEST SELLERS"
          }
        },
        {
          "type": "tab",
          "settings": {
            "tab_title": "TOP RATES"
          }
        }
      ]
    }
  ]
}
{% endschema %}

The following CSS is for a “View products” button that is on another product section (V4), I can use the same style:

.section-product-v4 .view-products a {
  font-weight: 500;
  color: #fff;
  background: #000;
  display: inline-block;
  margin-bottom: 25px;
  line-height: 1;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 15px 40px;
  transition: all 0.5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
  position: relative;
  z-index: 0;
}
.section-product-v4 .view-products a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  mix-blend-mode: lighten;
  background: #000;
  transition: all 0.5s cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
@media (max-width: 576px) {
  .section-product-v4 .view-products a {
    padding: 15px 30px;
  }
}
.section-product-v4 .view-products a:hover {
  background: transparent;
}
.section-product-v4 .view-products a:hover:after {
  width: 100%;
  height: 100%;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .section-product-v4 .col-6:nth-child(odd) {
    padding-right: 7.5px;
  }

  .section-product-v4 .col-6:nth-child(even) {
    padding-left: 7.5px;
  }
}

@media (min-width: 576px) and (max-width:767.98px) {
  .section-product-v4 .col-6:nth-child(odd) {
    padding-right: 7.5px;
  }

  .section-product-v4 .col-6:nth-child(even) {
    padding-left: 7.5px;
  }
}

This V4 section with the button looks like this:

To sum up: on the homepage from my website, I have the V2 section (shown in my previous reply), which enables to display products in tabs.
However the developers of the theme didn’t make it possible to add a “View more” button like in the V4 section (screen just above).

I’d like to add this button to make it easier for my visitors to get to the collections. The url from the button must change dynamically when user change from one tab to another.

Thanks in advance to anyone that could help.

[Jahid-KlinKode]

Hey @Kundalina , looking for a quick solution to implement a dynamic “View More” button under the products tab section on your Shopify store? Watch this step-by-step guide: https://www.youtube.com/watch?v=xGVtvlJT8Y4.