Custom Styling

Everything visible to your customers on your online store that you install from attempts to pick up elements of your theme styles automatically, though many online stores use themes that are highly customized and as a result styles and layouts require extra effort to match. If you wish to have a different styles, you can change these styles as you see fit using CSS, or reach out to us for support ([email protected]).

Please note that any time you switch themes, all snippets (Account management, orders and cart) and the Subscription Widget block will have to be added again and re-styled if you’ve done custom styling.

Styling the Subscription Widget

You style the Subscription Widget on your product pages in Awtomic, not in your theme code:

1. Go to Tools → Widget Configurations and edit your widget.
2. Change colors, spacing and typography on the Styles tab. To show the frequencies as buttons or radio buttons instead of a dropdown, set Frequency Selector Style on the General tab.
3. For anything the settings don't cover, add CSS on the Custom CSS tab. Target the widget's elements with the .awtomic-sw class prefix.
4. Click Save. The preview shows your changes as you edit.

See Subscription Widget for every setting.

Styling the customer portal and Build-a-Box

The customer portal, Build-a-Box and other elements that Awtomic adds to your shop attempt to take on your theme's styling, and you can override these styles in your own CSS. Ideally you should create your own new asset file for custom CSS and import it yourself. For class names, you can inspect any element that is added on your site and override the class name with your own custom styling.

How to Add Custom Styles:

1. Head over to your Shopify dashboard.
2. Make your way to Online Store > Themes.
3. Tap on Actions > Edit Code.
4. Track down and select your theme's main CSS/SCSS file. This might bear a name like styles.scss.liquid or similar.
5. At the tail end of this file, sprinkle in your custom styles.

🚧

Point of Caution:

Steer clear of classnames like "Typography__Span-sc-1enup42-1" and "uJwtZ". These will change without notice. Only use classnames in plain english that seem similar to the list in this document.

As a quick illustration, to jazz up the background color of the button--primary, you could pop in:

.button--primary {
    background-color: #FF5733; /* Or swap with your favorite shade */
}

Classnames to Customize:

Below is a curated list of classnames ripe for customization. Keep in mind, certain classnames might seem eerily alike, but they each hone in on unique elements. Precision is key!

.awt-filter-button,
.awt-filters-container,
.awtomatic-progress-container,
.awtomatic-progress-count-label,
.awtomatic-progress-item--pending,
.awtomatic-progress-item,
.awtomatic-progress-product-count-container,
.bundle-button,
.bundle-close-icon--modal-close,
.bundle-close-icon,
.bundle-container,
.bundle-create-content,
.bundle-hide-sm,
.bundle-lazy-image-container,
.bundle-product-card__price,
.bundle-product-card__quantity-button-container--button,
.bundle-product-card__quantity-button-container,
.bundle-product-card__title,
.bundle-product-card,
.bundle-scrollable-section,
.bundle-section__nav,
.bundle-section__title,
.bundle-section-container,
.bundle-section,
.bundle-step-label,
.bundle-stepper-counter--complete,
.bundle-stepper-counter--incomplete,
.bundle-stepper-header,
.bundle-stepper-item--complete,
.bundle-stepper-item--incomplete,
.bundle-stepper-wrapper,
.bundle-text--body,
.bundle-text--display,
.bundle-text--emphasis,
.bundleapp-modal__backdrop,
.bundleapp-modal__container--complete-screen--header-container,
.bundleapp-modal__container--complete-screen,
.bundleapp-modal__logo,
.bundleapp-modal,
.button--primary,
.button--secondary,
.is-scrolling-up,
.p_8068229660990, (and similar product id classnames)
.pv_44297820045630, (and similar product variant id classnames)
.q_0, (and similar quantity classnames)

Alongside classnames, remember you can also harness IDs for pinpoint styling. Simply prefix with # when styling, e.g., #myCustomID.

🚧

Point of Caution:

Steer clear of classnames like "Typography__Span-sc-1enup42-1" and "uJwtZ". These will change without notice. Only use classnames in plain english that seem similar to the list in this document.

If you're hankering for some inspiration or feel a tad shaky about CSS, our support team is always on standby to assist.

Here's a quick screen grab of how to add styles to your existing theme styles: