Product page checklist: bakit hindi natutuloy ang pagbili

Product page checklist mula sa research ng Baymard at WebAIM: presyo, shipping at returns, larawan, review, add to cart sa mobile, pop-up, search, keyboard.

Pangkat Editoryal ng FixReports13 minutong pagbasa

Kadalasang humihinto ang mga mamimili sa isang product page kapag hindi nila matantiya ang kabuuang gastos, hindi nila mahanap ang mga patakaran sa shipping at returns, hindi nila mahusgahan ang produkto mula sa mga larawan at review nito, o hindi nila madaling maabot at magamit ang buy button, lalo na sa phone. Humaharang din sa pagbili ang mga pop-up na tumatakip sa page, mga policy page na mahirap hanapin, site search na hindi makasagot sa simpleng tanong, at mga control na hindi gumagana gamit ang keyboard. Ang mga bilang sa ibaba ay mula sa industry research ng Baymard Institute at WebAIM, batay sa malalaking sample ng mga site at mamimili; inilalarawan ng mga ito ang mga karaniwang pattern, hindi hula para sa isang partikular na store.

Mga pangunahing punto

  • Sa 2026 survey ng Baymard sa 1,083 adult sa US na namili online sa nakaraang tatlong buwan, 40% ang nagsabing nag-abandona sila ng pagbili sa checkout dahil masyadong mataas ang mga dagdag na gastos gaya ng shipping, buwis at fees (Baymard Institute (magbubukas sa bagong tab)).
  • Natuklasan sa product page benchmark ng Baymard na 67% ng mga nangungunang ecommerce site ang walang tantiya ng kabuuang gastos malapit sa buy section, at 44% ang hindi nagpapakita o nagli-link sa return policy mula sa pangunahing content ng produkto (Baymard Institute (magbubukas sa bagong tab), na-update noong Marso 18, 2026).
  • Sa parehong benchmark, 62% ng mga mobile site ang may product page UX na "mediocre" o mas malala pa.
  • Nakakita ang WebAIM ng mga WCAG failure sa 95.9% ng top one million na home page noong Pebrero 2026 (WebAIM (magbubukas sa bagong tab)).
  • Sa isang review ng Baymard noong 2021 sa 33 top-grossing ecommerce site, 45% ang may functionality na hindi magamit gamit ang keyboard (Baymard Institute (magbubukas sa bagong tab)).

Bakit iniiwan ng mga mamimili ang isang pagbili?

Ang pinakakaraniwang sagot ay nagba-browse lang ang mga mamimili; kasunod nito ang mga dagdag na gastos, mabagal na delivery, mababang tiwala sa paghawak ng card, at sapilitang paggawa ng account.

Ayon sa cart abandonment page ng Baymard, 70.22% ang average na naitalang abandonment rate, na kinalkula mula sa 50 pag-aaral (huling na-update ang page noong Setyembre 22, 2025). Ang chart nito ng mga dahilan, na may label na 2026 data, ay galing sa isang survey sa 1,083 adult sa US na namili online sa nakaraang tatlong buwan. Puwedeng pumili ang mga respondent ng higit sa isang dahilan (Baymard Institute (magbubukas sa bagong tab), hanggang Oktubre 2026):

Dahilan ng pag-abandona sa online na pagbili sa checkoutBahagdan ng mga respondent
Nagba-browse lang ako / hindi pa handang bumili42%
Masyadong mataas ang dagdag na gastos (shipping, buwis, fees)40%
Masyadong mabagal ang delivery20%
Hindi ako nagtiwala sa site sa impormasyon ng credit card ko19%
Pinagawa ako ng account ng site18%
Masyadong mahaba o komplikado ang proseso ng checkout17%
Nagka-error o nag-crash ang website17%
Hindi kasiya-siya ang return policy13%
Hindi ko makita o makalkula agad ang kabuuang halaga ng order12%
Na-decline ang credit card10%
Kulang ang mga paraan ng pagbabayad9%

Mga resulta ito ng survey sa US tungkol sa checkout, hindi sukat ng iyong store. Ilan sa mga ito ang nagsisimula nang mas maaga, sa product page, kung saan unang nakikita ng mga mamimili ang presyo, ang mga patakaran sa delivery at ang mga kondisyon sa return. Ang sarili mo lang na analytics ang makakapagpakita kung alin ang mahalaga para sa iyo.

Malinaw ba ang buong presyo sa product page?

Dapat nasa tabi ng buy button ang kasalukuyang presyo, anumang orihinal na presyo, kung ano ang kasama o hindi kasama, at isang tantiya ng shipping.

Natuklasan sa 2026 product page benchmark ng Baymard na 67% ng mga site ang hindi nagbibigay ng tantiya ng "total order cost" malapit sa buy section, at 81% ang hindi nagpapakita ng presyo kada unit para sa mga produktong ibinebenta sa iba't ibang dami o laki (Baymard Institute (magbubukas sa bagong tab)). Tiyaking ipinapakita ng page ang:

  • Ang kasalukuyang presyo at, sa mga item na naka-sale, ang orihinal na presyo.
  • Unit price para sa mga produktong ibinebenta sa iba't ibang laki.
  • Kung kasama na ang buwis o duties.
  • Ang halaga ng shipping, o ang halaga ng order na may libreng shipping.

Shopify: sa Dawn theme, nagdadagdag ang price block ng "Taxes included." at ng link na "Shipping calculated at checkout." kapag naka-set ang mga setting na iyon at may shipping policy (Dawn source (magbubukas sa bagong tab)). Tama iyon pero hindi ito tantiya, kaya idagdag ang aktuwal mong mga rate o ang threshold para sa libreng shipping sa isang text block.

WooCommerce: ang mga opsiyong "Enable the shipping calculator on the cart page" at "Hide shipping costs until an address is entered" sa WooCommerce > Settings > Shipping ay nakakaapekto sa cart at checkout, hindi sa product page (WooCommerce source (magbubukas sa bagong tab)). Ilagay ang mga rate sa product template o sa short description.

Nahahanap ba ng mga mamimili ang impormasyon sa shipping at returns bago mag-add to cart?

Maglagay ng maikling buod ng tagal ng delivery, halaga ng shipping at palugit para sa return malapit sa buy button, kasama ang link sa buong policy.

Sa Consideration & Purchase Behavior survey ng Baymard sa 1,032 respondent, 60% ang nagsabing hinahanap nila ang impormasyon sa return policy sa product page, pero 44% ng mga site sa benchmark ang hindi nagpapakita o nagli-link dito mula sa pangunahing content ng produkto (Baymard Institute (magbubukas sa bagong tab)). Sa 2026 abandonment survey sa itaas, 20% ang bumanggit ng mabagal na delivery at 13% ang bumanggit ng hindi kasiya-siyang return policy.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: isulat ang iyong mga policy sa Settings > Policies (Shopify Help Center (magbubukas sa bagong tab)). Sa Dawn, ang block na Collapsible row sa product page ay puwedeng magpakita ng text o ng content ng isang page (Dawn source (magbubukas sa bagong tab)), kaya puwedeng lumabas sa bawat produkto ang iisang page para sa shipping at returns.

WooCommerce: gumagawa ang WooCommerce ng page na "Refund and Returns Policy" bilang draft (WooCommerce source (magbubukas sa bagong tab)). Mananatili itong hindi nakalathala hangga't hindi mo ito ine-edit at pina-publish.

Nasasagot ba ng mga larawan ng produkto ang mga tanong ng mamimili?

Dapat ipakita ng mga larawan ang produkto mula sa iba't ibang anggulo, sa tamang sukat (in scale) at habang ginagamit, dahil maraming mamimili ang humuhusga sa laki at fit mula sa mga larawan sa halip na sa mga specification.

Natuklasan sa testing ng Baymard na 42% ng mga user ang sumusubok na alamin ang laki ng produkto mula sa mga larawan nito, habang 37% ng mga site sa benchmark ang walang "in scale" na larawan na nagpapakita ng produkto sa tabi ng isang tao o pamilyar na bagay. At 23% ang walang larawan na may human model, na pinakamahalaga para sa damit, accessories at cosmetics (Baymard Institute (magbubukas sa bagong tab)).

Tiyakin din na lumilipat ang gallery sa tamang larawan kapag pumili ng kulay, na gumagana ang zoom sa phone, at na may alt text ang bawat larawan na naglalarawan kung ano ang ipinapakita ng view na iyon, gaya ng "Linen na polo, likod".

Madali bang mahanap at pagkatiwalaan ang mga review?

Ipakita ang average na rating at bilang ng review malapit sa title ng produkto, i-link ito sa buong mga review, at sagutin ang mga negatibong review.

Natuklasan ng Baymard na 89% ng mga site sa benchmark ang hindi sumasagot sa mga negatibong review, at 63% ang hindi nagpapahintulot sa mga mamimili na lumipat mula sa mga larawan ng isang reviewer papunta sa susunod sa iba't ibang review (Baymard Institute (magbubukas sa bagong tab)). Puwede ring itulak pababa ng mga review widget na huling naglo-load ang page, kaya maglaan ng espasyo para sa mga ito.

Shopify: ipinapakita ng Product rating block ng Dawn ang mga star mula sa isang reviews app, at sinasabi ng theme na kailangan ng app (Dawn source (magbubukas sa bagong tab)).

WooCommerce: sa WooCommerce > Settings > Products, kasama sa mga opsiyon para sa review ang "Enable product reviews", "Show 'verified owner' label on customer reviews", "Reviews can only be left by 'verified owners'" at "Enable star rating on reviews" (WooCommerce source (magbubukas sa bagong tab)).

Madali bang abutin at i-tap ang add-to-cart button sa phone?

Sa phone, dapat makita ng mga mamimili ang presyo, makapili ng variant at ma-tap ang add to cart nang hindi naghahanap, at sapat ang laki ng mga control para matamaan.

Sa 2026 benchmark ng Baymard, 52% ng mga desktop site at 62% ng mga mobile site ang may product page UX na "mediocre" o mas malala pa, at 57% ng mga site ang hindi gumamit ng mga button para sa pagpili ng size, kaya nakatago ang mga size sa mga drop-down (Baymard Institute (magbubukas sa bagong tab)).

Magbukas ng product page sa totoong phone at tingnan ang:

  • Unang screen. Sa nakapatong (stacked) na layout sa phone, kadalasang nauuna ang gallery, kaya puwedeng maitulak ng mataas na larawan ang title, presyo at button sa ibaba ng unang screen.
  • Sticky buy bar. Kung gumagamit ka nito, hindi nito dapat matakpan ang mga naka-focus na element. Sa buod ng W3C sa WCAG 2.2 criterion 2.4.11 (Level AA), sticky footer na nagtatago ng mga naka-focus na item ang ginamit na halimbawa (W3C (magbubukas sa bagong tab)).
  • Mga tap target. Nagtatakda ang WCAG 2.5.8 (Level AA) ng minimum na 24 by 24 CSS pixel, na may mga exception (W3C (magbubukas sa bagong tab)); inirerekomenda naman ng theme guidance ng Shopify ang hindi bababa sa 48 by 48 pixel sa mobile (Shopify (magbubukas sa bagong tab)).
  • Pag-scroll nang patagilid. Hinihingi ng WCAG 1.4.10 Reflow na gumagana ang content sa lapad na 320 CSS pixel nang hindi nag-i-scroll sa dalawang direksiyon (W3C (magbubukas sa bagong tab)). Madalas itong sanhi ng malalapad na size chart at comparison table.

Nakakaharang ba sa pagbili ang mga pop-up?

Itinatago ng mga pop-up na tumatakip sa product page pagdating ng bisita ang impormasyong pinunta ng mga mamimili, kaya mas mainam ang maliliit na banner at limitahan ang mga prompt para mag-sign up.

Inilalarawan ng guidance ng Google Search Central ang mga intrusive interstitial at dialog bilang mga element na humaharang sa pagtingin sa content, at inirerekomenda nito ang maliliit na banner sa halip na mga full-page overlay (Google Search Central (magbubukas sa bagong tab)). Sinasabi ng Shopify na puwede ring magdulot ng layout shift ang pop-up content (Shopify Help Center (magbubukas sa bagong tab)). Dapat maisara gamit ang keyboard ang anumang dialog na pananatilihin mo; hinihingi ng WCAG 2.1.2 No Keyboard Trap (Level A) na makaalis ang focus sa isang component gamit lang ang keyboard (W3C (magbubukas sa bagong tab)).

Nahahanap ba ng mga mamimili ang iyong mga trust at policy page?

I-link ang mga page para sa refund, shipping, privacy, terms at contact mula sa footer ng bawat page.

Sa 2026 survey ng Baymard, 19% ng mga respondent ang nagsabing nag-abandona sila ng pagbili dahil hindi sila nagtiwala sa site sa mga detalye ng kanilang card. Ang malinaw na mga policy at contact details ay mga pangunahing senyales na lehitimo ang isang store.

Shopify: kapag nagdagdag ka ng mga policy sa Settings > Policies, awtomatikong ili-link ng Shopify ang mga ito sa footer ng checkout; para ipakita ang mga ito sa store, idagdag ang mga ito sa isang menu sa Content > Menus (Shopify Help Center (magbubukas sa bagong tab)) o i-on ang setting na Policy links sa footer ng Dawn.

WooCommerce: i-publish ang draft na refund page, saka idagdag ang iyong mga policy at contact page sa footer.

Dapat ibalik ng search ang tamang mga produkto para sa mga pangalan, maling spelling at kasingkahulugan, at dapat din nitong sagutin ang mga tanong gaya ng "returns" o "shipping".

Sa 2026 search benchmark ng Baymard sa 170+ site at app, na-rate na "mediocre" o mas malala pa ang 46% ng mga karanasan sa desktop, 58% sa mobile at 64% sa app, at nakakita ito ng mga isyu sa mga search na hindi tungkol sa produkto, gaya ng search para sa return policy na nagbabalik ng mga produkto, sa 66% ng mga site (Baymard Institute (magbubukas sa bagong tab), na-update noong Abril 29, 2026).

I-test ang iyong store gamit ang pangalan ng isang best seller, maling spelling nito, isang salita para sa category, at "returns". Sa Shopify, nagbabalik ang storefront search ng mga produkto, blog post at page, naka-on bilang default ang predictive search at typo tolerance, at nagdadagdag ang Search & Discovery app ng mga filter at product boost (Shopify Help Center (magbubukas sa bagong tab)). Kaya puwedeng lumabas sa mga search na iyon ang isang regular na page na nagbubuod ng shipping at returns.

Kaya bang bumili ng isang tao gamit lang ang keyboard?

Dapat gumagana gamit lang ang keyboard ang bawat hakbang mula sa pagpili ng variant hanggang sa pag-abot sa checkout, na may nakikitang focus indicator.

Hinihingi ng WCAG 2.2 na gumagana mula sa keyboard ang lahat ng functionality (2.1.1, Level A), na walang keyboard trap (2.1.2, Level A), na may nakikitang focus indicator (2.4.7, Level AA), at na hindi ganap na natatakpan ng ibang content ang mga naka-focus na item (2.4.11, Level AA) (W3C (magbubukas sa bagong tab)). Madalas na kulang ang mga batayang ito. Natuklasan sa 2021 review ng Baymard sa 33 top-grossing site na 45% ang may functionality na hindi magamit gamit ang keyboard at 48% ang hindi palaging nagpapakita ng focus indicator (Baymard Institute (magbubukas sa bagong tab)). Sa scan ng WebAIM noong Pebrero 2026, may average na 56.1 na natukoy na error kada home page, at 71.0 para sa mga site sa Shopping category nito (WebAIM (magbubukas sa bagong tab)).

Isang limang-minutong test:

  1. Mag-load ng product page at pindutin ang Tab nang hindi ginagalaw ang mouse.
  2. Tiyaking palagi mong nakikita kung nasaan ang focus.
  3. Pumili ng size at kulay, at baguhin ang quantity.
  4. Pindutin ang add to cart at tiyaking lumilipat ang focus sa cart drawer at naisasara ito gamit ang keyboard.
  5. Abutin ang checkout button.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Sinusuri ng isang libreng scan ang marami sa mga item na ito sa loob ng mga isang minuto. Ginagawang mga rekomendasyong naka-prioritize ng Ulat sa Conversion ang mga page check gaya ng pagiging nakikita ng presyo, add to cart sa phone, impormasyon sa shipping at returns, mga pop-up, mga policy link sa footer, search, ang daan sa pagbili gamit ang keyboard at ang pag-scroll nang patagilid. Nakabatay ito sa mga page check, hindi sa iyong sales data, at hindi ito nangangako ng anumang benta.

Mga madalas itanong

Ano ang pinakakaraniwang dahilan kung bakit iniiwan ng mga mamimili ang isang pagbili?

Sa 2026 survey ng Baymard sa 1,083 adult sa US, "just browsing" (nagba-browse lang) ang nangungunang sagot (42%). Sa iba pang mga dahilan, nanguna ang mga dagdag na gastos gaya ng shipping, buwis at fees sa 40%, na mas mataas kaysa sa mabagal na delivery sa 20%.

Tataas ba ang conversion rate ko kapag inayos ko ang mga isyung ito?

Walang makakapangako niyan. Inilalarawan ng research ang mga barrier na karaniwan sa malalaking sample ng mga site at mamimili; nakadepende sa iyong mga produkto, presyo at traffic kung magbabago ang iyong resulta kapag inalis ang mga ito, kaya sukatin bago at pagkatapos ng bawat pagbabago.

Saan dapat ilagay ang impormasyon sa shipping at returns sa isang product page?

Malapit sa presyo at sa buy button, bilang maikling buod na may link sa buong policy. Sa research ng Baymard, 60% ng mga respondent ang nagsabing hinahanap nila ang impormasyon sa return policy sa product page.

Kailangan bang nakikita ang add-to-cart button nang hindi nag-i-scroll sa phone?

Walang patakarang nag-uutos nito, pero dapat makita agad ng mga mamimili ang presyo at mabilis nilang maabot ang button. Isang opsiyon ang sticky buy bar, basta't hindi nito tinatakpan ang mga naka-focus na element o ibang content.

Bahagi ba ng conversion ang accessibility?

Oo, sa simpleng paliwanag: ang mamimiling hindi magamit ang variant picker o add-to-cart button gamit ang keyboard o screen reader ay hindi makakabili. Saklaw ng WCAG 2.2 Level AA ang mga batayang ito.

Mga sanggunian

Lahat ng gabay