Show a price information icon

Explain how your store complies with the 30-day prior price using an info icon with custom text.

Freddie

Last Update hace un año

If your theme is online store 2.0 compatible (or you are not sure) then continue reading.

Find out where the icon should appear

Due to the nature of the Shopify theme editor it's not fully possible to do everything within the theme editor, but fear not - this is slightly technical but super simple to do. First of lets add the theme extension.


Open the Shopify theme cuztomization, click on Products and then your product page thats active.

Now add the extension called Information about prior price

Now that its added click on it and configure it to match your theme

So you wont see the icon just yet. For that we need to figure out what value we should put in the CSS Selector setting. This is where it gets slightly technical - but don't worry, I'll take you through it step by step. These instructions are for Chrome but it also works for Safari and Edge

Open a new browser window and go to your store, and open a product page for a product that is on sale with a discounted price.


Right click on the price with the strikethrough price (the original price) and choose inspect.

Now the element should already be selected.

Now go ahead and copy the LAST value inside class="", so in this case "price-item--regular". Then head over to your theme editor again.

Now lets paste the text that you just copied. 
The things you copied are called css class names. And when you paste them into the CSS selector setting they need to start with a .
So like this:
.price-item--regular 

Wait a second or two and now the info icon should appear in your theme editor

Sometimes it's not enough to copy just the last class name, in that case just reach out to us in the chat and we will figure out which values you should be using :)

Was this article helpful?

0 out of 0 liked this article

Still need help? Message Us