Trade Theme Help

AI-generated summary

A store owner wanted policy links in the footer to appear separately under the Utilities section rather than grouped under “Terms and Policies.” They initially referenced the Trade theme but later clarified they were using the Horizon theme, making the first Liquid-code suggestion for sections/footer.liquid less applicable.

A later response provided a Horizon-specific workaround that requires no theme code edits: paste custom CSS into the Footer’s Utilities section in the theme editor. The CSS forces the policies popover to display inline, hides the trigger button, and lays out the policy list with flex wrapping.

Screenshots were shared showing the before/after appearance. The requester thanked the helper, and the practical solution appears to be the provided Custom CSS approach for Horizon.

I am using the Trade theme and want to show my policy links separately in the Utilities footer section, instead of grouped under ‘Terms and Policies.’ Can anyone share the code adjustment needed to do this?"

Sorry all, I meant Horizon Theme

Hi @skooch

This requires a small Liquid customization. In the Trade theme, the “Terms and Policies” section is generated automatically from your store policies. To display each policy as a separate link in the Utilities footer, you’ll need to edit the footer section and render each policy individually instead of the default grouped output.

Open sections/footer.liquid, find the policy loop, and replace the grouped policies with individual links for each policy. This is a simple Liquid customization.

Best regards,
Devcoder :laptop:

Does this work the same for the Horizon Theme? I copied the response from an advisor and they had written ‘Trade’ by accident.

No, for Horizon theme the solution should be different.

In “Edit theme”, go to the “Utilities” section in Footer and paste this code into “Custom CSS” setting:

div#terms-policies-popover {
  display: contents;
  opacity: 1;
  position: unset;
  box-shadow: none;
  transform: none;
}

anchored-popover-component button.policy-list-trigger {
  display: none;
}

anchored-popover-component .policy_list {
  display: flex;
  flex-wrap: wrap;
}

Before/After:


Of course, there are other options, but this should be the quickest to implement without any theme code edits.


if my post is helpful, please like it via ♡ button and mark as a solution -- this will help others find it

Hi Tim, thanks so much for that!