Theme Settings
Apply any changes to your store using the provided global settings. Press each expandable tab to view the related settings.
Go to Theme settings by clicking the gear wheel icon 
in the upper left corner of the control panel.
Then select the appropriate global section to apply the configurations.
Logo and favicon
Desktop/Mobile
Image Upload logo images for desktop and mobile devices.
Width Adjust the logo size for each device using the available sliders:
Desktop (100-240 px)
Mobile (100-140 px)
Favicon
Image Upload a favicon (the small icon shown in browser tabs).
Colors
General
Base Sets the primary color used across the theme interface, such as Header menu items and icons, sections' headers, product cards details, paragraphs, etc.
Accent Controls the accent color used for highlights and interactive elements, such as subheadings, product prices in cards, buttons, etc.
Background Sets the store's main background color.
Secondary color Controls the secondary background color used in sections and content areas (the tabs in the Header, items added to the cart, icons, unavailable product variants displayed as pills, etc.). Note: Recommended to use a slight contrast compared to the main background color.
Line Sets the color of borders, dividers, and separator lines.
Button primary/Button secondary
Use 'Show background' and 'Show background on hover' to control the button style:
Enabled – Displays a solid button.
Disabled – Displays an outline-style button.
Color settings:
Background / Background gradient – Set the button background color.
Border – Add or adjust the border color.
Text – Set the button text color.
Link button
Text Controls the default text color of link-style buttons.
Hover text Changes the text color when hovered.
Inputs
Controls the appearance of form fields and interactive inputs.
Background Sets the input field background color.
Text Controls the input text color.
Hover background Changes the input background color on hover.
Hover text Changes the input text color on hover.
Hover border Sets the border color on hover.
Hover icon Controls the icon color on hover.
Checkbox Sets the default checkbox color.
Checkbox checked Controls the color of selected checkboxes.
Checkmark Sets the color of the checkmark icon inside checkboxes.
Drawers and popovers
Controls the primary button colors inside drawers and popovers: Mega menu, Cart drawer, product page pop-ups, password page pop-up, etc.
Backdrop Sets the overlay color shown behind drawers and popovers.
Example: The 'Cart drawer'.
Base Controls the primary color used inside drawers and popovers.
Accent Sets the accent color for interactive elements.
Background Controls the background color.
Secondary color Sets the secondary background color. Note: Recommended to use a slight contrast compared to the main background color.
Line Controls divider and border colors.
Example: The 'Size guide' on product pages.
Input background Sets the background color for inputs inside drawers and popovers.
Input text Controls the input text color.
Example: The 'Question popup' on product pages with the backdrop, base, background, input background, and input text color settings.
Input hover background Changes the input background color on hover.
Input hover text Changes the input text color on hover.
Input hover border Sets the input border color on hover.
Input hover icon Controls icon colors on hover.
Checkbox Sets the default checkbox color.
Checkbox checked Controls the selected checkbox color.
Checkmark Sets the checkmark icon color.
Drawers and popovers button primary
Controls the primary button colors inside drawers and popovers.
Use default button colors
Enabled - Uses the global button color settings from the theme.
Disabled - Provides a list of options for manually adjusting colors.
Background Sets the button background color.
Background gradient Adds a gradient background effect.
Border Controls the button border color.
Text Sets the button text color.
Hover background Changes the background color on hover.
Hover background gradient Applies a hover gradient effect.
Hover border Controls the border color on hover.
Hover text Changes the button text color on hover.
Example: The 'Password popup' on the Password page.
Drawers and popovers button secondary
Controls the secondary button style inside drawers and popovers.
Use default button colors
Enabled - Uses the global button color settings from the theme.
Disabled - Provides a list of options for manually adjusting colors.
Blog tags
Controls the appearance of blog article tags.
Text Sets the tag text color.
Background Controls the tag background color.
Background list Assign custom colors to specific blog tags. Note: Separate multiple values with commas.
Example: Clothing:#C2185B, Trends:#00BFA5, Activewear:#3F51B5, Workout:#FFEB3B
Other
Media placeholder Sets the placeholder color shown before media loads.
Rating star icon Controls the color of rating stars.
Typography
Controls the fonts and text styling used throughout the theme.
The Triump uses the Shopify font Library.
Headings
Controls the appearance of main headings (H1).
Font Choose the font used for headings.
Underline heading links on hover Adds an underline effect when hovering over heading links.
Scale Adjusts the heading font size proportionally (100-130%).
Uppercase Displays headings in uppercase letters.
Small headings (H4–H6)
Controls the appearance of smaller headings.
Font Choose the font used for small headings.
Scale Adjusts the size of smaller headings (100-130%).
Uppercase Displays small headings in uppercase letters.
Body
Controls the appearance of regular text content.
Font Choose the font used for body text.
Scale Adjusts the overall body text size (100-130%).
Bold Applies a bolder text weight to body content (100-900).
Menu first level
Controls the appearance of top-level navigation menu items.
Font Choose the font used for main menu links.
Uppercase Displays first-level menu items in uppercase letters.
Scale Adjusts the menu text size (100-130%).
Menu dropdown
Controls the appearance of the Mega menu items.
Uppercase Displays dropdown menu items in uppercase letters.
Mobile menu
Controls the text styling for the mobile navigation menu of all levels.
Uppercase Displays mobile menu items in uppercase letters.
Button
Controls the typography used for buttons.
Font Choose the font used for buttons.
Scale Adjusts the button text size.
Uppercase for buttons Displays button text in uppercase letters.
Product card
The following settings apply to all product cards across a store.
Content alignment Choose how product details are aligned: Left or Center.
Quick view Enables the 'Quick view' button next to the 'Add to Cart' button.
Media
Aspect ratio Choose the image shape:
Adapt to first image – Uses the default proportions of the first image.
Squared – Displays images in a 1:1 ratio.
Portrait – Taller images (3:4 ratio).
Landscape – Wider images (4:3 ratio).
Custom (set from 50%–150%).
Size Choose how images fit inside the container:
Full background – Fills the space (may crop the image).
Contain – Shows the full image (may leave empty space).
Slider Enable showing navigation arrows and allow multiple images.
Enable 'Play uploaded videos on hover' to automatically play a product video when hovering over a product card.
This works only if a video is added to the product and the 'Show video on hover' option is enabled.
The 'Change image on hover' and 'Show video on hover' options appear if the 'Slider' feature remains inactive.
Change image on hover Shows a second image when hovering over a product card.
Show video on hover Plays a product video on hover (if available).
Badges
Follow the step-by-step instructions to build Custom badges.
Sale Show a sale badge.
This option requires adding the comparison price for each product or product variants in Shopify admin -> Products.
Sale badge type Choose how discounts are displayed:
Text - Shows a simple label as the sale text.
Discount percent - Converts text to the discount percentage.
Saved amount - In addition to the text, display additional details, such as the amount.
Pre-order Tags products available for pre-order.
The feature requires additional settings applied in Shopify admin -> Products:
Out of stock Labels unavailable products and disables the 'Add to Cart' button to prevent orders.
Highlight products Select products to highlight with a colored animated frame.
Highlighted products border Set border thickness (1–5 px).
Countdown
Show Displays a countdown timer on product cards. Note: This feature requires configuring additional settings in the admin. Read the details here.
Attributes
Choose which details to show below the product image:
SKU
Type
Vendor
Price
Show Display the product price.
Font size Adjust price size (15–30 px).
Rating
Variant picker
Show Choose how variants appear:
None - Deactivates product variants in product cards.
Dropdown - Shows product variants as drop-down lists.
Pills - Displays product swatches.
Show only on hover Displays variants when hovering over the card.
Hide unavailable product options Hides or disables out-of-stock variants.
The following option is available when the 'Pills' is selected.
Show only color variants Displays only color options and hides other variant types.
Color swatches
Available when 'Pills' is selected.
Type Choose how swatches appear:
Color swatch
Variant image
Text
Aspect ratio (Only 'Varinat image' type) Set the image style:
Default
Adapt to first image – Uses the default proportions of the first image.
Adapt to image – Keeps each image’s original proportions.
Squared – Displays images in a 1:1 ratio.
Portrait – Taller images (3:4 ratio).
Landscape – Wider images (4:3 ratio).
Buy button
Show Choose when the button appears: None, Always, or Only on desktop.
Hide button text on mobile Displays only the icon on mobile.
Show quantity selector Adds a quantity input field (above the button on desktop, before it on mobile). Replaces the 'Add to Cart' text button with the icon on mobile.
Button ‘Add to Cart’ colors / Button ‘Quick view’ colors
Customize 'Add to Cart' and 'Quick view' buttons:
Background / Background gradient – Button background
Border – Button outline
Text – Button text color
Hover state:
Hover background / Hover background gradient - Background color on hover.
Hover border - Border color on hover.
Hover text - Text color on hover.
Badges colors
Controls the colors of product status badges.
Sale Sets the background color for sale badges.
Sale text Controls the sale badge text color.
Preorder Sets the preorder badge background color.
Preorder text Controls the preorder badge text color.
Sold out Sets the sold-out badge background color.
Sold out text Controls the sold-out badge text color.
Price colors Price Controls the color of product prices.
Sale price Controls the color of discounted product prices.
Breadcrumbs
Enable breadcrumbs Show navigation breadcrumbs on store pages.
Choose where breadcrumbs should appear by turning options on or off.
Pages
Except pages Enter page handles (URLs) where breadcrumbs should not be shown.
How to check a page URL handle:
Go to Shopify admin -> Online Store -> Pages.
Select a corresponding page.
Press the 'Edit button' under the 'Search engine listing' block.
Copy a page URL handle.
Blog
Blog posts
Collection
Product
Search
Cart
404 page
Customers page
Search behavior
Search suggestions Enable to show suggested products, collections, or pages as customers type in the search bar. Read the 'Requirements and limitations' article to learn how predictive search is supported.
Currency format
Currency codes Displays currency codes (e.g., USD, CAD) next to prices on product cards and product pages. This option does not interact with the Drawer cart and Cart page.
Currency codes on cart total This setting controls how the total price is displayed in the Cart drawer and Cart page.
Enabled - The cart total includes a short currency label (e.g., $100 USD, $100 CAD).
Disabled - The cart total shows only the symbol (e.g., $100).
Cart
Cart type Specify the cart behaviour after adding a product to the Cart:
Drawer – Opens a slide-out cart.
Page – Redirects visitors to the Cart page after pressing the 'Add to Cart' button.
Popup notification – Shows a small confirmation pop-up.
Cart icon Choose the icon style:
Bag
Basket
Cart
The 'Cart note', 'Show cart discount', and 'Free shipping bar' are available when Drawer is selected.
Cart note Allows customers to add notes to their order.
Show cart discount Displays a field for entering discount codes.
Free shipping bar Shows a progress bar for free shipping.
Accelerated checkout buttons Displays express payment options (e.g., Shop Pay) below the checkout button. Read the 'Accelerated checkout buttons' page for the details.
Cart drawer
Collections Select collections to display when the cart is empty.
Collection card
Text alignment Choose how the collection title is aligned:
Left
Center
Use the 'Image aspect ratio' to choose the shape of images:
Adapt to first image – Uses the default proportions of the first image.
Squared – Displays images in a 1:1 ratio.
Portrait – Taller images (3:4 ratio).
Landscape – Wider images (4:3 ratio).
The following option appears if the 'Squared', 'Portrait', or 'Landscape' option is selected.
Image fit Choose how the image fits:
Full background
Scales the image to fill the whole container.
The image may be cropped to maintain its aspect ratio.
Behaves like a background image (
cover).Equivalent to
background-size: cover
Image position (Full background only) Align an image: Top, Center, Bottom.
Contain
Scales the image to fit entirely within the container.
Preserves the original aspect ratio.
May leave a space around the image.
Equivalent to
background-size: contain
Show product quantity Displays the number of products in each collection.
Show 'View all' button Adds a call-to-action button that links to the Collection list page.
Drawers and popovers
Full-width drawer on mobile Controls how drawers (Cart, Search, and Mega menu) appear on mobile:
Enabled – Displays drawers in full screen.
Disabled – Uses the default width.
Backdrop blur Adds a blur effect to the background behind the cart popup notification, Drawer cart, Mega menu, Search drawer on mobile, and popups on Product pages, etc.
Close button follows cursor Keeps the close button near the cursor for easier access.
Free shipping
Show a cart progress bar that motivates customers to reach one or more rewards. The bar works in the cart drawer, on the cart page and on the product page.
Goal based on (available from version 2.0) Choose what the progress is measured against:
Cart total – progress is based on the amount spent.
Number of items – progress is based on how many items are in the cart.
Free shipping goal The target customers need to reach (shown when milestones are off).
Cart total
Single currency Enter a number (e.g.,
100).Multiple currencies Enter values with currency codes (e.g., USD:1000, EUR:920, GBP:800, PLN: 3600)
Number of items (available from version 2.0) — enter how many items are required (e.g.,
5).
Enable multiple milestones (available from version 2.0) Turn one goal into a multi-step bar with up to 3 rewards (e.g., 2 items → Free Shipping, 3 items → 15% Off). When enabled, the single goal above is replaced by the Milestone blocks below. Each milestone shows a marker on the bar, and the bar keeps filling toward the next reward after one is reached.
Milestone 1 / 2 / 3 (available from version 2.0)
Icon The icon shown on the bar for this milestone (Truck, Gift, Discount, etc.).
Unlocks at When the milestone is reached:
Cart total – an amount (e.g.,
100, orUSD:100, EUR:92, GBP:80for multiple currencies).Number of items – a number of items (e.g.,
2).
Reward The reward name shown under the marker (e.g.,
Free Shipping,15% Off).Message before Text shown while the customer is still progressing toward this milestone. Supports tokens:
{amount}– amount still remaining (Cart total mode){count}– items still remaining (Number of items mode){reward}– this milestone's reward
Message when unlocked Text shown once this milestone is reached. Supports
{reward}.
Tip: only fill in the milestones you need. Leave Milestone 3 empty to use fewer steps.
Colors
Bar color The color of the progress bar fill (and the reached milestone markers) while the customer is still progressing.
Final bar color The color of the bar fill and the milestone markers once the final goal is reached.
Final message color The color of the text shown once a goal is reached. Defaults to the final bar color.
Scroll to top button
Enable Shows a button that lets users quickly return to the top of the page.
Show progress indicator Controls the button style:
Enabled – Shows scroll progress around the button.
Disabled – Displays a simple arrow button.
Position Place the button on the left or right side of the screen.
Bottom spacing / Bottom spacing on mobile Set distance from the bottom (10–100 px).
Right spacing / Right spacing on mobile Set distance from the left or right side (10–30 px).
Colors Customize:
Background color
Icon color
Progress line color
Last updated
Social media
Add links to your social media profiles.
Account 1 – Account 5 Enter URLs for your social profiles (e.g., Facebook, Instagram, TikTok, ?????).
Example: https//facebook.com/yourusername