Theme Settings
Welcome! Let’s set up the Shine Theme Settings by reading this article.
Table Of Contents
Accessing Shine Theme Settings
After installing Shine Theme to your Shopify account, you can find the theme settings by clicking on the second icon on the menu bar.
Color Schemes
To adjust the color scheme, go to Theme Settings and select the colorful circles in the “Color Schemes” section. Here, you can choose from pre-set color schemes or design your own.
A color scheme is a collection of harmonizing colors for your store’s text, background, buttons, and badges. Apply these color schemes to various sections of your store to achieve a cohesive and visually appealing look.
According to Shopify, you have the flexibility to add 21 color schemes to your store, allowing you to tailor the look and feel to your unique preferences and branding.
To change a color scheme, just click on the one you want. This will open a window where you can pick a color or type in a color code. Remember to choose colors that everyone can see easily, so your store is welcoming to all:
- In general, you can edit color for background and content on the page or section.
- In Solid button, you can edit color background and content for button.
- In the outlined button, you can edit color for content and outline.
General Colors
General colors are only applied to sections that do not use a card scheme.
- Page background: The default website background color.
- Background gradient: The website background color with a gradient effect. This will replace the solid background color when selected. If the visitor’s browser does not support gradient backgrounds, some section backgrounds may revert to the default background color.
Drawer/Popover
Drawer/Popover: This refers to a section that pops up, like the prompt to enter a password on a password page, or the display that appears when you use the search function. It’s a type of overlay that shows up over the main content, typically used for short, focused tasks like searches, logins, or additional information.
To settings for this section, please follow these step:
- You can select the color scheme for drawer and popover here, please note that this scheme is synchronized with the color schemes.
- Drawer/popover mask overlay: When you open a drawer or popover menu (like a sidebar menu or a cart summary), the rest of the page is often covered with a slightly opaque layer, which is the mask overlay. This overlay helps to focus the user’s attention on the drawer or popover by visually muting the rest of the page. You can change the color code to the color which you want to match with the color scheme.
- Blurry element: This is a layer that lies above the page background and below the section background. To see this layer, you will need to use a transparent background for the section.
- Tips: Remove the hex code part in the background within the color scheme to make the section transparent.
Product Badge
- Sale text: Applied for the text used in the badge style, this is the text that appears on products that are on sale.
- Sale background: This refers to the background color or design behind the sale text. The background can often be a bright or contrasting color to catch the customer’s eye.
- Sold out text: Applied for the text used in the badge of products that are no longer available for purchase because they have sold out.
- Sold out background: Similar to the sale background, this is the background color or design behind the sold out text. It’s typically used to distinguish sold-out items from those that are available, often using muted or distinct colors to indicate the unavailability of the product.
Typography
To change Typography, we can go to Theme settings > Typography, where you can universally change the font family of headings and body texts, as well as font scale level. Check this article to learn more about the Typography settings in Shine theme.
Product Information
You can switch variant option to option swatch by following this part.
The default setting for displaying the low stock threshold is 5, and it can range from 0 to 10. If you wish to have no threshold, set it to 0. Shine supports variant options that display as swatches.
Variant swatches
You can enter the variant option you want to switch into variant swatches into the field. We recommended to use options that are highly distinctive and recognizable to the general buyer base.
Display type
You can display variant swatches value in 2 ways:
- Custom value: Enter the custom value in the custom value field below. This allows for quick and real-time customization, and supports the use of HEX colors and images (uploaded in Shopify files).
- Variant image: Use the variant image to display instead of having to custom. This ensures dynamic and consistent updates when the image in the product and in the theme is changed.
You can only add one variant type to the placeholder, and variant swatches will apply specifically to that type.
The variant type entered in the ‘Variant option’ placeholder must exactly match the name of the variant you have defined for the product, and it must be in lowercase.
If you want to use image for variant swatches, you will need to upload the image png file onto the Shopify Files. Shine theme supports PNG and JPG files.
Then enter the Name of the variant with the image URL.
For example, I have uploaded the image file with the URL ” https://cdn.shopify.com/s/files/1/0778/4942/8266/files/Black-img.jpg ” and want to add it for the “Black” color so I need to add in the Variant swatches rules: ” Black: https://cdn.shopify.com/s/files/1/0778/4942/8266/files/Black-img.jpg
Appearance
In Appearance, you can set up the General appearance of your page, as well as the appearance of Spacing and Animations.
For adjusting the spacing, you can modify the Page maximum width with a range of 1300 to 2000 and a step increment of 100.
And next, you can select Corner radius for these following parameters:
- Section container: Sharp or Rounded
- Drawer/popover: Sharp or Rounded
- Button: Sharp or Pill (Button corner radius apply for: Buttons, Pagination and Tag)
- Common components: Sharp or Rounded
Settings for icon, you can select Icon thickness: Regular or Bold.
Product Card
You can adjust all the settings for the product card here. In the general section, you can choose between ‘card‘ and ‘standard‘ styles. Additionally, for the Content Alignment, there are two options available: left and center.
You can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.
With Image Ratio, you can select one of 4 types: Square, Portrait (3×4), Landscape (4:3) and Adapt to image.
And there are 2 options for the image fit: fill and fit.
To show a second image on hover, you just need to enable this function here.
In the information tab, you have three options for displaying the sale badge to choose from:
- Never
- Text Only
- Text + Sale Amount
Additionally, there’s an option to enable the ‘Show Sold Out’ badge.
Quick Shop
Quick Shop is a convenient pop-up that displays essential product information when a customer clicks on the “Quick Shop or Quick Add” button. It allows customers to quickly review product details and make informed purchase decisions without leaving the current page.
Check this article to learn more about the Quick Shop settings in the Shine theme.
Collection Card
Firstly, you can select the color scheme for the collection card by selecting from the defined scheme. To customize the color scheme, access Theme Settings > Colors.
To set the overlay opacity, simply drag to the desired value within the range of 0% (fully transparent) to 90% (partially opaque). The default setting is 30%.
After that, for the Content Alignment, there are two options available: left and center.
Shine theme offers 3 collection image ratios to suit your preferences:
- Portrait (2:3): Ideal for showcasing products with vertical emphasis, such as clothing or accessories.
- Square: A classic and versatile option that ensures a consistent look across your collections.
- Landscape (3:2): Perfect for highlighting products with horizontal elements, such as furniture or appliances.
To Show product quantity, you can enable this function here.
Search
Shine theme supports 2 search types: page and drawer.
After that, you can select Predictive search results displaying:
- Blog posts
- Pages
- Collections
For the Search results displaying, you can select:
- Blog posts
- Pages
- With Image Ratio of Product result, you can select one of 4 types: Square, Portrait (3×4), Landscape (4:3) and Adapt to image.
- With the Image Ratio of Collection result, you can select one of 3 types: Square, Portrait (3×4) and Landscape (4:3). You can also enable the “Show product quantity” here.
- With the Image Ratio of Blog post result, you can select one of 2 types: Square and Landscape (4:3). You can also enable the “Show blog post tag” here.
Cart
Shine theme supports 2 cart types:
- Drawer: The cart appears as a slide-out drawer on the right side of the page.
- Page: The cart appears as a dedicated page on your website.
By default, cart type is set at Drawer.
You can select which type of cart you want to use:
- Popover notification
- Show the Cart drawer
- Direct to Cart page
- Do nothing
After that, you can also select which details you want to display with the cart:
- Enable order notes: Allows customers to leave notes for their order.
- Enable dynamic checkout button: Displays a checkout button that changes color and text depending on the contents of the cart.
- Show tax and shipping information: Displays the estimated tax and shipping costs for the items in the cart.
Next, you can add a button link for the cart if this cart is empty. This button can redirect users to a promotions page or showcase hot products, facilitating cross-selling opportunities:
On the next step, you can select one of 4 types: Square, Portrait (3×4), Landscape (4:3) and Adapt to image for the Image ratio of Product.
Free shipping bar
When you enter a minimum amount, it creates a goal for the total price that the buyer must reach to qualify for free shipping.
By default, the currency of the free shipping will automatically follow the store currency. For buyers using a different currency, it will be automatically converted based on the exchange rate provided by Shopify.
To change the color for this bar, you just need to select the color or enter the color code on the settings.
Social Media
Shine theme allows you to connect with most of social media, including:
- X
- YouTube
- Vimeo
- TikTok
- Tumblr
- Snapchat
You can freely add or remove any social media by connecting with its URL account. If you do not want to connect with any of them, simply leave this part blank.
This can be used in multiple sections, such as the header, footer,…
Favicon
Adding your favicon is simple and quick. Just click the “Select image” button and the media manager will pop up. From there, you can drag and drop your logo or select it if it’s already uploaded.
Currency
By default, currency codes are displayed for cart and checkout prices, ensuring clear pricing information. You can optionally enable currency codes for product cards, product details, and other areas of your store. If you disable currency codes, they will only be shown for cart and checkout prices.
It’s not too complicated to set up Shine Theme Settings, but if you’re still having difficulties, feel free to drop us an email via hi@saleshunterthemes.com or leave us a message on this page for more support.