How do I use CSS to adjust the look of Akin2 on my Shopify 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 Shopify account.
3. In the Shopify Admin, in the left navigation under Sales Channels, click on Online Store
4. Click Themes
5. Click Actions
6. Click Edit Code
7. Scroll down to Sections
8. Click on product-template.liquid
   1. NOTE: If you do not see a page called product-template.liquid, 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.
9. At the very top of product-template.liquid, you should see Akin2 code already there.  You should see this one line of code
   

   

10. If you 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. 
11. 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.  The highlighted part is the start of the CSS style tag and it should end with a closing style tag, i.e. </style>.
    

    

12. On the top right, click Save.