Circle Menu Shopify

Jetzt geht´s los 🚀

Auf dieser Seite findest du die notwendige Installationsanleitung sowie den Code, um die Section direkt in deinen Shop zu integrieren. Nutze sie, um deinen Shop schnell und einfach zu optimieren.

Viel Erfolg beim Installieren und Gestalten!

So sieht es in wenigen Minuten bei Dir aus! ⚡

Und so funktioniert es!

1. Shopify Dashboard > Onlineshop > Theme > Code bearbeiten

2. Sections (Abschnitte) > "Neuen Abschnitt hinzufügen"

3. "Liquid" auswählen > Datei benennen (z.B. circle-menu) > Fertig

4. Code kopieren > Code aus der .liquid löschen > kopierten Code einfügen > "liquid formatieren" klicken

{% schema %}
{
“name”: “Instagram Navigation”,
“settings”: [
{
“type”: “color”,
“id”: “text_color”,
“label”: “Textfarbe”,
“default”: “#333333”
}
],
“blocks”: [
{
“type”: “story”,
“name”: “Story Circle”,
“settings”: [
{
“type”: “url”,
“id”: “link”,
“label”: “Link”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Bild”
},
{
“type”: “text”,
“id”: “label”,
“label”: “Label”
}
]
}
],
“presets”: [
{
“name”: “Sayweb – Instagram Navigation”,
“category”: “Custom”
}
]
}
{% endschema %}

<div class=”story-navigation-container”>
<div class=”story-navigation-wrapper”>
<div class=”story-navigation”>
{% for block in section.blocks %}
<div class=”story-item”>
<a href=”{{ block.settings.link }}” class=”story-link”>
<div class=”story-circle”>
<img src=”{{ block.settings.image | img_url: ‘100×100’ }}” alt=”{{ block.settings.label }}”>
</div>
<span class=”story-label” style=”color: {{ section.settings.text_color }};”>{{ block.settings.label }}</span>
</a>
</div>
{% endfor %}
</div>
</div>
</div>

<a style=”display: none;” href=”https://sayweb.de”>Sayweb Webagentur</a>

.story-navigation-wrapper {
overflow-x: auto;
white-space: nowrap;
max-width: 100%;
}

.story-navigation {
display: flex;
gap: 20px;
}

.story-item {
flex-shrink: 0;
text-align: center;
width: 80px; /* Fixed width to control number of visible items */
}

.story-circle {
width: 80px;
height: 80px;
border-radius: 50%;
padding: 2px;
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.story-circle img {
border-radius: 50%;
width: 100%;
height: 100%;
}

.story-label {
margin-top: 8px;
font-size: 14px;
}

.story-link {
text-decoration: none;
}

/* Für PC – Zeige 8 Kreise */
@media (min-width: 768px) {
.story-navigation-wrapper {
max-width: calc(80px * 8 + 20px * 7); /* Platz für 8 Kreise und Abstände */
}
}

/* Für Handy – Zeige 4.5 Kreise */
@media (max-width: 767px) {
.story-navigation-wrapper {
max-width: calc(80px * 4.5 + 20px * 4); /* Platz für 4.5 Kreise und Abstände */
}
}
</style>

5. Shopify-Dashboard > Onlineshop > Theme anpassen > Abschnitt hinzufügen > Section auswählen

6. Alles erledigt! ✅ Deine Section kann jetzt im Onlineshop angezeigt werden!

Nico Münster
9. September 2024

Lieferdatum Hinweis-Section für Shopify

Mit der Circle Menu-Section bietest du deinen Kunden eine einzigartige, von Instagram inspirierte Navigationserfahrung. Im Theme Editor kannst du ganz einfach die Farben, Schriftarten und Symbole anpassen, um das Menü perfekt an dein Markendesign anzupassen. Definiere die Verlinkungen zu deinen wichtigsten Seiten, wähle Layout und Anordnung der Kreiselemente und justiere Bildgrößen sowie Abstände nach deinen Vorstellungen. Das Circle Menu hilft dir, deine Kunden auf ansprechende und intuitive Weise durch deinen Shop zu führen.