How To Add Password Protected Collection For Shopify?

Welcome back to another update from WebSense Pro! In this video, we’re revisiting a previous tutorial where we tackled the challenge of adding password protection to your Shopify collection pages. If you’ve been following along, you know that while we provided a solution before, it wasn’t flawless. Customers were still able to stumble upon password-protected products through searches or other collection pages. Today, we’re going to fix that.

Step 1: Create a new template for collection

To begin, navigate to your Shopify dashboard and access the “Collections” section under “Products.” Here, create a new collection and name it accordingly. We’ll call it “Private Collection” for this demonstration.

Create a new template collection.private.liquid and add the following code:

{% if customer.tags contains 'private' %}
  {% section 'main-collection-product-grid' %}
{% else %}
  <div class="page-width style_private">
    <h2>Please login to view this collection</h2>
    <a href="{{ routes.account_login_url }}">Login</a>
    <!-- <a href="{{ routes.account_register_url }}">Register</a> -->
  </div>
{% endif %}
<style>
  .style_private{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .style_private a{
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    background: #efefef;
    margin: 0 5px;
  }
</style>
  • Add “private” tag to customer and product

Step 2: Update main-collection-product-grid.liquid File

Goto main-collection-product-grid.liquid file and replace the following code:

<li
                  class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                  {% if settings.animations_reveal_on_scroll %}
                    data-cascade
                    style="--animation-order: {{ forloop.index }};"
                  {% endif %}
                >
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    image_shape: section.settings.image_shape,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
                  %}
                </li>

With below code:

{% assign isPrivateProduct = false %}
                {% for tag in product.tags %}
                  {% if tag == 'private' %}
                    {% assign isPrivateProduct = true %}
                  {% endif %}
                {% endfor %}

                {% if customer %}
                  <li
                    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                    {% if settings.animations_reveal_on_scroll %}
                      data-cascade
                      style="--animation-order: {{ forloop.index }};"
                    {% endif %}
                  >
                    {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: section.settings.image_ratio,
                      image_shape: section.settings.image_shape,
                      show_secondary_image: section.settings.show_secondary_image,
                      show_vendor: section.settings.show_vendor,
                      show_rating: section.settings.show_rating,
                      lazy_load: lazy_load,
                      show_quick_add: section.settings.enable_quick_add,
                      section_id: section.id
                    %}
                  </li>
                {% else %}
                  {% unless isPrivateProduct %}
                    <li
                      class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                      {% if settings.animations_reveal_on_scroll %}
                        data-cascade
                        style="--animation-order: {{ forloop.index }};"
                      {% endif %}
                    >
                      {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        lazy_load: lazy_load,
                        show_quick_add: section.settings.enable_quick_add,
                        section_id: section.id
                      %}
                    </li>
                  {% endunless %}
                {% endif %}

Step 3: Update featured-collection.liquid File

Goto featured-collection.liquid file and replace following code:

<li
                    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                    {% if settings.animations_reveal_on_scroll %}
                      data-cascade
                      style="--animation-order: {{ forloop.index }};"
                    {% endif %}
                  >
                    {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: section.settings.image_ratio,
                      image_shape: section.settings.image_shape,
                      show_secondary_image: section.settings.show_secondary_image,
                      show_vendor: section.settings.show_vendor,
                      show_rating: section.settings.show_rating,
                      lazy_load: lazy_load,
                      show_quick_add: section.settings.enable_quick_add,
                      section_id: section.id
                    %}
                  </li>

With below code:

{% assign isPrivateProduct = false %}
                {% for tag in product.tags %}
                  {% if tag == 'private' %}
                    {% assign isPrivateProduct = true %}
                  {% endif %}
                {% endfor %}

                {% if customer %}
                  <li
                    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                    {% if settings.animations_reveal_on_scroll %}
                      data-cascade
                      style="--animation-order: {{ forloop.index }};"
                    {% endif %}
                  >
                    {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: section.settings.image_ratio,
                      image_shape: section.settings.image_shape,
                      show_secondary_image: section.settings.show_secondary_image,
                      show_vendor: section.settings.show_vendor,
                      show_rating: section.settings.show_rating,
                      lazy_load: lazy_load,
                      show_quick_add: section.settings.enable_quick_add,
                      section_id: section.id
                    %}
                  </li>
                {% else %}
                  {% unless isPrivateProduct %}
                    <li
                      class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                      {% if settings.animations_reveal_on_scroll %}
                        data-cascade
                        style="--animation-order: {{ forloop.index }};"
                      {% endif %}
                    >
                      {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        lazy_load: lazy_load,
                        show_quick_add: section.settings.enable_quick_add,
                        section_id: section.id
                      %}
                    </li>
                  {% endunless %}
                {% endif %}

Step 4: Update main-search.liquid File

Goto main-search.liquid file and replace following code:

<li
                    class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                    {% if settings.animations_reveal_on_scroll %}
                      data-cascade
                    {% endif %}
                  >
                    {%- case item.object_type -%}
                      {%- when 'product' -%}
                        {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
                        {% render 'card-product',
                          card_product: item,
                          media_aspect_ratio: section.settings.image_ratio,
                          image_shape: section.settings.image_shape,
                          show_secondary_image: section.settings.show_secondary_image,
                          show_vendor: section.settings.show_vendor,
                          show_rating: section.settings.show_rating,
                          lazy_load: lazy_load
                        %}
                      {%- when 'article' -%}
                        {% render 'article-card',
                          article: item,
                          show_image: true,
                          show_date: section.settings.article_show_date,
                          show_author: section.settings.article_show_author,
                          show_badge: true,
                          media_aspect_ratio: 1,
                          lazy_load: lazy_load
                        %}
                      {%- when 'page' -%}
                        <div class="article-card-wrapper card-wrapper underline-links-hover">
                          <div
                            class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
                            style="--ratio-percent: 100%;"
                          >
                            <div class="card__content">
                              <div class="card__information">
                                <h3 class="card__heading">
                                  <a href="{{ item.url }}" class="full-unstyled-link">
                                    {{ item.title | truncate: 50 | escape }}
                                  </a>
                                </h3>
                              </div>
                              <div class="card__badge {{ settings.badge_position }}">
                                <span class="badge color-{{ settings.color_schemes | first }}">
                                  {{- 'templates.search.page' | t -}}
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                    {%- endcase -%}
                  </li>

With below code:

 {% assign isPrivateProduct = false %}
                  {% for tag in item.tags %}
                    {% if tag == 'private' %}
                      {% assign isPrivateProduct = true %}
                    {% endif %}
                  {% endfor %}

                  {% if customer %}
                    <li
                      class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                      {% if settings.animations_reveal_on_scroll %}
                        data-cascade
                      {% endif %}
                    >
                      {%- case item.object_type -%}
                        {%- when 'product' -%}
                          {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
                          {% render 'card-product',
                            card_product: item,
                            media_aspect_ratio: section.settings.image_ratio,
                            image_shape: section.settings.image_shape,
                            show_secondary_image: section.settings.show_secondary_image,
                            show_vendor: section.settings.show_vendor,
                            show_rating: section.settings.show_rating,
                            lazy_load: lazy_load
                          %}
                        {%- when 'article' -%}
                          {% render 'article-card',
                            article: item,
                            show_image: true,
                            show_date: section.settings.article_show_date,
                            show_author: section.settings.article_show_author,
                            show_badge: true,
                            media_aspect_ratio: 1,
                            lazy_load: lazy_load
                          %}
                        {%- when 'page' -%}
                          <div class="article-card-wrapper card-wrapper underline-links-hover">
                            <div
                              class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
                              style="--ratio-percent: 100%;"
                            >
                              <div class="card__content">
                                <div class="card__information">
                                  <h3 class="card__heading">
                                    <a href="{{ item.url }}" class="full-unstyled-link">
                                      {{ item.title | truncate: 50 | escape }}
                                    </a>
                                  </h3>
                                </div>
                                <div class="card__badge {{ settings.badge_position }}">
                                  <span class="badge color-{{ settings.color_schemes | first }}">
                                    {{- 'templates.search.page' | t -}}
                                  </span>
                                </div>
                              </div>
                            </div>
                          </div>
                      {%- endcase -%}
                    </li>
                  {% else %}
                    {% unless isPrivateProduct %}
                      <li
                        class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
                        {% if settings.animations_reveal_on_scroll %}
                          data-cascade
                        {% endif %}
                      >
                        {%- case item.object_type -%}
                          {%- when 'product' -%}
                            {%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
                            {% render 'card-product',
                              card_product: item,
                              media_aspect_ratio: section.settings.image_ratio,
                              image_shape: section.settings.image_shape,
                              show_secondary_image: section.settings.show_secondary_image,
                              show_vendor: section.settings.show_vendor,
                              show_rating: section.settings.show_rating,
                              lazy_load: lazy_load
                            %}
                          {%- when 'article' -%}
                            {% render 'article-card',
                              article: item,
                              show_image: true,
                              show_date: section.settings.article_show_date,
                              show_author: section.settings.article_show_author,
                              show_badge: true,
                              media_aspect_ratio: 1,
                              lazy_load: lazy_load
                            %}
                          {%- when 'page' -%}
                            <div class="article-card-wrapper card-wrapper underline-links-hover">
                              <div
                                class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
                                style="--ratio-percent: 100%;"
                              >
                                <div class="card__content">
                                  <div class="card__information">
                                    <h3 class="card__heading">
                                      <a href="{{ item.url }}" class="full-unstyled-link">
                                        {{ item.title | truncate: 50 | escape }}
                                      </a>
                                    </h3>
                                  </div>
                                  <div class="card__badge {{ settings.badge_position }}">
                                    <span class="badge color-{{ settings.color_schemes | first }}">
                                      {{- 'templates.search.page' | t -}}
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </div>
                        {%- endcase -%}
                      </li>
                    {% endunless %}
                  {% endif %}
3.4/5 - (9 votes)

About

Leave a Comment

Your email address will not be published. Required fields are marked *