How do you extract the product card CSS from the Refresh theme?

If you haven't read the article How to Customize the Product Card from the Refresh Theme in Shopify and Apply It to the Product Card within the Product Filter Widget, please click the link. This article is a continuation of that one.

The process of changing the data from static to your actual product data has been completed. However, there are still a few more steps needed to refine the appearance of the product card so that it matches your existing theme:

Extract the CSS and JS code from your website.
Paste the CSS and JS code into the custom code section.

The first thing we’ll do is extract the CSS code.

Follow the steps below:

Inspect the product card element, then copy the CSS from the HTML element you just inspected.

Note:

For example, when the code is retrieved, it appears like this:

//store-for-mozilla-mac.myshopify.com/cdn/shop/t/3/assets/component-rating.css?v=179577762467860590411747021650.

replace the code with

https://store-for-mozilla-mac.myshopify.com/cdn/shop/t/3/assets/component-rating.css

Repeat this method to gather all the necessary CSS. If all the CSS is retrieved from the section, you’ll get several CSS rule sets like the examples below.

Once collected, we’ll place the CSS into the custom code section. However, an additional snippet is needed to ensure the CSS runs properly within the Sledge app.

here's an example:

@import url("https://store-for-mozilla-mac.myshopify.com/cdn/shop/t/3/assets/component-rating.css");

Paste the CSS code into the custom code section as shown below, then click the Save button in the top right corner (marked with a red arrow).

Next, refresh your storefront page 2 to 3 times. The updated product card with the newly added CSS will now be visible.

If the appearance is still not perfect, you’ll need to identify and extract more required CSS styles.

Refer to the image above, and copy the CSS highlighted with the red arrow and red box.
Follow the same method as before to extract the CSS, then add the new styles to your existing custom code. Don’t forget to click the Save button in the top right corner.

before:

after:

Go back to the storefront and refresh the page about three times to load the latest design updates.

The CSS extraction process is now complete. The next step is to extract the necessary JavaScript (JS) code.

See the guide on how to extract the product card JavaScript from the theme you're using ?.