/** Shopify CDN: Minification failed Line 12:33 Expected identifier but found "." Line 113:72 Unterminated string token Line 193:141 Unterminated string token Line 208:94 Unterminated string token Line 212:54 Unterminated string token Line 228:50 Unterminated string token **/ COSì è COME SI VEDE SUL MOBILE... dobbiamo siewtemarlo perchè non è bello cosa proponi? Sì, così su mobile è troppo lungo e troppo “a blocchi”. Il problema non sono i singoli elementi: è che sembrano cinque sezioni diverse messe una sotto l’altra. La cosa che cambierei soprattutto è il prodotto in evidenza: sopra l’immagine, come avevamo provato, non funziona. Spezza completamente hero e visual. Io farei questa struttura mobile: Titolo + descrizione CTA Immagine grande del prodotto dentro lo stesso visual mettiamo la card “Regime Ipoallergenico” sovrapposta in basso all’immagine, tipo floating card molto più piccola di quella attuale Servizi due card più compatte icona a sinistra titolo + massimo 2 righe niente altezza enorme Trust niente mega-card verticale con quattro righe farei una griglia 2 × 2 compatta. Hero Adesso hai: titolo testo bottone enorme card prodotto immagine Io invece farei visivamente: Cane e Gatto Cucciaio Consapevolezza alimentare al primo posto: per loro! SCOPRI LO SHOP → poi subito: ┌─────────────────────────────┐ │ │ │ IMMAGINE PET │ │ / PRODOTTO │ │ │ │ ┌─────────────────────┐ │ │ │ TRA I PIÙ SCELTI │ │ │ │ Regime │ │ │ │ Ipoallergenico │ │ │ │ €45 Scopri → │ │ │ └─────────────────────┘ │ └─────────────────────────────┘ Questa secondo me è molto più forte. La card potrebbe essere larga circa 85-90% del visual, alta appena quanto serve, con: TRA I PIÙ SCELTI Regime Ipoallergenico €45,00 · Scopri → Non metterei su mobile il titolo completo: Regime Ipoallergenico – Croccantini per Cani perché è troppo lungo. Se prendiamo automaticamente il titolo Shopify, possiamo limitarlo visivamente oppure impostare un titolo breve dedicato alla hero. Immagine Anche l'immagine adesso mi sembra un po' sacrificata perché la card la spinge verso il basso. La farei più protagonista: visual alto circa 360–390px prodotto leggermente più grande blob dietro mantenuto card floating nella zona inferiore piccolo overlap della card sul bordo inferiore del visual In pratica dovrebbe sembrare un'unica composizione, non card + immagine. Servizi Qui siamo già più vicini, ma li stringerei parecchio. Adesso: card molto alte tanto padding testo abbastanza lungo icone grandi Farei circa: ┌────────────────────────────┐ │ ◯ CONSULENZA │ │ PERSONALIZZATA │ │ Ti aiutiamo a trovare │ │ la scelta giusta. → │ └────────────────────────────┘ e subito sotto quella arancione. Altezza circa 125-140 px, non quasi 180. Inoltre metterei anche la freccia/link su mobile. Al momento sembrano più box informativi che elementi cliccabili. Trust bar Questa è la parte che cambierei maggiormente dopo il prodotto. Adesso occupa quasi uno schermo intero. Non serve. Farei: ┌─────────────────┬─────────────────┐ │ ♡ Pagamenti │ ♡ Assistenza │ │ sicuri │ dedicata │ ├─────────────────┼─────────────────┤ │ ♡ Qualità │ ♡ Consegna │ │ selezionata │ locale │ └─────────────────┴─────────────────┘ E su mobile toglierei completamente i sottotesti: Transazioni protette Sempre al tuo fianco Solo prodotti scelti Servizio sul territorio Sono informazioni ridondanti rispetto al titolo. Così la trust passa dagli attuali ~380 px di altezza a circa 170–190 px. Quindi il risultato finale La hero mobile diventerebbe molto più compatta: Titolo ↓ Descrizione ↓ CTA ↓ Visual prodotto + floating product card ↓ 2 servizi compatti ↓ Trust 2×2 E soprattutto sparisce quella sensazione attuale di: card → card → immagine → card → card → card enorme che è ciò che la fa sembrare poco raffinata. Io sceglierei senza dubbio prodotto sovrapposto all'immagine + trust 2×2. È la modifica che secondo me fa fare il salto maggiore al mobile. ok dimmi cosa ti serve Mi servono solo 2 file, così te lo sistemo davvero bene senza andare a tentativi: cg-hero.css attuale è la cosa più importante, perché tutto quello che vediamo nello screenshot dipende soprattutto dalle regole responsive lì dentro. cg-hero.liquid attualmente presente nel tema solo se dopo il file che ti ho dato hai fatto altre modifiche. Se è ancora esattamente l'ultima versione che abbiamo preparato, non serve che me lo rimandi. Con questi posso fare direttamente: prodotto in evidenza floating sull'immagine su mobile; immagine più grande e proporzionata; hero più compatta; servizi più bassi e ordinati; Trust bar 2×2; sottotesti trust nascosti solo su mobile; spaziature mobile completamente riviste; tablet sistemato separatamente dal desktop; mantenimento dell'attuale desktop senza sballarlo. Mandami quindi cg-hero.css e, se è cambiato, anche cg-hero.liquid. Poi ti restituisco i file completi pronti da sostituire. Pasted code(10).css File Pasted text (2)(10).txt Documento non modifichiamo epr ora desktop Perfetto. Ho modificato solo lo smartphone ≤749 px. Desktop resta identico e anche il tablet 750–989px mantiene il comportamento attuale. Nel CSS originale il mobile partiva proprio dal breakpoint max-width: 749px, quindi ho sostituito soltanto quella parte. Sul mobile ora hai: titolo leggermente più compatto CTA invariata ma con spaziature migliori immagine prodotto più protagonista Prodotto in evidenza floating nella parte bassa dell’immagine, non più come enorme card separata sopra titolo prodotto massimo 2 righe prezzo compatto a destra servizi più bassi e compatti icone servizi ridotte meno padding inutile Trust bar 2×2 sottotesti della trust nascosti su smartphone trust molto più bassa rispetto a prima Ho dovuto modificare anche una piccola parte del Liquid perché le regole responsive del prodotto erano inserite direttamente nello