How to add Marquee Logo on Shopify - Scrolling Logo

Summary

This tutorial guides users through creating a scrolling logo cloud section for their online store, showcasing its simple implementation and customization options. The tutorial covers how to add and configure the section in the store's admin, customize logo size, scrolling speed, and the marquee effect, as well as change the appearance for desktop and mobile views. It also demonstrates how to adjust spacing, grayscale effects, and other settings for a personalized look. With this feature, users can add multiple logos, create a dynamic display, and enhance their store's visual appeal.

Takeaways

• 😀 Learn how to create a scrolling logo section for your store.
• 😀 The scrolling effect can be customized by adjusting speed, size, and more.
• 😀 The scrolling effect stops when you hover over the logos with your mouse.
• 😀 You can see how the scrolling logo appears on mobile devices.
• 😀 To implement, go to your store's admin section and navigate to the 'Online Store' and 'Edit Code' options.
• 😀 Add a new section named 'Scrolling Logo' and replace the existing code with the provided 233-line script.
• 😀 Save the changes to activate the scrolling logo section on your store.
• 😀 The 'Scrolling Logo' section can be customized with images and logos of your choice.
• 😀 Speed adjustments affect how fast or slow the logo scrolls across the screen.
• 😀 You can adjust the height of the marquee to improve the visual appeal of the logo.
• 😀 Additional effects, like grayscale and dark mode transitions, can be applied to the logos.
• 😀 You can add multiple logos, and the more logos you add, the better the scrolling effect.

Q & A

What is the main purpose of the video tutorial?

The main purpose of the video tutorial is to demonstrate how to create and implement a scrolling logo effect for an online store, allowing store owners to customize the scrolling speed, logo size, and other visual effects.

How do you begin the process of adding a scrolling logo to the store?

To begin, go to the store admin panel, then navigate to 'Online Store', and click 'Customize'. From there, access 'Edit Code' to make changes to your theme.

What should you do after opening the 'Edit Code' section?

After opening 'Edit Code', you need to go to the 'Sections' folder, click 'Add New Section', and name it (e.g., 'Scrolling Logo').

What should you do with the existing code in the new section file?

You should remove all the existing code in the new section file to prepare it for the custom code you will be adding.

Where can you find the custom code to paste into the section file?

The custom code can be found in the description link provided in the tutorial. You need to copy all the code (233 lines) and paste it into the section file.

How do you customize the scrolling logo once the code is added?

After saving the code, you can return to the store and use the 'Customize' option to adjust the scrolling logo's settings, such as logo size, scrolling speed, and logo spacing.

What happens when you change the speed setting for the scrolling logo?

When you increase the speed setting, the logo will scroll faster. Conversely, decreasing the speed will make the logo scroll slower.

What customization options are available for the scrolling logo's appearance?

You can customize the logo size, the space between logos, the scrolling speed, and add grayscale effects. Additionally, logos can revert to their original colors when clicked.

Is it possible to add multiple logos to the scrolling logo section?

Yes, you can add as many logos as you want to the scrolling section. The more logos you add, the smoother the scrolling effect will appear.

How does the logo display on mobile devices?

The scrolling logo is designed to function on mobile devices as well, but it's important to preview the design on mobile to ensure it displays correctly.