STEP FOUR OF FOUR
Styling the cards
They already match your site. Here is how to change them.
Out of the box the cards use your Divi fonts and colours, so they sit comfortably on any site. Everything you change is an ordinary Divi design setting on the module, so it works the way the rest of your site does.
STEP ONE
Open the Design tab
Select a ShopCard module and open Design. There is a group for each part of the card - the image, the product name, the retailer, the description, the price, the button and the disclosure - followed by Divi’s usual Background, Border, Spacing and Layout.
STEP TWO
Colours and backgrounds
Give the card a background, change the colour of each part, and add a border or a shadow, just as you would on any Divi module. Pick from your global palette rather than typing a hex, so the cards follow any later change to your colours.
STEP THREE
Change the fonts
The product name, retailer, description, price and button each take any Divi font, size, weight and letter spacing. Leave them alone and they use your site’s heading and body fonts.
STEP FOUR
Restyle the button
The button carries Divi’s full button options: colours, border, font and hover states, plus an icon that can slide on hover.
GOOD TO KNOW
Styling more than one card
USE A PRESET
Style one card, save its settings as a Divi preset and make it the default for ShopCard Item or ShopCard Collection. Every card you add after that starts with the same look, and editing the preset restyles them all. Romy ships with a preset for each.
THE IMAGE SHAPE
Cards show the item image as an upright 4:5 and crop it from the centre, so products of any shape line up neatly in a grid.
Also in this guide