How to minimize blank space on product pages?

Store Design

Topic summary

Main issue: Excessive blank space above the FAQ section on product pages in the Shopify “Refresh” theme.

Suggested approach: Edit theme CSS to reduce padding. Guidance provided to navigate Shopify Admin > Online Store > Themes > Edit code, locate the product page section (product-template.liquid or the FAQ’s section file), and decrease the padding-top value (CSS controls spacing).

Backup concern: The requester asked how to back up the theme before editing; a concrete backup method was not yet provided.

Latest development: The requester found relevant code in collapsible-content.liquid showing Liquid-generated CSS:
.section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
They asked how to edit these values. Liquid is Shopify’s templating language; these variables come from theme settings.

Key points:

  • The code snippet is central to understanding the spacing issue.
  • No specific edit instructions for collapsible-content.liquid or theme backup steps were given yet.

Status: Unresolved/ongoing. Open questions: How to properly back up the theme; whether to change the Liquid calculation or adjust the corresponding theme settings to reduce padding.

Summarized with AI on February 1. AI used: gpt-5.
1

Hi,

I am using the refresh theme. I have a lot of blank space above FAQ on all of my product pages. How do I reduce this space?

Sarah

2

To reduce the blank space above the FAQ section on your product pages, you’ll need to make some changes to the CSS code of your theme. Here are the steps to do that:

  • Go to your Shopify Admin, then click on “Online Store” and then “Themes.”
  • Find the theme you’re using and click on “Actions” and then “Edit code.”
  • In the “Sections” folder, find the file named “product-template.liquid.” This is the file that controls the layout of your product pages.
  • Look for the section of the code that controls the FAQ section. This may be in a separate file within the “Sections” folder, or it could be within the “product-template.liquid” file itself.
  • Once you’ve found the section of the code that controls the FAQ section, you’ll need to adjust the CSS code to reduce the blank space above it.

Here’s an example of what the CSS code might look like:

.faq {
  padding-top: 40px;
}

To reduce the blank space, you can change the value of “padding-top” to a smaller number. For example:

.faq {
  padding-top: 20px;
}

Save your changes and refresh the product page to see the results. If you’re not satisfied with the results, you can adjust the value of “padding-top” again until you get the desired amount of blank space.

Note: It’s always a good idea to make a backup of your theme before making any changes, so you can easily revert back if needed.

3

Thanks, how do i make a backup of my theme?

4

This is what I see in file collapsible-content.liquid

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;

How do I edit that?