How To Add A Frame To Every Question On The Q&A On Focal Theme

Topic summary

A user seeks help adding frames (borders) around individual questions in their Shopify store’s Q&A section using the Focal theme.

Initial Solution Attempt:

  • First approach involved adding CSS code to theme.liquid file above the </body> tag
  • This created borders but had issues: bottom border disappeared on the last question, and borders appeared around answers when questions were expanded

Iterative Refinements:

  • Code was updated to fix the missing bottom border on the last question
  • Further revision removed borders from answers, applying them only to questions as requested
  • Final solution successfully frames each question without affecting answers

Alternative Approach:
Another contributor suggested adding CSS directly to the theme’s stylesheet (base.css, style.css, or theme.css) in the Assets folder, targeting the .faq__item class with border and margin properties.

Technical Details:
All solutions use CSS to add 1px solid borders with specific RGBA colors and margin adjustments. The discussion includes multiple code snippets and reference images showing the progression from problem to solution.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.

Hey @MS-Ecom2024

Remove the previous code and add this updated code with the same steps.


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed