ℹ️ Note: Ten artykuł został automatycznie przetłumaczony za pomocą AI i może zawierać nieścisłości. Jeśli coś wygląda źle, skontaktuj się z naszym zespołem wsparcia.

Funkcja CSS Custom pozwala na dalsze dostosowywanie wyglądu Konwerter walut poza standardowymi ustawieniami projektowania.

Czy chcesz dostosować kolory, odstępy, granice, cienie, lub dopasować widżet do mocno dostosowanego sklepu, CSS Custom daje dodatkową elastyczność stylizacji bez edycji Shopify pliki motywu.

Przewodnik ten przechodzi przez sposób, w jaki bezpiecznie dodać i zarządzać niestandardowych CSS dla Konwerter walut.

⚠️ Zanim zaczniesz

Przed użyciem CSS należy upewnić się, że:

• Hoppy Currency Converter jest zainstalowany i aktywny
• Zamontowana aplikacja jest włączona
• Proces pokładowy został zakończony
• Masz jasny pomysł na zmiany stylu, które chciałbyś wprowadzić

⚠️ Nieprawidłowy CSS może wpływać na wygląd widżetu. Zawsze uważnie testować zmiany przed pozostawieniem ich na żywo na swoim sklepie.

✅ Krok 1: Otwórz ustawienia CSS

Otwórz Hoppy Currency Converter aplikacja z Twojego Shopify Admin.

Następnie:

→ Kliknij Zaawansowane

→ Przewiń do Ustawienia ekspertów sekcja

→ Zlokalizować Niestandardowe CSS pole

Tutaj należy dodać wszystkie niestandardowe zasady stylizacji.

✅ Krok 2: Zrozumienie dostępnych klas CSS

Aby dostosować Konwerter walutowy, trzeba będzie wybrać odpowiednie klasy CSS.

Klasy te identyfikują różne części widżetu i pozwalają na ich indywidualny styl.

🖥️ Konwerter waluty pulpitu

.futuremlink _ currency _ desktop

Zastosowanie

• Kolory tła
• Granice
• Cienie
• Wyściełanie
• Marginesy

Ta klasa ma na celu Konwerter walut wyświetlany na urządzeniach stacjonarnych.

📱 Konwerter walut mobilnych

.futuremlink _ currency _ mobile

Zastosowanie

• Specyficzne dla mobilności odstępy
• Stylizacja specyficzna dla mobilności
• Mobilna regulacja układu

Ta klasa ma na celu Konwerter walut wyświetlany na urządzeniach mobilnych.

📋 Upadek waluty

.futureblink- currency- dropdown

Zastosowanie

• Stylizacja opadania
• Granice
• Promień granicy
• Cienie
• Kolory tła

Klasa ta kontroluje listę dostępnych walut wyświetlanych po kliknięciu konwertera.

🔘 Przełącznik waluty

.currency- changer

Zastosowanie

• Stylizacja przycisku
• Zaznaczony wygląd waluty
• Granice
• Odstęp

Ta klasa steruje widocznym wyborem waluty klientów interakcji z.

📄 Opcje rozwijane

.option

Zastosowanie

• Poszczególne wiersze walut
• Rozmiar czcionki
• Wyściełanie
• Efekty akustyczne

Klasa ta ma na celu każdą opcję walutową w ramach zrzutu.

✅ Krok 3: Utwórz zasady CSS

CSS używa prostej struktury:

pokrętło
właściwość: wartość;
¶

Przykładowa struktura

• Wybór → Co chcesz w stylu
• Własność → Co chcesz zmienić?
• Wartość → Nowy wygląd

🎨 Przykład: Zmień kolor tła

.futuremlink _ currency _ desktop {
color: # f8f9fa;
¶

To zmienia pulpit Kursy Konwerter kolor tła.

🔲 Przykład: Dodaj granice i cienie

.futuremlink _ currency _ desktop {
granica: 1px lite # ddd;
promień graniczny: 8px;
box- shadow: 0 2px 8px rgba (0,0,0,0.1);
¶

Stwarza to czystszy wygląd w stylu karty.

📋 Przykład: Style the currency Dropdown

.futureblink- currency- dropdown
promień graniczny: 6px;
box- shadow: 0 4px 12px rgba (0,0,0,0.15);
¶

To dodaje zaokrąglone narożniki i silniejszy cień.

📱 Przykład: Dostosowanie odstępu Mobile

.futuremlink _ currency _ mobile {
wyściełanie: 12px 16px;
margina- top: 8px;
¶

Zwiększa to odstępy wokół przenośnego widżetu.

⚠️ Jeśli style nie mają zastosowania

Czasami domyślna stylizacja widżetu może nadpisać własny CSS.

Jeśli tak się stanie, dodaj:

Ważne!

do deklaracji CSS.

Przykład

.futuremlink _ currency _ desktop {
tło - kolor: biały! ważne;
promień graniczny: 10px! ważne;
¶

💡 Stosowanie !important jest zalecane zawsze, gdy niestandardowy styl nie jest stosowany pomyślnie.

✅ Krok 4: Zapisz zmiany

Po dodaniu CSS:

→ Kliknij Zapisz

Zmiany stylizacji są stosowane natychmiast do konwertera walut widget.

✅ Krok 5: Test widget

Odwiedź swój sklep i zweryfikuj zmiany.

Należy sprawdzić:

• Urządzenia pulpitu
• Urządzenia mobilne
• Zachowanie upuszczania waluty
• Różne strony sklepowe

Pomaga to zapewnić, że stylizacja działa konsekwentnie w całym sklepie.

🔍 Potrzebujesz więcej lekcji CSS?

Jeśli chcesz dostosować dodatkowe części Konwerter walut:

1. Otwórz swój sklep
2. Kliknij prawym przyciskiem myszy Konwerter walut
3. Kliknij Kontrola
4. Przegląd struktury HTML
5. Zlokalizuj dodatkowe nazwy klas

Klasy te mogą być używane w polu CSS.

⚠️ Ważne uwagi

Zmiany Idź żyć natychmiast

Nie ma trybu dla Custom CSS.

Wszelkie zmiany stają się widoczne w sklepie jak tylko je zapisać.

Własne ustawienia projektowania CSS

Jeśli reguła stylizacji istnieje w obu:

• Ustawienia projektu
• Niestandardowe CSS

Wersja Custom CSS będzie miała pierwszeństwo.

Desktop & Mobile może wymagać oddzielnego stylizacji

Zmiany w klasach stacjonarnych nie wpływają automatycznie na klasy mobilne.

Aby uzyskać najlepsze wyniki, należy dokonać odrębnego przeglądu obu wersji.

Aktualizacje motywu mogą mieć wpływ na CSS

Duże Shopify aktualizacje motywu mogą zmienić strukturę sklepu.

W takim przypadku niektóre zasady CSS mogą wymagać dostosowania.

🎉 Wynik końcowy

Po skonfigurowaniu:

✅ Konwerter walut pasuje do marki sklepu

✅ Kolory, odstępy i granice można dostosować

✅ Desktop i ruchome układy mogą być stylizowane niezależnie

✅ Zaawansowane wizualne dostosowania stają się możliwe

✅ Styling można regulować bez edycji Shopify Pliki motywu

Korzystanie CSS Custom daje dodatkową kontrolę nad wyglądem Konwerter walut i pomaga stworzyć bardziej bezproblemowe doświadczenie storefront. 🎨

Aktualizowane na: 10/09/2026