It was like that until today!
We present to you a script from our specialist Roman uk email database Kalugin, with the help of which you can supplement the product card with the required characteristic with a price change and place an order for the product through the basket or application form.
We have prepared two different examples for you:
Example 1
Product card with jeans , where a choice of colors is available and the price changes depending on the customer's preferences:
alt
In the basket:
alt
Example 2
Product card with tours , where packages with different prices are immediately presented:
alt
In the basket:
alt
How to implement
1. Location and design of buttons
We will add buttons for selecting the color/size of the product to the product card. It is important to place these buttons in a regular block or columns inside the product card.
In the block or columns in which we placed our buttons, in the parameters we write the class "color".
In the example with jeans in columns:
alt
In the example with tours in the block:
alt
In the example with jeans, we set up the color selection using buttons like this:
alt
To do this, in the settings of each button on the "View" tab, we set the exact color shades according to RGB, duplicating them for all three button states:
alt
We also turned off the outline, corners, shadow, and in this example, the text was set so that it was not visible:
alt
In the example with tours , where we provide a choice of different packages in one product card, we also used buttons, which this time we installed in the block:
alt
There was no need to make any major changes to the appearance of the buttons; we used the classic design.
2. Setting up the button actions:
In the wrench on the "Action" tab, for each button, specify "Do nothing":
alt
The same is true for the example with tours:
alt
In the "Content" section , for each color/size/price selection button, we will write a special code in which we change only the name and cost of the product to ours:
<div class="name" hidden>