Needing Custom CSS for a Quick Quote App Button

[briegger]

Good Afternoon, 

I am looking for some help on this page for Shopify. We have a Quick Quote App button that needs to have some custom CSS done to move it to the right then also remove the Black Border around the button. 

Any help or advice to do this seamlessly would be appreciated. 

 

[asharofficial · Accepted solution]

To make the changes you mentioned on the Shopify page with custom CSS, you can add the following code to your Shopify theme. Here are the steps and the CSS code:

Steps to Add Custom CSS in Shopify

1. From your Shopify admin, go to Online Store > Themes.
2. Click Actions for the theme you want to edit, then select Edit code.
3. Find the theme.css or styles.css file under Assets (or whichever CSS file your theme uses).
4. Scroll to the bottom of the file and add the following CSS code:

/* Move the Quick Quote button to the right */
button#quick-quote-button { /* Replace #quick-quote-button with the actual button ID or class */
margin-left: auto;
margin-right: 0; /* Align to the right */
display: block; /* Ensure proper alignment in its container */
}

/* Remove the black border around the button */
button#quick-quote-button {
border: none;
box-shadow: none; /* Optional: Removes any shadow effect if present */
}

Notes:

• Replace #quick-quote-button with the actual ID or class of the button if it's different. Use your browser's developer tools (e.g., right-click the button > Inspect) to find the appropriate selector.
• If the button doesn't align correctly, ensure its parent container has the correct layout properties (e.g., display: flex; justify-content: flex-end;).

[briegger]

I've attempted to put this in but nothing changes. May this be caused because the button is generated from an extension in Shopify? We are using the Dawn Theme as well so not sure if that affects whatever it is

[asharofficial]

Provide me the store URL so I can give you the exact CSS