Need help with Cookie banner Code!!

Muhannad
New Member
3 0 0

Original bannerOriginal bannerModified banner on desktopModified banner on desktopModified banner on mobileModified banner on mobile

Hi Shopify Community,

I need your help with making some changes on code of the Theme Cookie Banner. 

As you can see in the first picture (Original) that is how the cookie banner before making any changes. I changed the Cross(X) to a button (Only necessary) so I am not able to translate this word into German because my store is Multilanguage, What should i do so the word appear in the translation app ?

My second problem is the banner on the mobile version. The Options have been mixed as you can see in the third picture and the banner is not centered as i modified it in the desktop. What should i do?  

 

 

<!-- /sections/popups.liquid -->

<div data-section-id="{{ section.id }}"
     data-section-type="popups">
  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'popup' %}
        <div data-large-promo data-block-id="{{block.id}}" {{ block.shopify_attributes }}>
          <style> .block-scope-{{block.id}}{ --bg: {{ block.settings.promo_bg_color }}; } </style>
          <div data-large-promo-inner class="modal__overlay modal__overlay--newsletter modal-text--{{ block.settings.promo_text_color }} block-scope-{{block.id}}">
            <section class="modal__outer">
              <div class="modal__wrapper">
                <div class="modal__body modal--newsletter">
                  <div class="modal-section">
                    <div class="modal-wrapper modal-wrapper--reverse {% if block.settings.promo_image == blank %}modal-wrapper--no-image{% endif %}">
                      <div class="modal__text">
                        <div class="modal__inner">
                          {% unless block.settings.promo_modal_subtitle == '' %}<p class="modal__subtitle">{{ block.settings.promo_modal_subtitle | strip_html | escape }}</p>{% endunless %}
                          {% unless block.settings.promo_modal_title == '' %}<h2 class="modal__title">{{ block.settings.promo_modal_title | strip_html | escape }}</h2>{% endunless %}
                          {% unless block.settings.promo_modal_richtext == '' %}<div class="modal__description rte">{{ block.settings.promo_modal_richtext }}</div>{% endunless %}

                          {%- assign promo_button_text = block.settings.promo_button_text -%}
                          {%- if promo_button_text == blank -%}
                            {%- assign promo_button_text = 'general.newsletter_form.submit' | t -%}
                          {%- endif -%}
                          {%- assign field_id = 'email_input_modal-' | append: section.id -%}
                          {%- assign button_id = 'subscribe-modal-' | append: section.id -%}
                          {%- assign form_id = 'contact-newsletter-modal-' | append: section.id -%}

                          {%- render 'newsletter-form' form_id: form_id, show_name: block.settings.enable_name, field_id: field_id, button_id: button_id, button_text: promo_button_text -%}
                        </div>
                      </div>
                      {% if block.settings.promo_image %}
                        <div class="modal__image">
                          {%- assign img_api = block.settings.promo_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                          <div class="modal__image-img lazyload"
                            data-bgset="{{ img_api }}"
                            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
                            data-aspectratio="{{ block.settings.promo_image.aspect_ratio }}"
                            data-sizes="auto">
                          </div>
                          <noscript>
                            <div class="modal__image-img no-js-image"
                              style="background-image:url('{{ block.settings.promo_image | img_url: '1080x' }}'); background-size: cover; background-position: center center; background-repeat: no-repeat;">
                            </div>
                          </noscript>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                  <button data-close-modal class="close" title="{{ 'general.accessibility.close' | t }}">
                    {%- render 'icon-close' -%}
                  </button>
                </div>
                <div class="modal__underlay" data-modal-underlay></div>
              </div>
            </section>
          </div>
        </div>
        {% when 'cookie' %}
        <div data-tracking-consent data-block-id="{{ block.id }}" {{ block.shopify_attributes }} class="popup-cookies" data-enable="{{- block.settings.show_cookies_popup -}}">
          {%- assign markup = 'general.cookies.cookies_link' | t -%}
          
          {%- if shop.privacy_policy -%}
            {% capture markup %} <a href="{{ shop.privacy_policy.url }}">{{ 'general.cookies.cookies_link' | t }}</a> {% endcapture %}
          {%- endif -%}

<!--           <div data-tracking-consent-inner class="popup__tracking">
            <h4>{{- 'general.cookies.title' | t -}}</h4>
            <p>{{- 'general.cookies.text_html' | t: cookies: markup -}}</p>
            <button data-confirm-cookies>{{- 'general.cookies.access' | t -}}</button>
            <button data-close-modal class="close" title="{{ 'general.accessibility.close' | t }}">
              {%- render 'icon-close' -%}
            </button>
          </div> -->
          
            <div data-tracking-consent-inner class="popup__tracking">
            <h4>{{- 'general.cookies.title' | t -}}</h4>
            <p>{{- 'general.cookies.text_html' | t: cookies: markup -}}</p>
            <button data-close-modal class="close" title="{{ 'general.accessibility.close' | t }}">
            only necessary
            </button>
            <button data-confirm-cookies>accept all</button>

          </div>
        </div>
      {% else %}
    {% endcase %}
  {% endfor %}
</div>

{% schema %}
{
  "name": "Popups",
  "settings": [],
  "blocks" : [
    {
      "type": "popup",
      "name": "Newsletter",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "promo_modal_subtitle",
          "label": "Subheading",
          "default": "Broadcast"
        },
        {
          "type": "text",
          "id": "promo_modal_title",
          "label": "Heading",
          "default": "Newsletter"
        },
        {
          "id": "promo_modal_richtext",
          "type": "richtext",
          "label": "Description",
          "default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
        },
        {
          "type": "checkbox",
          "id": "enable_name",
          "label": "Show name field",
          "default": false
        },
        {
          "type": "text",
          "id": "promo_button_text",
          "label": "Button text",
          "default": "Join"
        },
        {
          "type": "image_picker",
          "id": "promo_image",
          "label": "Image"
        },
        {
          "type": "header",
          "content": "Colors"
        },
        {
          "type": "color",
          "id": "promo_bg_color",
          "label": "Background",
          "default": "#fff"
        },
        {
          "type": "select",
          "id": "promo_text_color",
          "label": "Text",
          "default": "dark",
          "options": [
            { "value": "light", "label": "Light" },
            { "value": "dark", "label": "Dark" }
          ]
        }
      ]
    },
    {
      "type": "cookie",
      "name": "Cookie consent",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_cookies_popup",
          "label": "Enable cookie tracking popup",
          "info": "This feature uses the Shopify [consent tracking API](https://help.shopify.com/en/manual/your-account/privacy/cookies) and will not show in all regions.  Customer privacy tracking limits must be enabled in your [online store settings](/admin/online_store/preferences).  [Learn More](https://invisiblethemes.com/link/broadcast/docs/cookies)",
          "default": true
        }
      ]
    }
  ]
}
{% endschema %}


<style>
  .popup-cookies {
	position: fixed;
	bottom: 25%;
	left: 34%;
	z-index: 1000;
	display: none;
	max-width: 450px;
	padding: var(--gutter);
	background-color: var(--bg);
	color: var(--text);
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	text-align: center;
}
  .close {
	color: #ab8c52 !important ;
	margin-right: 70px;
}
</style>

 

 

 

0 Likes
KetanKumar
Shopify Partner
20534 2123 7743

@Muhannad 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Muhannad
New Member
3 0 0

Hi 

i hired a shopify-Expert and he did fixed the problem but you can check it if you want. 

www.gracias-store.com 

PW: meamub

0 Likes