Source Code Shopify Testimonial Widget

[alexias42]

Step-by-Step Guide​

Step 1: Create a New Section in Shopify​

1. Go to your Shopify admin panel.
2. Navigate to Online Store -> Themes.
3. Click Actions -> Edit Code.
4. In the Sections directory, click Add a new section.
5. Name your new section horizontal-ticker and create a file named horizontal-ticker.liquid.

Step 2: Add HTML Structure and Liquid Code​

In the horizontal-ticker.liquid file, add the following HTML structure and Liquid code:

liquid
Copy code
<!-- horizontal-ticker.liquid -->

<div class="horizontal-ticker-container">
<div class="ticker-wrapper">
<ul class="ticker">
{% for item in section.settings.ticker_items %}
<li class="ticker-item">{{ item }}</li>
{% endfor %}
</ul>
</div>
</div>

<style>
.horizontal-ticker-container {
width: 100%;
overflow: hidden;
background-color: #f0f0f0; /* Adjust background color */
}

.ticker-wrapper {
display: inline-block;
white-space: nowrap;
animation: ticker-scroll 30s linear infinite;
}

.ticker {
list-style-type: none;
padding: 0;
margin: 0;
}

.ticker-item {
display: inline-block;
padding: 0 20px; /* Adjust padding as needed */
line-height: 40px; /* Adjust line height as needed */
}

@keyframes ticker-scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>

Step 3: Configure Section Settings​

To allow easy management of ticker items from the Shopify admin, add the following JSON schema to your horizontal-ticker.liquid file:

liquid
Copy code
{% schema %}
{
"name": "Horizontal Ticker",
"settings": [
{
"type": "text",
"id": "title",
"label": "Widget Title",
"default": "Ticker"
},
{
"type": "textarea",
"id": "ticker_items",
"label": "Ticker Items",
"info": "Enter each ticker item on a new line",
"default": "Item 1\nItem 2\nItem 3"
}
]
}
{% endschema %}

Step 4: Include JavaScript (Optional)​

If you want to customize the behavior or speed of the ticker, add JavaScript to control the animation:

liquid
Copy code
<script>
document.addEventListener('DOMContentLoaded', function() {
// Calculate animation duration based on content width
let tickerWrapper = document.querySelector('.ticker-wrapper');
let contentWidth = tickerWrapper.scrollWidth;
let animationDuration = contentWidth / 50; // Adjust speed as needed (smaller number = faster)

tickerWrapper.style.animationDuration = animationDuration + 's';
});
</script>

Step 5: Include the Section in Your Theme​

Finally, include your new section in the appropriate place within your Shopify theme:

liquid
Copy code
{% section 'horizontal-ticker' %}

Click to read more...