Design
Buttons and cards
Style buttons, inputs, product cards, badges, quick add and drawers in Vellora, and see what each preset uses.
Buttons, product cards, badges and drawers have their own groups in Theme settings. Each setting applies everywhere in the store, so one change keeps every page consistent.
Buttons and inputs
Theme settings → Buttons and inputs
| Setting | Range | What it does |
|---|---|---|
| Button corner radius | 0–40 px | Rounds buttons. 0 gives square corners and 40 gives a full pill. |
| Input corner radius | 0–40 px | Rounds text fields, dropdowns, quantity selectors and similar controls. |
Vellora has two button styles:
- Solid buttons use the Solid button background and Solid button label colors of the section's scheme. Use them for the main action, such as Add to cart or Shop the collection.
- Outline buttons use the Outline button label and border color, and fill with it on hover. Use them for a second, less important action next to a solid button.
Some sections let you pick the style per button, for example the button blocks in Image with text and Rich text. In sections with two buttons, such as Image banner and Hero collage, the first is solid and the second is outline.
To make button labels uppercase, set Theme settings → Typography → Button and label letter case to Uppercase.
Product cards
Theme settings → Product cards controls every product card: in collections, search results, featured collections, recommendations and recently viewed products.
| Setting | What it does |
|---|---|
| Image ratio | Portrait (4:5), Tall (3:4), Square (1:1), or Adapt to image to use the shape of each product's first image. |
| Image corner radius | Rounds card images, from 0 to 32 px. It also rounds other small card-like surfaces, such as promotion tiles, the product cards in hotspots and the cart, and testimonial cards. |
| Show vendor | Shows the vendor above the product title. |
| Show product rating | Shows stars from the product rating metafield. You need a reviews app that fills this metafield. |
| Show color swatches | Shows up to five swatches for the first product option that has swatches, then "+3" for the rest. |
| Show second image on hover | On devices with a mouse, shows the product's second image on hover. It only applies when the second media item is an image. |
| Quick add | How shoppers add to cart from the card. See below. |
Quick add
| Option | What shoppers see |
|---|---|
| None | No quick add. Shoppers open the product page to buy. |
| Button over image | A full-width button at the bottom of the image. On desktops with a mouse it appears on hover or keyboard focus; on touch screens it's always visible. |
| Icon button | A round plus button in the corner of the image. |
| Button below price | An outline button under the price. |
When a product has a single variant, quick add puts it straight into the cart. When it has options to choose, or it needs a subscription plan, the button says Choose options and opens quick view, where shoppers pick a variant without leaving the page. Sold out products show no quick add button.
Badges
Theme settings → Badges sets the colors and corner radius of the two badges on product images:
- Sale shows when a product's compare-at price is higher than its price.
- Sold out shows when no variant is available. It takes priority over the sale badge.
Badges don't follow color schemes, so check that the label color contrasts with the badge background.
Media
Theme settings → Media → Image corner radius rounds the larger images in sections, such as Image with text, Hero collage, collection tiles, Shoppable image and the product gallery. Use it together with the product card radius: matching values look calm, and a larger media radius than card radius looks softer.
Drawers and pop-ups
Theme settings → Drawers and popups
| Setting | What it does |
|---|---|
| Drawer style | Attached to edge slides drawers in flush with the screen edge. Floating leaves a 12 px gap around the drawer and rounds its corners. |
| Floating drawer corner radius | The corner radius of floating drawers, from 0 to 32 px. Pop-ups such as quick view use half this value. |
This affects the menu drawer, the cart drawer, quick view, the email pop-up and product pop-ups such as a size guide.
What the presets use
| Setting | Vellora | Sorrel | Graphite |
|---|---|---|---|
| Button corner radius | 2 px | 40 px (pill) | 0 px |
| Input corner radius | 2 px | 12 px | 0 px |
| Card image ratio | Portrait | Square | Tall |
| Card image corner radius | 0 px | 16 px | 0 px |
| Media image corner radius | 0 px | 16 px | 0 px |
| Quick add | Button over image | Icon button | Button below price |
| Show vendor | Off | Off | On |
| Show product rating | On | On | Off |
| Badge corner radius | 0 px | 20 px | 0 px |
| Drawer style | Attached to edge | Floating | Attached to edge |