Store customisation / Prestige theme.

[learnify]

Hello, I need help with a few things for my store.

Store URL: https://linenworldonline.in/

Theme: Prestige Theme (Maestroo)

1) I want to sell fabrics where the quantity selector should be shown in "meters".

2) I want to add "Add to cart" to the collection pages.

3) Please make my announcement bar moving (right to left)

Thanks in advance.

[suyash1]

@learnify - these changes need some complicated coding, I recommend you to hire someone expert and get these tasks done.

These are not the changes like changing an line of code or adding css does the trick.

[DavidEKim]

@learnify 

Hi,

1. If you change the quantity selector, it might confuse your buyers. You may add a variation as a unit (width X length) to let your buyers know.

2. To add "Add to cart" to the collection pages will take a couple of hour to fit your needs. You may hire someone to add the option. To let me check your code, please send me a message.

3. To make the announcement text moving, please follow the steps below. (Please note that I used Prestige 4.4. However, there is no change made for the announcement bar when I checked the DOM structure of the announcement bar).

- Go to Edit code > Sections > announcement.liquid file

- Make a backup the file (or copy the current code and save it as a text file on your computer)

- Replace the file with the code below.

{%- if section.settings.enable_bar -%}
  {%- unless section.settings.home_page_only and template != 'index' -%}
    <section id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="announcement-bar">
      <div class="AnnouncementBar">
        <div class="AnnouncementBar__Wrapper announcement_wrap">
          <span class="AnnouncementBar__Content {% if section.settings.heading_style == true %}Heading{% else %}announcement_heading{% endif %} announcement_text" id="message-1">
            {%- if section.settings.link-1 -%}
              <a href="{{ section.settings.link-1 }}">{{ section.settings.content-1 | escape }}</a>
            {%- else -%}
              {{ section.settings.content-1 | escape }}
            {%- endif -%}
          </span>
          {% if section.settings.content-2 != blank %}
          <span class="AnnouncementBar__Content {% if section.settings.heading_style == true %}Heading{% else %}announcement_heading{% endif %} announcement_text" id="message-2">
            {%- if section.settings.link-2 -%}
              <a href="{{ section.settings.link-2 }}">{{ section.settings.content-2 | escape }}</a>
            {%- else -%}
              {{ section.settings.content-2 | escape }}
            {%- endif -%}
          </span>
          {% endif %}
          {% if section.settings.content-3 != blank %}
          <span class="AnnouncementBar__Content {% if section.settings.heading_style == true %}Heading{% else %}announcement_heading{% endif %} announcement_text" id="message-3">
            {%- if section.settings.link-3 -%}
              <a href="{{ section.settings.link-3 }}">{{ section.settings.content-3 | escape }}</a>
            {%- else -%}
              {{ section.settings.content-3 | escape }}
            {%- endif -%}
          </span>
          {% endif %}
        </div>
      </div>
    </section>

    <style>
      #section-{{ section.id }} {
        background: {{ section.settings.background }};
        color: {{ section.settings.text_color }};
      }
    </style>

    <script>
      document.documentElement.style.setProperty('--announcement-bar-height', document.getElementById('shopify-section-announcement').offsetHeight + 'px');
    </script>
  {%- endunless -%}
{%- endif -%}

<style> 
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.announcement_wrap {
  width: 100%;
  max-width: 100%;
  overflow-y: hidden;
  white-space: nowrap;
}
.announcement_text {
  width: 100%;
  height: 40px;
  font-weight: bold;
  position: relative;
  animation: text_scroll {{ section.settings.text_speed }}s infinite;
  overflow-y: hidden;
}
#message-1 {
  animation-timing-function: linear; 
  animation-direction: reverse;
  overflow: hidden;
  margin-right: 24px; 
}
{% if section.settings.content-2 != blank %}
#message-2 {
  animation-timing-function: linear; 
  animation-direction: reverse;
  overflow: hidden;
  margin: 0 24px; 
}
{% endif %}
{% if section.settings.content-3 != blank %}
#message-3 {
  animation-timing-function: linear; 
  animation-direction: reverse;
  overflow: hidden;
  margin-left: 24px; 
}
{% endif %}
@keyframes text_scroll {
  from { left: -100%; }
  to { left: 100%; }
}
.announcement_heading {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.65;
}
</style>

{% schema %}
{
  "name": "Announcement bar",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_bar",
      "label": "Enable bar",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "home_page_only",
      "label": "Home page only",
      "default": false
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#ffffff"
    },
    {
      "type": "text",
      "id": "content-1",
      "label": "Text 1",
      "default": "First announcement message"
    },
    {
      "type": "url",
      "id": "link-1",
      "label": "Link 1"
    },
    {
      "type": "text",
      "id": "content-2",
      "label": "Text 2",
      "default": "Second announcement message"
    },
    {
      "type": "url",
      "id": "link-2",
      "label": "Link 2"
    },
    {
      "type": "text",
      "id": "content-3",
      "label": "Text 3",
      "default": "Third announcement message"
    },
    {
      "type": "url",
      "id": "link-3",
      "label": "Link 3"
    },
    {
      "type": "range",
      "id": "text_speed",
      "min": 6,
      "max": 20,
      "step": 1,
      "unit": "sec",
      "label": "Text moving speed",
      "info": "Slow for higher number",
      "default": 12
    },
    {
      "type": "checkbox",
      "id": "heading_style",
      "label": "Make text uppercase",
      "default": false
    }
  ]
}
{% endschema %}

- Save the file and go to "Customize" (theme editor) and check it.

You should be able to enter up to 3 messages.

If there are any issues, you have to replace the original code and let me know.

Hope it helps.

Thanks.

[learnify]

Thanks @DavidEKim  for helping,

1) I wanted to change the quantity selector for one reason, We sell sarees and scarves right now, But I want to add fabrics as well, and to make it clear we wanted to add it as the selection to be in meter. It would be great if can start at 2.5 and then add 0.5 making it 2.5, 3.0, 3.5, 4.0, 4.5, 5.0 .... and so on.

2) Yeah sure please check my code, If it can be done sitewide collection, I have seen it working on someone's store using the same theme as ours.

3) Given code is working absolutely like a charm on the web, But in the mobile version whole message is not repeated and it is starting over without completing the message. 

Preview link (Done on copied version of the theme): https://2gmj5db4dqpycmtv-34794897548.shopifypreview.com

[DavidEKim]

@learnify 

Hi,

Add the code below to inside of <style> tag.

@media screen and (max-width: 767px) {
  .announcement_wrap {
    width: 200ch;
    max-width: 200ch;
    overflow-y: hidden;
    white-space: nowrap;
  }
}

It will look as below.

Please message me (Click my ID and click "Send a message" under my ID) for the collaborator access (only for theme access) to your shop. 

Thanks.