How to custome product card from the Refresh theme in Shopify and apply it to the product card within the Product Filter widget ?

When you want to use the product filter widget in the Sledge app, we've provided several powerful presets including product card designs so you don’t have to create them manually.

However, there may be times when you'd prefer to use the product card design from your own theme within the product filter widget.

Can Sledge support this kind of customization?

Yes, we've taken that into consideration. Sledge allows you to fully customize your product cards to match your preferences.

Here are the steps, which we will explain clearly below:

Go to the Apps Sledge.

Select the Customizer menu

Choose Product Filter Widget and click the Start Customizing Widget button.

Click the icon in the top left corner marked with a red arrow

A pop-up will appear; navigate to the Custom JavaScript tab

Copy the Product Card Template code by accessing the provided template.
Paste the copied code into the Custom Code section

Scroll down until you find the renderProductCard function

"Inside the renderProductCard function, locate the return statement, then select the code from the beginning of the return to the end. The return statement is at line 686.

Drag your code from here:

to here

Then delete the code you dragged, and it will look like this

To obtain your product card's code, follow these steps

Copy the HTML structure

Paste the copied HTML into the Custom Code section you created earlier

Then save it in the top right corner, marked with a red arrow.

And the result on the storefront will look like this. The product data will appear according to the code you copied in the previous step

We will try changing the image, product name, price, and product ID.
Locate the image element.

Then clear the srcset and src attributes.

Replace them with the image URL from your actual product data.

Next, update the product title text and static product handle with the real data from your product.

Then, update the price and the strikethrough price with the actual product pricing:

Before:

After:

Then replace the "Add to Cart" form with the actual data from your product.

Before:

After:

Click the Save button in the top right corner to apply the changes.

Below is the complete updated code that you can copy and study based on the modifications made.

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:

Click this link to learn how to extract the product card CSS from the theme you're using.