Appearance
Theme settings
You can use theme settings to make changes to your online store's typography, colors, social media links, and cart page. When you make changes in your theme settings, the changes apply to your entire online store.
- From your Shopify admin, go to Sales channels → Online Store → Themes.
- In the Theme library area, locate Etheryx.
- Click Customize, then select Theme settings
Layout
Site Content
| Setting | Description |
|---|---|
| Max width on desktop | Defines the maximum width the site content can reach on desktop before stopping. |
| Center main content | Centers the main content of the site on desktop. |
| Global corner roundness | Sets the corner roundness for site elements like buttons, inputs, and images. |
Inputs
| Setting | Description |
|---|---|
| Padding | Controls the padding of input elements (e.g., inputs, text areas, buttons) across the theme. |
| Button alignment | Controls the text alignment of buttons. Applied globally, especially when buttons are full width. |
| Button brackets | Adjusts button appearance globally by applying brackets. |
Page Transitions
Applies a smooth page transition animation when navigating between pages. This feature is available only on supported browsers like Chrome and Edge.
Footers
When enabled, the footer is hidden by default with an icon to toggle visibility. Clicking the icon reveals the footer.
Colors
Schemes
Define different color schemes in your theme settings and apply them to various sections of your online store using the color scheme picker.
- A color scheme is a set of colors that can be customized in your theme editor.
- Your theme includes default color schemes that you can modify.
- Add your brand colors to ensure consistency throughout your store.
Global
The default color scheme selected here is applied to all elements across your online store unless overridden for a specific element.
Overlay backdrop
This setting customizes the backdrop elements across your store.
| Setting | Description |
|---|---|
| Background | Sets the background color of the overlay backdrop. |
| Opacity | Adjusts the transparency of the overlay backdrop. |
| Blur | Applies a blur effect to the overlay backdrop. |
Typography
IMPORTANT
Selecting or using multiple fonts font can impact your store's performance. Using multiple fonts can slow down your store.
Body
The main font used across your store.
| Setting | Description |
|---|---|
| Font | Selects the font family for the body text. |
| Font size scale | Adjusts the font size across your store. |
| Underlined links | Applies an underline to links. |
| Strikethrough on hover | Adds a strikethrough effect to links when hovered over. |
Headings
The font used for headings throughout your store.
| Setting | Description |
|---|---|
| Font | Selects the font family for headings. |
| Uppercase | Converts all headings to uppercase text. |
| Enable same as body | Applies the same size to headings as body text, ignoring other heading settings. |
| Font size scale | Adjusts the font size for headings across your store. |
Custom Fonts
Upload and use your own fonts to match your brand identity.
Learn more about custom fonts.
Media
| Setting | Description |
|---|---|
| Round media corners | Applies rounded corners to image and video elements. |
Search
IMPORTANT
Customize the search dialog's appearance from Overlay → Search.
| Setting | Description |
|---|---|
| Enable suggestions | Predictive search displays results as you type. |
| Show vendor | Displays the vendor of a product (visible when search suggestions are enabled). |
| Show price | Displays the product price (visible when search suggestions are enabled). |
Product card
Media
IMPORTANT
Using videos in product cards can reduce website speed and performance. Videos may not autoplay under certain conditions.
| Setting | Description |
|---|---|
| Image | Displays only images in product cards. |
| Image and video | Displays both images and videos in product cards. |
| Show secondary media on hover | Displays secondary media (e.g., additional images or videos) when hovering over the card. |
| Crop media to fit | Automatically crops media to fit the selected aspect ratio. |
| Aspect ratio | Defines the aspect ratio for the media. Learn more about aspect ratios. |
| Custom aspect ratio | Allows you to set the height in pixels when "Media aspect ratio" is set to "Custom". |
| Crop style | Defines how media fits in the card: Wide (crops to fill space) or None (maintains original dimensions). |
| Crop position | Specifies the focal point for cropping: Top, Center, or Bottom. |
Aspect ratio
Available aspect ratio
| Name | Aspect ratio | Usage |
|---|---|---|
| Square | 1:1 | Ideal for product thumbnails and grid layouts. Provides a uniform look across different product categories. |
| Vertical | 4:5 | Offers slightly more height, useful for apparel, footwear, and products that benefit from a taller frame. |
| Standard Portrait | 3:4 | Good for products that are naturally taller, such as bottles or standing items. |
| Portrait Photo | 2:3 | Common in photography; can be used for full-length product images. |
| Wide | 16:9 | Less common for product cards but useful for banners or products that are wide, like monitors or TVs. |
| Portrait Wide | 9:16 | Smartphone videos, social media stories (e.g., TikTok, Instagram Stories, YouTube Shorts), and other video-based content. |
Recommended aspect ratio
1:1 (Square)- Consistency: Provides a uniform appearance in product listings and categories.
- Versatility: Works well with a variety of products, from electronics to accessories.
- Mobile-friendly: Displays well on mobile devices, ensuring a good user experience.
4:5 (Vertical)- Best for apparel: Shows more of the product vertically, which is great for clothing, dresses, and full-length items.
- Enhanced details: Allows customers to see more detail of the product in a single image.
Content
| Setting | Description |
|---|---|
| Show content on hover (desktop) | Displays product information when hovering over the card on desktop. |
| Enable text clipping | Restricts titles, subtitles, and vendor names to one line. |
| Show vendor | Displays the vendor name on the product card. |
| Show subtitle | Displays a subtitle for the product. |
| Show price | Displays the product price on the card. |
| Show available sizes | Shows a list of available variant sizes for the product on hover, replacing the product title. |
| Show available colors | Displays a counter of available colors for the product on hover, replacing the product title. |
| Show rating | Displays the product's rating. Requires a review app to be installed. |
| Fade out sold out products | Fades out the product card for items that are sold out. |
Quick buy
This feature enables customers to quickly add products to their cart by clicking the [+] button on the product card.
Badges
| Setting | Description |
|---|---|
| Show | Displays badges on the product card. |
| Sale badge | Choose how to display the sale badge: None, Label, Percentage, or Both. |
| New badge | Determines how the 'New' badge is applied: Collection: Applies if the product is in a collection containing "new" in the handle. Tag: Applies if the product has the "new" tag. |
| New badge duration | Sets the number of days the 'New' badge is displayed for newly created products. Requires the Date option. |
Cart
IMPORTANT
Customize the cart dialog's appearance from Overlay → Cart.
Type
| Setting | Description |
|---|---|
| Drawer | Displays the cart as a drawer. |
| Page redirect | Redirects users to the cart page. |
Layout
| Setting | Description |
|---|---|
| Show image | Displays product images in the cart. |
| Show vendor | Displays the product vendor. |
| Show tax disclaimer | Displays tax-related information. |
| Show payment methods | Displays available payment methods. |
| Monochrome payment method icons | Uses monochrome icons for payment methods. |
| Show "Continue shopping" button | Adds a "Continue shopping" button. |
| Show "View cart" button | Adds a "View cart" button. |
| Show dynamic checkout buttons | Displays dynamic checkout options. |
| Show cart notes | Allows customers to add notes to their orders. |
Currency codes
- Cart and checkout prices always display with currency codes.
- Example:
$1.00 USD.
- Example:
Free Shipping
| Setting | Description |
|---|---|
| Show free shipping bar | Displays a free shipping progress bar on the cart page. |
| Free shipping minimum amount | Enter the minimum amount for free shipping in your store's main currency (no currency code). To set different amounts per market, use the Translate & Adapt app. |
Social
Define your social media profiles to be displayed in areas like the footer and other locations across your store.
| Setting | Description |
|---|---|
| Type | Choose between text or icon to determine how your social media links appear. |
| Social accounts | Add the URLs for your social media profiles. |
Analytics
IMPORTANT
Enable Google Analytics and Facebook Pixel through the Shopify admin under Online Store → Preferences.
For other analytics providers (e.g., Pinterest, TikTok Pixel), use the provided textareas to add their codes to your store.
Custom Code
IMPORTANT
If you plan to update your theme in the future, avoid editing theme files manually. Manual edits may result in losing your changes during updates. Use the Custom Code section to implement customizations safely.
For more details, visit Etheryx Knowledge Base.
Custom CSS
WARNING
We strongly recommend avoid using the Custom CSS section!
The Custom CSS section has limitations that may result in errors, such as preventing the theme editor from saving changes. To ensure stability and avoid issues, always place your CSS customizations in the Custom Code section.
Theme style
The Theme Style setting allows you to apply predefined design configurations to your theme. This includes default colors, typography, and layout settings, giving your store a cohesive and professional look. It provides a starting point for customization while ensuring your design remains visually consistent.