How can I improve my Dallas Percussion online store?

[nhellyer]

Hello! If you could give my store some feedback that would be awesome! My website is https://dallaspercussion.com  any feedback will help! Thank you

[biznazz101]

These are just personal opinion, you can consider if you choose:

-One of the announcement bars could be removed and page would fit better upon landing in fullscreen mode, probably the top one as number is listed at bottom and contact link at top of page already. (could be combined into one using code where message changes)

-I would also consider adding text to the slideshow images briefly explaining the store/brand or do so in a rich text section below the slideshow before the featured collection


-Resize product images to all be the same (ideally 1:1 ratio), currently they are not and it displays unevenly, also the prices are pushed off by this as you can see here.

(Want it like this)

-This is just preference really but you could center the "Brands" heading and make logo list images slightly larger

-On locations page I would put this information above the map (map all the way at bottom)

-Add image(s) to the "About Us" page to break up text

-In the none product sections of the store (about us, shirts, contact us, blog page etc) add other content blocks below the primary section before email sign up form, some of the pages I feel give almost an unfinished vibe in particular would remove or add content to the empty blogs section

Only other thing I can think of off the top of my head is maybe add some more color to the stores theme, good luck!

[nhellyer]

Hello! Thank you for your suggestions. I was wondering how I could make the sliding announcement bar without using any apps. I have tried to make it with custom liquid but have not been successful. Anything will help! thank you!

[biznazz101]

You can try adding this code to your theme files, but it may not work or function perfectly. Go to theme>sections>add new section title it announcement-bar.liquid:

{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}

<div
  class="utility-bar color-{{ section.settings.color_scheme }} gradient{% if section.settings.show_line_separator %} utility-bar--bottom-border{% endif %}"
  {{ block.shopify_attributes }}
>
  {%- if section.blocks.size == 1 -%}
    <div class="announcement-bar" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
      {%- if section.blocks.first.settings.text != blank -%}
        {%- if section.blocks.first.settings.link != blank -%}
          <a href="{{ section.blocks.first.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
        {%- endif -%}
          <div class="page-width">
            <p class="announcement-bar__message h5">
              <span>{{ section.blocks.first.settings.text | escape }}</span>
              {%- if section.blocks.first.settings.link != blank -%}
                {% render 'icon-arrow' %}
              {%- endif -%}
            </p>
          </div>
        {%- if section.blocks.first.settings.link != blank -%}
          </a>
        {%- endif -%}
      {%- endif -%}
    </div>
  {%- elsif section.blocks.size > 1 -%}
    <slideshow-component
      class="announcement-bar page-width"
      role="region"
      aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
      aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
    >
      <div class="announcement-bar-slider slider-buttons">
        <button
          type="button"
          class="slider-button slider-button--prev"
          name="previous"
          aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
          aria-controls="Slider-{{ section.id }}"
        >
          {% render 'icon-caret' %}
        </button>
        <div
          class="grid grid--1-col slider slider--everywhere"
          id="Slider-{{ section.id }}"
          aria-live="polite"
          aria-atomic="true"
          data-autoplay="{{ section.settings.auto_rotate }}"
          data-speed="{{ section.settings.change_slides_speed }}"
        >
          {%- for block in section.blocks -%}
            <div
              class="slideshow__slide slider__slide grid__item grid--1-col"
              id="Slide-{{ section.id }}-{{ forloop.index }}"
              {{ block.shopify_attributes }}
              role="group"
              aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
              aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
              tabindex="-1"
            >
              <div class="announcement-bar__announcement" role="region" aria-label="{{ 'sections.header.announcement' | t }}" {{ block.shopify_attributes }}>
                {%- if block.settings.text != blank -%}
                  {%- if block.settings.link != blank -%}
                    <a href="{{ block.settings.link }}" class="announcement-bar__link link link--text focus-inset animate-arrow">
                  {%- endif -%}
                      <p class="announcement-bar__message h5">
                        <span>{{ block.settings.text | escape }}</span>
                        {%- if block.settings.link != blank -%}
                          {% render 'icon-arrow' %}
                        {%- endif -%}
                      </p>
                  {%- if block.settings.link != blank -%}
                    </a>
                  {%- endif -%}
                {%- endif -%}
              </div>
            </div>
          {%- endfor -%}
        </div>
        <button
          type="button"
          class="slider-button slider-button--next"
          name="next"
          aria-label="{{ 'sections.announcements.next_announcement' | t }}"
          aria-controls="Slider-{{ section.id }}"
        >
          {% render 'icon-caret' %}
        </button>
      </div>
    </slideshow-component>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "class": "announcement-bar-section",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "accent-1"
    },
    {
      "type": "checkbox",
      "id": "show_line_separator",
      "default": true,
      "label": "t:sections.header.settings.show_line_separator.label"
    },
    {
      "type": "checkbox",
      "id": "auto_rotate",
      "label": "t:sections.announcement-bar.settings.auto_rotate.label",
      "default": false
    },
    {
      "type": "range",
      "id": "change_slides_speed",
      "min": 5,
      "max": 10,
      "step": 1,
      "unit": "s",
      "label": "t:sections.announcement-bar.settings.change_slides_speed.label",
      "default": 5
    }
  ],
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
      ]
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "announcement"
      }
    ]
  }
}
{% endschema %}

Then click save, go to theme editor and try to add announcement bar section.

You may need to add this to your default.schema file in the locales folder:

 "announcement-bar": {
      "name": "Announcement bar",
      "settings": {
        "auto_rotate": {
          "label": "Auto-rotate slides"
        },
        "change_slides_speed": {
          "label": "Change slides every"
        }
      },
      "blocks": {
        "announcement": {
          "name": "Announcement",
          "settings": {
            "text": {
              "label": "Text"
            },
            "text_alignment": {
              "label": "Text alignment",
              "options__1": {
                "label": "Left"
              },
              "options__2": {
                "label": "Center"
              },
              "options__3": {
                "label": "Right"
              }
            },
            "link": {
              "label": "Link"
            }
          }
        }
      }
    },

Good luck!

[PageFly-Garcia]

Hi @nhellyer ,

This is Garcia at PageFly - Shopify Advanced Page Builder app. 

Congrats on your new store! Your store looks stunning and professional, and I can tell you've put in a lot of effort. I understand that building a beautiful website is not simple. From my CRO expertise, I’d love to give you my suggestions about your homepage as hereby:

1. Change the first Hero Image

The hero image holds great importance in creating a positive first impression on visitors. Based on my experience, the hero image should be simple and avoid using distracting elements and clutter that may divert attention from the main content. Therefore, I highly recommend that you change it as soon as possible, as it might affect the bounce rate.

You can find some examples of how website designers choose hero images on Pinterest by searching for the keyword "hero image ideas" or by visiting several well-known shopping websites such as Apple.

2. Move this block in next slides to center like slide 1

This is because center alignment will help our potential customers focus more on the main part we want to introduce. Moreover, every image in the slideshow should be synchronized to ensure that visitors can easily grasp the information.

3. Keep all products have the same height 

If you want to make your website look more professional, it is necessary to align all featured products. By doing this, your potential customers will be more impressed with your products and find them easily.

4. Add more white space between product

Increase the amount of white space between products to enhance comprehension and emphasize each product. 

This helps improve the overall user experience and can contribute to an increased conversion rate.

5. Add more at least 1-2 sections 

To make your website more trustworthy, you should consider adding 1-2 sections to showcase your store, such as "Brand Stories" or a "Blogs" section. These sections will provide additional information about your store, helping to establish credibility and build trust with your visitors.

Best regards,
Garcia | PageFly team.

[nhellyer]

Thank you for your response! I have tried to fix the image problem with the products but it hasn’t worked. Could you help me out. Thank you so much for everything!

[PageFly-Garcia]

Hi @nhellyer , I suggest you can upload the same image dimension and i saw that you fixed this issue. In case you want to customize more, let check page builder app. 

[nhellyer]

Thank you! that works

[PageFly-Garcia]

You are the most welcome. I am happy that my suggestions are helpful to you. Have sweet day ahead! 

[nhellyer]

Thank you! You too!