Changing parameters for a block just for 1 page

Store Design

Topic summary

Main issue: On the Contact page under the SUPPORT menu, a FAQ “Collapsible content” block and a “Contact Form” block had mismatched styling due to prior global block parameter changes. The goal was to make both blocks visually consistent, either by removing shadows from the FAQ or adding matching shadows to the contact form.

Recent update: A CSS override was provided to remove the shadow effect:

  • Add to base.css: .content-container:after { box-shadow: none !important; }

Outcome: The change worked as intended. The visual mismatch was resolved and the solution was accepted. The discussion is concluded.

Notes:

  • CSS is the styling language for web pages; base.css is a main stylesheet file. box-shadow controls the shadow effect, and !important forces the rule to override other styles.
  • Attached images illustrated the style differences; the code snippet was central to the fix.
  • The FAQ remains on the same Contact page; no page structure changes were needed.
Summarized with AI on February 7. AI used: gpt-5.
1

Hello! I’ve been customising my SUPPORT menu and I’ve decided to add the FAQ section in addition to the Contacts section. I’ve inserted the contacts with a “Contact Form” block and I wanted to customise my FAQ with a “Collapsible content” block. However, I’ve already applied some changes to the blocks, which are vital for other parts of the website, etc the home page, so I don’t want to change them. Here are these parameters:

photo_5309859113494233609_y.jpg
photo_5309859113494233609_y.jpg492×922 36.5 KB

But because of this change in parameters, my FAQ block and the contact form don’t match in their style. Here it is:

Screenshot 2022-09-30 at 15.56.32.png
Screenshot 2022-09-30 at 15.56.32.png2186×1086 91.5 KB

What should I do to change the FAQ block so that it didn’t ruin the sleek design? Thanks.

Website: https://project-avignon.myshopify.com/pages/contact

Password: meolyo

2

Hi there,

Can you share the link of the FAQ page? I couldn’t find it within your website menu.

To further clarify, you want to have round borders on the FAQ page?

3

Dear Gabriel,

The FAQ is supposed to be a block on the same page as the Contact form, I don’t really want to move it to another page.

Therefore, both of these blocks are already located at this page: https://project-avignon.myshopify.com/pages/contact. This is the SUPPORT menu in the header of the website.

What I wanted to do is either remove the filters from the FAQ “Collapsible Content” block, so that both FAQ block and the contact form below don’t have any shadows or filters applied. Or (another option) is to add the same shadows which are present within the FAQ “Collapsible Content” block to the Contact form below.

Just to make both blocks look same in terms of design.

4

Hello,

The below code should achieve what you are looking for:

.content-container:after {
  box-shadow: none !important;
}

Adding the above code to your ‘base.css’ file should be working as expected.

GabrielS_0-1664552751384.png
GabrielS_0-1664552751384.png2526×1191 47.8 KB

Let me know if this fixed your issue.

Kind regards,

Gabriel

5

Dear Gabriel, thank you very much! The offered code helped. Solution accepted.

Have a wonderful day!