How do I use CSS to adjust the look of Akin2 on my BigCommerce website?

If you would like to change the way the widget is presented on your website, please see instructions below. You can copy the existing basic stylesheet we provide and customize it to your liking. 

IMPORTANT NOTE: When it comes to adjusting CSS, you do need to be knowledgeable about coding in CSS. If you are not, then please have your developer edit and place the CSS tag and code. 

1. Download - Basic Style Sheet.  
   1. Download the file and open it so you have it ready.
2. Login to the backend of your BigCommerce account
3. In the BigCommerce Admin, in the left navigation click on Storefront to access the Themes section
   
4. Click Themes
   

   

5. Click on Edit Theme Files under the Advanced tab within your Current Theme window
   

   

6. You will now be within the Stencil File Editor. Navigate to Templates on the left-hand side and expand the drop down.
7. Expand the Components section by clicking on it.
8. Expand the Products section by clicking on it.
   
9. Scroll down and click on product-view.html
   

   

   1. Note: If you do not see a page called product-view.html, you may have more of a custom theme. The page you are looking for is your products landing page. Once you are able to view that page please continue with the steps.
10. At the very top of product-view.html, you should see Akin2 code already there.
11. On line three, you should see the basic.css URL that pulls in that code.  You can now remove that one line and replace that with the code from the file you downloaded. 
    1. If you do not have that basic.css URL listed, then please create a new line right underneath the Akin2 code and paste the CSS code that is on that file. 
       

       

12. Once that CSS code is placed, you can edit the necessary fields to adjust the Akin2 look. Below is a sample of what you should see.  Line 4 is the start of the CSS style tag and it should end with a closing style tag, i.e. </style>.
    

    

13. Click Apply