Design Gift Card with custom CSS

Design Gift Card with custom CSS

One of the special features which makes Mageplaza Gift Card extension stand out from others is that store admins are able to use custom CSS when designing gift card templates. This feature enables extension users to generate templates more precisely and professionally.

Edit pre-made templates using custom CSS

Mageplaza Gift Card provides up to 12 pre-made templates which are ready to be used in multiple special occasions within a year such as Halloween, Thanksgiving, Christmas, New Year, Valentine’s day and so on. Generally, extension users don’t need too much work for editing or redesigning our Gift Card templates. However, if you wish to change something in existing templates, it’s free to reach the template management grid by going to Mageplaza > Gift Card: Manage Templates. Right here, you can see a bunch of ready-to-use gift card templates. Let’s click Edit.

Design Gift Card with custom CSS

You can perform an edit in the gift card design by clicking on the tab Design in the Information block. Generally, all the necessary fields appearing on that gift card have already been well-arranged. To use the custom CSS feature in a certain field, you can hover the mouse over the field’s area to see an arrow showing up at the left corner. Click on the icon to open the Edit Field.

Design Gift Card with custom CSS

You can change many values by using custom CSS such as background-color, padding, border-radius, font-size, and so on. Don’t forget to click Update to save all the custom CSS and then click Save when you finish editing.

Create a new gift card template using custom CSS

To create a new gift card template, for sure, will take you more time. From the top of the template management grid, you can click on Create New Template. After filling the Template information including Template name, Gift Card title, Font family, Background image, Gift card note and choosing some configuration options as the image below. You can move to the Design tab.

Design Gift Card with custom CSS

In Design, you are able to select an existing template and load it to use. This can cut down your workload designing a new one. However, if you still want a brand new template, the Design Template field can be found under the Load from Exist Template field. The Drag and Drop feature gets things done enjoyably and easily.

Design Gift Card with custom CSS

After having all the necessary fields arranged on the template, you can hover the mouse over each field’s area to see the icon which can be clicked on to allow you to use custom CSS. Look at the gif screenshot below to see more clearly.

Design Gift Card with custom CSS

After all, clicking on Update to save the configuration is a must and don’t forget to click Save at the top bar.

Some useful CSS samples

You are free to use CSS to edit every single field’s values such as font, font size, background color and more. Below are some examples which may come in handy:

background-color: #fff
padding: 5px
border-radius: 5px
font-size: 13px

Be aware that all the values should be separated with a semicolon (;)

In conclusion, finding an extension that can satisfy both admins and buyers is what every online merchant want to possess. Because of all outstanding features offered, Mageplaza Gift Card extension deserves to be one of the most appropriate supporting modules for any e-commerce. If you want to know more about how significantly this extension can contribute to the ongoing development of your company, please visit us here: https://www.mageplaza.com/magento-2-gift-card-extension/

Related Posts: