abbrechen
Suchergebnisse werden angezeigt für 
Stattdessen suchen nach 
Meintest du: 

Collection Tags - Radio Buttons MITTIG PLATZIEREN

Hofmahlzeit
Tourist
18 0 1

Hi Zusammen,

wdw.PNG

wir haben es geschafft auf unserer Collection Page Radio Buttons hinzuzufügen und diese farblich an unseren Shop anzupassen.

Nun stellt sich die Frage, wie wir diese mittig platzieren.

Sie sollen mittig stehen wo gerade noch "Alle Gerichte" steht!

 

Hier der Code:

 

<ul class="subnav clearfix">
<li{% unless current_tags %} class="active"{% endunless %}>
{% if collection.handle %}
<a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
{% elsif collection.current_type %}
<a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
{% elsif collection.current_vendor %}
<a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
{% endif %}
</li>
{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
<li class="active">
{{ tag | link_to_remove_tag: tag }}
</li>
{% else %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</ul>
<style>
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }
.subnav li { display: block; float: left; }
.subnav li a {
display: block;
height: 28px;
line-height: 28px;
padding: 0 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 20px;
background: #9D3C4F;
margin: 0 7px 7px 0;
color: #00000;
}
.subnav li a:hover, .subnav li.active a {
background: #9D3C4F;
color: #00000;
}
</style>

 

 

Danke schonmal fürs helfen! :)

0 Likes
r8r
Shopify Expert
1432 157 477

Um das so wie gewünscht implementieren zu können, muss der "subnav"-Code in das product-template.liquid File wandern. Dann würde ich das ganze Element in ein grid-Element einpacken; mit 2-3 kleinen zusätzlichen CSSAttributen lässt sich das dann zu deinem Wunschergebnis formen.

Screenshot 2021-01-10 at 22.05.23.jpg

Liebe Grüße,
Mairo

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.